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
- Enter a value which you will be replaced in the styled format text
- Enter a styled format text
- Encode the styled format text using
TextUtils.htmlEncode(
- Use the styled text as format and replace the value entered
- Decode the entity-escaped HTML into a Spanned object using
Html.fromHtml
- 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