Explain Codes LogoExplain Codes Logo

Android: html in strings.xml

android
html
textview
webview
Nikita BarsukovbyNikita Barsukov·Dec 4, 2024
TLDR

To embed HTML in strings.xml, use CDATA:

<string name="styled_text"><![CDATA[<b>Bold Text</b>]]></string>

To display the HTML in a TextView, invoke Html.fromHtml:

//Handle HTML like a champ! textView.setText(Html.fromHtml(getString(R.string.styled_text)));

Always make sure to use android.text.Html.fromHtml() for accurate HTML rendering.

A lot of texts are more useful when they come with clickable links. To make these links interactive within your TextView, first, enable this feature:

// Who said TextView can't have interactive links? textView.setMovementMethod(LinkMovementMethod.getInstance());

And then, specify this in your XML layout:

<TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:linksClickable="true"/>

How to escape HTML symbols

When you are working with strings.xml, remember to escape HTML entities to avoid errors:

<string name="less_than">&lt;</string> <!-- a less than sign inequally equal to "&lt;" --> <string name="greater_than">&gt;</string> <!-- a greater than sign inequally equal to "&gt;" -->

By escaping these signs, you ensure that they are interpreted correctly.

Keeping text preformatted

Maintain whitespace and line breaks within your strings.xml by using the <pre> HTML tag:

<string name="preformatted_text"><![CDATA[<pre>Formatted\n Text</pre>]]></string>

Then feed it to TextView:

// This is going to look just perfect! textView.setText(Html.fromHtml(getString(R.string.preformatted_text)));

Switching to WebView for complex HTML

Complex or advanced HTML display might just be out of TextView's paygrade. In such a case, switch to a WebView:

<WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="wrap_content" />

And load your fancy HTML into it:

// Let WebView handle the big guns! webView.loadData(getString(R.string.complex_html_string), "text/html; charset=UTF-8", null);

Text styling with <span> tag

Specific parts of your text may require their own unique styles. Do it using the <span> tag:

<string name="styled_span"><![CDATA[Normal text <span style='color:red;'>Red text</span>]]></string>

Uniform text appearance

Text appearance can be adjusted to give a consistent look and feel throughout the application. Use the android:textAppearance attribute for that uniformity:

<TextView android:id="@+id/textView" android:textAppearance="@style/TextAppearance.AppCompat.Medium"/>

This way, your app maintains a consistent font face, size and color.

Tackling long content

When your HTML content is long, wrap the TextView with a ScrollView for better user experience:

<ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/longTextView" android:layout_width="match_parent" android:layout_height="wrap_content" /> </ScrollView>

Including images

Including images is possible. Use an ImageView and blend in image-loading libraries like Glide or Picasso to simplify things.

Store and access HTML strings

To keep your code clean and manageable, keep your formatted strings in strings.xml and pull them when required with getString().

String fancyFormatting = getString(R.string.html_content); textView.setText(Html.fromHtml(fancyFormatting));