How to Display HTML in Android TextView

This example explains to display HTML in Android TextView. Many times while you design an application, you may encounter a place where you will like to use HTML content in your screen. This may be to display a static “eula” or “help” content. In android there is a lovely class android.text.HTML that processes HTML strings into displayable styled text. Currently android doesn’t support all HTML tags.

Android API documentation does not stipulate what HTML tags are supported. I have looked into the android Source code and from a quick look at the source code, here’s what seems to be supported as of now.

http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/2.2_r1.1/android/text/Html.java

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

From HTML method returns displayable styled text from the provided HTML string. As per android’s official Documentations any tags in the HTML will display as a generic replacement image which your program can then go through and replace with real images.

Html.formHtml method takes an Html.TagHandler and an Html.ImageGetter as arguments as well as the text to parse. We can parse null as for the Html.TagHandler but you’d need to implement your own Html.ImageGetter as there isn’t a default implementation. The Html.ImageGetter needs to run synchronously and if you’re downloading images from the web you’ll probably want to do that asynchronously. But in my example I am using the images from resources to make my ImageGetter implementation simpler.

Display HTML in Android TextView- Example

main_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical" >

<TextView
android:id="@+id/title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your HTML text Below" />

<TextView
android:id="@+id/html_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

MainActivity.java

package com.javatechig.example.ui;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.text.Html;
import android.view.Menu;
import android.widget.TextView;

public class MainActivity extends Activity {

private final String htmlText = "<body><h1>Heading Text</h1><p>This tutorial " +
            "explains how to display " +
            "<strong>HTML </strong>text in android text view.&nbsp;</p>" +
            "<img src="hughjackman.jpg">" +
            "<blockquote>Example from <a href="www.javatechig.com">" +
            "Javatechig.com<a></blockquote></body>";

@Override
protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);

          TextView htmlTextView = (TextView)findViewById(R.id.html_text);
          htmlTextView.setText(Html.fromHtml(htmlText, new ImageGetter(), null));

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
         // Inflate the menu; this adds items to the action bar if it is present.
         getMenuInflater().inflate(R.menu.main, menu);
         return true;
}

private class ImageGetter implements Html.ImageGetter {

public Drawable getDrawable(String source) {
        int id;
        if (source.equals("hughjackman.jpg")) {
               id = R.drawable.hughjackman;
        }
        else {
            return null;
        }

       Drawable d = getResources().getDrawable(id);
       d.setBounds(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight());
       return d;
     }
};

}

html-text-in-andorid-textview

A blogger, bit of a tech freak and a software developer. Around 7+ years of experience in design, development and maintenance of Mobile applications. Follow him on Twitter, Google Plus or like our official Facebook page

  • Mojtaba Motamed

    hi.
    can you help me about how to load image from web like(“”)
    can we set asynktask in getDrwable function?
    thanks

    • Nilanchala Panigrahy

      Yes. You can do it by using Html.ImageGetter

      private class MyImageGetter implements Html.ImageGetter {

      public Drawable getDrawable(String source) {
      int id;

      if (source.equals("test1.jpg")) {
      id = R.drawable.test1;
      }
      else if (source.equals("test2.jpg")) {
      id = R.drawable.test2;
      }
      else {
      return null;
      }

      Drawable d = getResources().getDrawable(id);
      d.setBounds(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight());
      return d;
      }
      };

      In the above code, it is using image from drawable. Alternatively you can write the logic to download the drawable from web.

      String myHtml = "This will display an image to the right ";
      mTextview.setText(Html.fromHtml(myHtml, new MyImageGetter(), null);

  • pożyczki

    This post is amazing. I realy love it!

  • simon

    (sorry for the double post somehow i clicked post before finishing writing)

    the WebView widget does support all HTML you can throw at it. android.text.HTML is really here only to put HTML in a simple TextView without a heavy interpretation.

    It is true, however, that the extent of the supported tags should be documented officially somewhere.

  • simon

    “Currently android doesn’t support all HTML tags.”
    I tend to disagree with this statement. The WebView widget does

    • http://javatechig.com Javatechig

      @simon, I agree with you. I have depicted the same in my post. The support of HTML tags are limited to few tags as of now.
      However it is nice to have feature in android, though developers can’t rely on it.