android kotlin - TextView html formatted text

Displaying HTML formatted text in an Android TextView (Kotlin)

This code snippet demonstrates how to display text with HTML formatting within a TextView element in an Android application written in Kotlin.

Explanation:

The code resides in the MainActivity.kt file and defines an AppCompatActivity subclass. The onCreate method is responsible for initializing the activity's layout and functionalities when it's first created. Here's a breakdown of the key steps:

Define HTML String: A String variable named htmlString is created. It holds the text content you want to display, but wrapped in HTML tags to specify formatting. In this example, it includes bold, italic, underlined text, and line breaks using <br /> tags.
Convert to Spanned: The HtmlCompat.fromHtml function is used to convert the htmlString into a Spanned object. Spanned is an interface in Android that represents text with embedded formatting information. The fromHtml function parses the HTML tags and creates a Spanned object with the corresponding formatting applied. The code also uses the FROM_HTML_MODE_LEGACY flag, which ensures compatibility with older Android versions.
Set Text on TextView: Finally, the Spanned object containing the formatted text is assigned to the text property of the textView element. This displays the text with the desired HTML formatting within the TextView.

Summary:

By leveraging the HtmlCompat.fromHtml function, this code effectively transforms a basic String with HTML markup into a Spanned object understood by the TextView. This allows the TextView to render the text with the specified formatting (bold, italic, underline, line breaks) within the application's UI.

MainActivity.kt


package com.example.jetpack

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


class MainActivity : AppCompatActivity() {

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

        // string inside html markup objects
        val htmlString : String  = "TextView first line... <br />" +
        "<b>Bold Text</b> | <i>Italic Text</i> and <br/>" +
                "<u>Underlined text</u>"

        // spanned is the interface for text that has
        // markup objects attached to ranges of it
        val spanned : Spanned = HtmlCompat
            // HtmlCompat is the backwards compatible version of Html
            .fromHtml(
                htmlString, // source
                // flag that separate block-level elements with blank lines
                // (two newline characters) in between
                HtmlCompat.FROM_HTML_MODE_LEGACY // flags
            )

        // finally, show html formatted text in text view
        textView.text = spanned
    }
}

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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EDEAE0"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="25dp"
        tools:text="TextView"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>