Android Html Encoding, style formating and Decoding

In this article, I am going to show you how to encode an HTML string.
Next, I will show you how to use the styled text as string format.
Finally, we will decode the formatted text to an HTML display.

Main Screen

Let’ start with the main screen. The first widget is a text field to enter the text that you want to format. Next, you can enter a styled string format in HTML tags.
Finally, we will have four buttons ‘Encode’, ‘Format’, ‘Decode’ and ‘HTML Vew’. All the four buttons have onClick attribute set.

welcome.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.javarticles.android.DatePickerExample" >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="18dp"
        android:text="@string/welcome"
        android:textColor="@color/welcome_text_color"
        android:textSize="20sp" />

    <EditText
        android:id="@+id/someText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/enter_name" >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/html_format"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/enter_format" >
    </EditText>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/encode_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="encode"
            android:text="@string/encode_btn_title"
            android:layout_weight="0" />

        <TextView
            android:id="@+id/encoded_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/format_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="format"
            android:text="@string/format_btn_title"
            android:layout_weight="0" />

        <TextView
            android:id="@+id/formated_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/decode_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="decode"
            android:text="@string/decode_btn_title" 
            android:layout_weight="0"/>

        <TextView
            android:id="@+id/decoded_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/html_view_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="htmlView"
            android:text="@string/html_btn_title"
            android:layout_weight="0" />

        <TextView
            android:id="@+id/html_view_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>

Main Activity

1. Enter a value which you will be replaced in the styled format text
2. Enter a styled format text
3. Encode the styled format text using TextUtils.htmlEncode(
4. Use the styled text as format and replace the value entered
5. Decode the entity-escaped HTML into a Spanned object using Html.fromHtml
6. Call Html.fromHtml again on the decoded text to display it as HTML view

MainActivity:

package com.javarticles.android;

import android.app.Activity;
import android.os.Bundle;
import android.text.Html;
import android.text.TextUtils;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends Activity {
	private EditText someText;
	private TextView encodedText;
	private TextView decodedText;
	private TextView formatedText;
	private TextView htmlViewText;
	private EditText htmlFormat;
	
	public void onCreate(final Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);	
		setContentView(R.layout.welcome);
		someText = (EditText) findViewById(R.id.someText);
		encodedText = (TextView) findViewById(R.id.encoded_text);
		decodedText = (TextView) findViewById(R.id.decoded_text);
		formatedText = (TextView) findViewById(R.id.formated_text);
		htmlFormat = (EditText) findViewById(R.id.html_format);
		htmlViewText = (TextView) findViewById(R.id.html_view_text);
	}
	
	public void encode(View view) {
		encodedText.setText(TextUtils.htmlEncode(htmlFormat.getText().toString()));
	}
	
	public void format(View view) {
		formatedText.setText(String.format(encodedText.getText().toString(), someText.getText().toString()));
	}
	
	public void decode(View view) {
		String formatedHtmlText = Html.fromHtml(formatedText.getText().toString()).toString();
		decodedText.setText(formatedHtmlText);
	}
	
	public void htmlView(View view) {
		htmlViewText.setText(Html.fromHtml(decodedText.getText().toString()));
	}
}

Run the application

Enter some value and the styled format.

Now press ‘Encode’, ‘Format’, ‘Decode’ and ‘HTML View’ one by one.

Download the source code

This was an example about HTML Encoding/decoding and displaying formatted styled text. You can download the source code here: styledHtmlTextExample.zip