Android – HTML in textView

Display HTML format

First we will present below what are the supported tags for a textView and what are not supported. You can skip this section if you are already familiar with these or you want to jump directly into action 🙂

Supported tags
Unsupported tags
  • <a href=”…”>
  • <b>
  • <big>
  • <blockquote>
  • <br>
  • <cite>
  • <del>
  • <dfn>
  • <div align=”…”>
  • <em>
  • <font size=”…” color=”…” face=”…”> Size is working only for strings in strings.xml, for strings in Java code it seems that size DOESN’T change. Face is working in both xml and java code but only for default faces that Android supports like (monospace, serif, etc)
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <i>
  • <img src=”…”>
  • <li>
  • <p>
  • <s>
  • <small>
  • <strike>
  • <strong>
  • <sub>
  • <sup>
  • <tt>
  • <u>

 

  • <abbr>
  • <acronym>
  • <address>
  • <area>
  • <article>
  • <aside>
  • <audio>
  • <base>
  • <basefont>
  • <bdi>
  • <bdo>
  • <body>
  • <button>
  • <canvas>
  • <caption>
  • <center>
  • <code>
  • <col>
  • <colgroup>
  • <data>
  • <datalist>
  • <dd>
  • <div>
  • <dl>
  • <dt>
  • <details>
  • <dialog>
  • <dir>
  • <embed>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <font size…>????? doesn’t work for strings declared in Java code.
  • <footer>
  • <frame>
  • <frameset>
  • <form>
  • <head>
  • <header>
  • <hr>
  • <html>
  • <iframe>
  • <input>
  • <ins>
  • <kbd>
  • <label>

 

  • <legend>
  • <link>
  • <main>
  • <map>
  • <mark>
  • <menu>
  • <menuitem>
  • <meta>
  • <meter>
  • <nav>
  • <noframes>
  • <noscript>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <param>
  • <picture>
  • <pre>
  • <progress>
  • <q>
  • <rp>
  • <rt>
  • <ruby>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <source>
  • <span style=””>
  • <style>
  • <summary>
  • <table>
  • <tbody>
  • <td>
  • <textarea>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
  • <title>
  • <tr>
  • <track>
  • <ul>
  • <var>
  • <video>
  • <wbr>

 

1. String in Java code

Examples that don’t work

  • Using alpha channel

Note: 80 from #800000FF should have added a blue color with an alpha of 50% to the “blue” text

Examples that work

  • Using rgb

  • Using hexa (it works with lower case letters also)

2. String in strings.xml

When the text that needs to be formatted is located in strings.xml, there are a few ways of getting the text. Unfortunately, not all of them will keep the style.

strings.xml

Examples that DON’T work

  • using getString()

  • using getString() + Html.fromHtml()

 Examples that work

  • using getText()

  • using the resource id directly

  • Using getString() + Html.fromHtml()+<![CDATA[html source code]]>

<![CDATA[html source code]]> is used in strings.xml so that you can use the actual HTML you include without needing to translate all the special characters like <, >, etc.

Note: CDATA is working only if the string is retrieved using Html.fromHtml().

Note 2: Also notice that when we used CDATA color=red is written without ”. If you keep ” they need to be escaped.

What is the difference between getText() and getString()?

  • getText() returns CharSequence
  • getString() returns String

Below is a table in which are presented CharSequence interface and some of the classes that implement this interface.

As you could see from the above table, String objects do not keep style formatting, so this is why calling getString() won’t work. On the other hand, getText() internally uses Html.fromHtml() to parse HTML tags, which returns a Spanned object, which keeps the style formatting of a text.

  • alpha channel

As you can see, the transparency is working for strings declared in strings.xml. For now, I am not sure why it’s working for xml but not for java code. If you know or find an answer please post a comment on the post.

 

 

 

Conclusion

For strings located in strings.xml file use:

textView.setText(getText(R.string.formatted_text));

And for strings in Java code use:

textView.setText(Html.fromHtml(str, Html.FROM_HTML_MODE_COMPACT));

3. General examples

Other motives that might not keep the style on a text:

 

 

 

Resources:

https://commonsware.com/blog/Android/2010/05/26/html-tags-supported-by-textview.html

http://saket.me/html-tags-textview/?utm_source=Android+Weekly&utm_campaign=4fc49af2d9-android-weekly-265&utm_medium=email&utm_term=0_4eb677ad19-4fc49af2d9-337918897

 

Load localized strings at runtime

Here is a possible solution if you want to load localized text resources on a TextView in Android.

Problem:

You may need to extend your app flexibility to be able to load localized texts at runtime from a web server for example. That would be to be able to add new localizations (for new countries) without having to release a new update.

Solution:

One possible solution would be to:
1. Set a sort of naming conventions for your localized resources(text) like naming the key to something like: en_my_text, ro_my_text, de_my_text…
2. Load the text resources from the webserver and save those into a SharedPreferences file using the naming convention from above
3. Create a custom TextView and a custom attribute for the text view that will be used to set in XML the key for your localized text
4. Use the value from the custom attribute to load the translation on the TextView when Android loads your TextView

Simple sample

The xml attribute:

 

You can save that under res -> values -> attributes.xml

The TextView custom class:

I uploaded the source project here for you.


 

Homework:

As an exercise and also improvement, you could create a new attribute called language that could store the language prefix in strings. This way you can remove the string you added in the xml and replace it with just the key for the resource.
After that you could fetch the value of that in your custom TextView and append the language prefix attribute value to the key attribute value to form the final key that you use to load the resource from the SharedPreferences.

This way you have to write only one string resource under the strings.xml file.

Cheers!

 

 

 

 

 

 

Add links to a TextView in Android

Maybe you need to add links to a TextView on Android but you don’t want to use Linkify for some reasons and you also want that link to be opened when the user taps it.

Here is a simple solution:

Note that I used the fromHtml() method from the Html class to generate a Spanned object that maps the given Html string into something that the TextView will know how to display.

You can use that to add other Html styles to your text when you display it in a TextView but you need to make sure you know the supported tags.

I extracted the supported tags from the source code ad you can find those below.

Supported HTML tags by the Html Android class:

– br
– p
– div
– em
– b
– strong
– cite
– dfn
– i
– big
– small
– font
– blockquote
– tt
– a
– u
– sup
– sub
– h (1 to 6)
– img

Source here.

 

 

 

Android Add Views into a ViewGroup Dynamically

As Android developer you will surely  need someday to add views dynamically, instead of creating a ListView. I will show you in this tutorial how to do this 🙂

1. Create a new project and call your activity “MyActivity”
2. Go to res – layout – main.xml and put the following code:

3. Go to res – layout and create a new xml called text_layout.xml and put the following code:

4. Now go to MyActivity class and put the following code:

And now you should have a list with 100 rows that can be scrolled.