Displaying HTML text in Jetpack Compose

One of the prime use cases for compose-view interop

Photo by Jackson Sophat on Unsplash

Introduction

Hello everyone, in this short article I will be showing you how to display HTML text in Android. At the time of writing this article, Jetpack compose’s Text composable doesn’t allow us to do this. But, thanks to the great interop support for compose, we can use the TextView or MaterialTextView to display html styled text.

Pre-requisites

• Knowledge about using views in compose using the AndroidView composable.
• Basic knowledge of how to work with Jetpack compose.

What is HTML text?

HTML text, is, as the name implies, a piece of text that is formatted using HTML tags. A very important thing to note here is that, not all tags are supported in Android. Only a few basic tags are supported.

Use of HTML text in the context of Android

Many API endpoints use this format to store textual content. An endpoint may make use of this for several reasons. Here’s an example of such an endpoint — The Spotify API.

When sending a request to the Spotify API for getting information about a podcast episode, in addition to providing the plain text version of the episode’s description, it also provides a html formatted version of the description.

{
  .
  .  
  "description" : "........."
  "html_description" : ".........."
  .
  .
}

Spotify allows authors of the podcast to add lists to the description. Without that tag, we as consumers of the API, wouldn’t be able to know where a list header is, and, where the list items start and end. And, we are talking about only one tag. Different tags need to be handled differently. In the case of the list tag, even if we are able to somehow find out where a list header and it’s items are located in a string, we as developers need to waste time writing code that displays them in the right format.

Parsing HTML formatted text

To parse a string that contains html formatted text into something Android’s textview could make use of, the HtmlCompact class can be used. The HtmlCompat class is a version of the Html class that provides backwards compatibility for older versions of Android. Here is the class documentation for both the Html and HtmlCompat class.

The HtmlCompat.fromHtml() method can be used to convert a Html string into a Spanned object that can be used with Android’s TextView or MaterialTextView. The function’s first argument is the source string and the second argument allows you to specify certain flags that can be used to customize the parsing behavior of the function. Explaining the use of each flag is out of the scope of this article. We can just pass in 0, if we don’t need to specify any flags.

// parsing html string using the HtmlCompat class
val spannedText = HtmlCompat.fromHtml(sourceString, 0)

Displaying the Spanned text

Once the text is converted, we can pass it to the TextView to display it. Since, we are using compose, we will use the AndroidView composable to use the TextView as a composable.

AndroidView(
    modifier = modifier,
    factory = { MaterialTextView(it) }, 
    update = { it.text = spannedText }
)

Here we are using a MaterialTextView, but, this would also work for a normal TextView. The text is set in the update block in order to recompose the view when the text is updated. And, Voila! you just learn’t how to display HTML text in Android!

Bonus! — Make links clickable!

If there are any links in the text, we can make it clickable by setting the autoLinkMask property to Linkify.WEB_URLS and setting the linksClickable property to true.

AndroidView(
     modifier = modifier,
     factory = {
      MaterialTextView(it).apply {
            // links
            autoLinkMask = Linkify.WEB_URLS
            linksClickable = true
            // setting the color to use forr highlihting the links
            setLinkTextColor(Color.White.toArgb()) 
          }
      },
     update = {
        it.maxLines = currentMaxLines
        it.text = text
    }
)

This not only highlights the links and makes them clickable, but also opens the associated webpage when the user clicks on the link.

Conclusion

And this wraps up this short blog post🎉! You could’ve been doing a million other things, but you decided to sit and read through this article to know how to display an HTML text in Jetpack compose. It shows that you’re committed to improving your skills in Android development! Hopefully, you found this blog post helpful! If you liked this article, you can checkout my other articles by clicking here. As always, I would like to thank you for taking the time to read this article😊. I wish you the best of luck! Happy coding 👨‍💻! Cheers!

If you really liked my article and want to support me, you can do so, by clicking this link. Thank you so much for being generous ❤️, it really motivates me to keep going, and it helps me to keep my articles free for anyone to read. If you don’t feel like supporting, that’s fine too! The fact that you took some time off your schedule to read my article means a lot to me. Thank you 🙂