Solutions - Render HTML in TextView

Rendering HTML Content in TextView in Android.

When it comes to displaying text in an Android application, the TextView widget is the go-to option. However, what if you want to display text formatted with HTML tags, such as bold or italic text, links, or images? In this article, we'll explore how to render HTML content in TextView in Android.

Using Html.fromHtml() Method

The easiest way to display HTML content in a TextView is by using the Html.fromHtml() method. This method takes a string containing HTML content and returns a Spanned object that can be set as the text of the TextView.

Here's an example:

String htmlContent = "<b>Hello</b> <i>World</i>";
TextView textView = findViewById(R.id.text_view);
textView.setText(Html.fromHtml(htmlContent));

In this example, we create a string containing HTML tags for bold and italic text. We then get a reference to the TextView widget using its ID and set its text by calling the Html.fromHtml() method and passing in the HTML string.

Handling Links

If the HTML content contains links, you can make them clickable by setting a LinkMovementMethod on the TextView. This method enables the TextView to handle touch events and open the link in a web browser.

Here's an example:

String htmlContent = "Visit <a href=\"https://www.example.com\">Example</a>";
TextView textView = findViewById(R.id.text_view);
textView.setText(Html.fromHtml(htmlContent));
textView.setMovementMethod(LinkMovementMethod.getInstance());

In this example, we create an HTML string containing a link to the Example website. We set the text of the TextView using the Html.fromHtml() method and set a LinkMovementMethod on the TextView to make the link clickable.

Handling Images

If the HTML content contains images, you can use the Html.ImageGetter interface to load and display them in the TextView. This interface has a single method, getDrawable(), which takes the URL of the image and returns a Drawable object that can be displayed in the TextView.

Here's an example:

String htmlContent = "Here's an image: <img src=\"https://www.example.com/image.png\">";
TextView textView = findViewById(R.id.text_view);
textView.setText(Html.fromHtml(htmlContent, new Html.ImageGetter() {
    @Override
    public Drawable getDrawable(String source) {
        try {
            InputStream is = (InputStream) new URL(source).getContent();
            Drawable drawable = Drawable.createFromStream(is, "image");
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
            is.close();
            return drawable;
        } catch (Exception e) {
            return null;
        }
    }
}, null));

In this example, we create an HTML string containing an image tag with a URL to the image. We set the text of the TextView using the Html.fromHtml() method and pass an Html.ImageGetter object as the second argument. This object loads the image from the URL and returns a Drawable object that is displayed in the TextView.

TextView-HTML Libraries

Let us now explore some alternatives, the best android libraries that allow us render HTML in a textview. Such libraries typically specify the tags they support, so you know what yoy are getting.

Here are the solutions to consider:

(a). HtmDsl

This solution builds valid HTML for Android TextView.

Below are the HTML tags supported by HtmlDsl:

<a href="...">
<b>
<big>
<blockquote>
<br>
<cite>
<dfn>
<div align="...">
<em>
<font color="..." face="...">
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<i>
<img src="...">
<p>
<small>
<strike>
<strong>
<sub>
<sup>
<tt>
<u>
<ul>
<li>

Here is the project demo that will be created shortly using this library:

HtmDsl Example

Let's look at how to use it.

Step 1: Install it

There are two ways of installing HtmlDsl. First using the gradle method. Add the following implementation statement in your build.gradle file:

implementation("com.jaredrummler:html-dsl:1.0.0")

The second way is via AAR(Android Archive). You can download it here.

Step 2: Write code

For example let's say you want to programmatically create a html string with header and strong tags:

HTML.create {
        h1("HTML DSL")
        strong("Provides a DSL to build HTML for Android TextView")
}

What if you want to create and render html with header, strong, list of items and links:

textView.setHtml {
    h1("HTML DSL").br()
    strong("Build valid HTML for Android TextView.").br().br()
    h3("Android Versions:")
    ul {
        li {
            a(href = "https://developer.android.com/about/versions/12/get") {
                +"Android 12 Beta"
            }
        }
        li("Android 11")
        li("Android 10")
        li("Pie")
        li("Oreo")
        li("Nougat")
        li("Marshmallow")
        li("Lollipop")
        // ...
    }

    small {
        sub {
            +"by "
            a {
                href = "https://github.com/jaredrummler"
                text = "Jared Rummler"
            }
        }
    }
}

If you want to create HTML and assign it to a string for later use:

val htmlString = HTML.create {
    p {
        font(face = "monospace", color = "#3ddc84") {
            unsafe {
                +"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            }
        }
    }
}.render(prettyPrint = true)

Or you want to create html programmatically and save it to a file:

HtmlRenderer<FileWriter>(HTML.create {
    small {
        sub {
            +"by "
            a {
                href = "https://github.com/jaredrummler"
                text = "Jared Rummler"
            }
        }
    }
}, FileWriter("output.html"), true)

Example

It's time to look at a full example. Start by going through the installation steps as has been discussed earlier.

Add internet permission in your android manifest:

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Then proceed to create a layout for your main activity and add the following code;

activity_demo.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.ogaclejapan.smarttablayout.SmartTabLayout
        android:id="@+id/viewpagertab"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/white"
        app:stl_clickable="true"
        app:stl_defaultTabBackground="?attr/selectableItemBackground"
        app:stl_defaultTabTextAllCaps="true"
        app:stl_defaultTabTextColor="@color/black"
        app:stl_defaultTabTextHorizontalPadding="16dp"
        app:stl_defaultTabTextMinWidth="0dp"
        app:stl_defaultTabTextSize="12sp"
        app:stl_distributeEvenly="false"
        app:stl_dividerColor="#4D000000"
        app:stl_dividerThickness="1dp"
        app:stl_drawDecorationAfterTab="false"
        app:stl_indicatorAlwaysInCenter="false"
        app:stl_indicatorColor="@color/android_blue"
        app:stl_indicatorCornerRadius="2dp"
        app:stl_indicatorGravity="bottom"
        app:stl_indicatorInFront="false"
        app:stl_indicatorInterpolation="smart"
        app:stl_indicatorThickness="4dp"
        app:stl_indicatorWidth="auto"
        app:stl_indicatorWithoutPadding="false"
        app:stl_overlineColor="#4D000000"
        app:stl_overlineThickness="0dp"
        app:stl_titleOffset="24dp"
        app:stl_underlineColor="#4D000000"
        app:stl_underlineThickness="1dp" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Here is the code for DemoActivity:

DemoActivity.kt

class DemoActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_demo)
        val viewPager = findViewById<ViewPager>(R.id.viewpager)
        val viewPagerTab = findViewById<SmartTabLayout>(R.id.viewpagertab)
        viewPager.adapter = FragmentPagerItemAdapter(
            supportFragmentManager, FragmentPagerItems.with(this).apply {
                for (preview in HtmlPreview.values()) {
                    add(preview.name, PreviewFragment::class.java)
                }
            }.create()
        )
        viewPagerTab.setViewPager(viewPager)
    }
}

Find full sample code here

Reference

Find the reference links below:

No.	Link
1.	Download code
2.	Read more
3.	Follow code author

(b). HtmlTextView

HtmlTextView is a library for display html content in android.

This library also provides a dark mode option. Here are the features currently supported:

It currently supports tags:

<iframe>
<a href="...">
<b>
<big>
<blockquote>
<br>
<cite>
<dfn>
<div align="...">
<em>
<font size="..." color="..." face="...">
<i>
<img src="...">
<p>
<small>
<strike>
<strong>
<sub>
<sup>
<tt>
<u>

Step 1: Dependency

Start by registering jitpack as a mavem repository in your project folder's build.gradle:

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

Then in your app folder's build.gradle:

implementation 'com.github.SakaGamer:html-textview:1.0.8'

Then sync.

Step 2: Add to Layout

Then add the html-textview to your layout:

<com.saka.android.htmltextview.HtmlTextView
    android:id="@+id/htmlTextView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp" />

Step 3: Set HTML

Now in your kotlin code you can simply set the html code in your textview:

htmlTextView.setText(html)

Full Example

Start by installing the library as has been discussed.

Then replace your main activity layout with the following code:

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.core.widget.NestedScrollView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.saka.android.htmltextview.HtmlTextView
            android:id="@+id/htmlTextView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp" />

    </androidx.core.widget.NestedScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

Then create a model class:

Content.kt

import android.content.Context
import com.google.gson.Gson
import java.io.BufferedReader
import java.io.IOException
import java.io.InputStream
import java.io.InputStreamReader

class Content {

    val content: String = ""

    companion object {

        @JvmStatic
        fun deserialize(context: Context): Content? {
            try {
                val jsonString = parseResource(context, R.raw.content)
                return Gson().fromJson(jsonString, Content::class.java)
            } catch (e: IOException) {
                e.printStackTrace()
            }
            return null
        }

        @Throws(IOException::class)
        fun parseResource(context: Context, resource: Int): String {
            val inputStream: InputStream = context.resources.openRawResource(resource)
            val sb = StringBuilder()
            val br = BufferedReader(InputStreamReader(inputStream))
            var read = br.readLine()
            while (read != null) {
                sb.append(read)
                read = br.readLine()
            }
            return sb.toString()
        }
    }
}

Then the main activity:

MainActivity.kt

package com.saka.android.htmltextview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val content = Content.deserialize(this)
        findViewById<HtmlTextView>(R.id.htmlTextView).setText(content?.content)
    }

}

Reference

Find the reference links below:

No.	Link
1.	Download code
2.	Read more
3.	Follow code author

Conclusion

In this article, we've explored how to render HTML content in TextView in Android. We've seen how to use the Html.fromHtml() method to display formatted text, how to handle links with a LinkMovementMethod, and how to load and display images with an Html.ImageGetter. By using these techniques, you can create rich and dynamic text views in your Android applications.

Using Html.fromHtml() Method​

Handling Links​

Handling Images​

TextView-HTML Libraries​

(a). HtmDsl​

Step 1: Install it​

Step 2: Write code​

Example​

Reference​

(b). HtmlTextView​

Step 1: Dependency​

Step 2: Add to Layout​

Step 3: Set HTML​

Full Example​

Reference​

Conclusion​

Using Html.fromHtml() Method

Handling Links

Handling Images

TextView-HTML Libraries

(a). HtmDsl

Step 1: Install it

Step 2: Write code

Example

Reference

(b). HtmlTextView

Step 1: Dependency

Step 2: Add to Layout

Step 3: Set HTML

Full Example

Reference

Conclusion