Displaying HTML String using HtmlCompat in Androidx-Kotlin

thumbnail

In this tutorial, you will learn how to display HTML string using HtmlCompat in Androidx-Kotlin. In the past, they introduced a new Html.fromHtml method in android N. Html.fromHtml now requires an additional parameter, named flags. This flag gives you more control about how your HTML gets displayed.

On Android N and above you should use this new method. The older method is deprecated and may be removed in the future Android versions.

You can create your own Util-method which will use the old method on older versions and the newer method on Android N and above. If you don’t add a version check your app will break on lower Android versions. You can use this method in your Util class.

fun fromHtml(html: String?): Spanned {
        return if (html == null) {
            // return an empty spannable if the html is null
            SpannableString("")
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            // FROM_HTML_MODE_LEGACY is the behaviour that was used for versions below android N
            // we are using this flag to give a consistent behaviour
            Html.fromHtml(html, Html.FROM_HTML_MODE_LEGACY)
        } else {
            Html.fromHtml(html)
        }
    }

You can convert the HTML.FROM_HTML_MODE_LEGACY into an additional parameter if you want. This gives you more control in which flag you want to use.

Now, Google has created HtmlCompat which can be used instead of the method below. Add this dependency implementation ‘androidx.core:core:1.0.1 to the build.gradle file of your app. Make sure you use the latest version of androidx.core:core.

You can implement it like this:

HtmlCompat.fromHtml(html, HtmlCompat.FROM_HTML_MODE_LEGACY);

If you implement the code above, it will be like below.

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/textHtml"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:textSize="14sp"
        android:textStyle="normal"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

package com.inpows.tutorial

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
import androidx.core.text.HtmlCompat

class MainActivity : AppCompatActivity() {

     var htmlString = """<h1>HTML String Title in TextView</h1>
        <h3>HTML Paragraph:</h3>
        <p>Display html string in android TextView. How to show HTMl string in android TextView. This html paragraph</p>
        <h3>HTML Unordered List: </h3>
        <ol>
            <li>HTML List Item 1</li> 
            <li>HTML List Item 2</li>
            <li>HTML List Item 3</li>
            <li>HTML List Item 4</li>
            <li>HTML List Item 5</li>
        </ol>"""

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        textHtml.text = HtmlCompat.fromHtml(htmlString, HtmlCompat.FROM_HTML_MODE_LEGACY);
    }
}

The result you will see in the device will be like this:

Back To Top