HTML Tutorial In Android Studio Using TextView & Parsing Example

In Android, many times while designing an application we might be in a situation where we would like to use HTML content and display in our App screen. It may be to display some static content like help, support, FAQ and others pages. For this Android provides us a lovely class android.text.HTML that processes HTML strings into displayable styled text and then we can set the text in our TextView. We can also use WebView for displaying HTML content. Currently Android does not support all the HTML tags but it supports all major tags.

HTML in Android Example

Table Of Contents

1 HTML Tags Supported in Android Studio:
2 How to Display HTML in Android TextView:
3 Methods for Parsing HTML content In Android:
4 Constant Flags used while Parsing HTML content:
5 Example 1 Of Parse HTML File content Using WebView With Example In Android Studio:
6 Example 2 Of HTML In Android Studio Using TextView:
7 Example 3 Of HTML content in WebView With Example in Android Studio:

HTML Tags Supported in Android Studio:

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

1. b & strong tag for bold
2. i, em, cite & dfn tag for Italics
3. u tag for Underline
4. sub tag for Subtext
5. sup tag for Supertext
6. big tag for Big
7. small tag for Small
8. tt tag for Monospace
9. h1 to h6 tag for Headlines
10. img tag for image
11. font tag for Font face and color
12. blockquote tag for longer quotes
13. a tag for Link
14. div and p tag for Paragraph
15. br tag for Linefeed

How to Display HTML in Android TextView:

In Android, for displaying HTML content we use HTML.fromHtml() method. This method can contain Html.ImageGetter as argument as well as the text to parse. We can parse null as for the HTMl.TagHandler but we need to implement HTML.ImageGetter as there is not any default implementation for this. The Html.ImageGetter needs to run synchronously and if we are downloading images from the web we probably want to do that asynchronously. We can also display the HTML content in WebView and its better then displaying it in TextView. In this article we will show you both examples with same HTML content.

Methods for Parsing HTML content In Android:

Below we define some common methods used for parsing HTML content.

1. fromHtml(String source): This method is used to display styled text from the provided HTML string. This method was deprecated in API level 24. now please use fromHtml(String, int) instead.

2. fromHtml(String source, int flags): This method is replacement of fromHtml(String source) method with the legacy flags FROM_HTML_MODE_LEGACY.

3. fromHtml(String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler): This method is used to display styled text from the provided HTML string. Any <img> tags in the HTML will use the specified ImageGetter to request a representation of the image (use null if you don’t want this) and the specified TagHandler to handle unknown tags (specify null if you don’t want this).

4. fromHtml(String source, int flags, Html.ImageGetter imageGetter, Html.TagHandler tagHandler): This method is replacement of fromHtml(String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler) method with the legacy flags FROM_HTML_MODE_LEGACY.

Constant Flags used while Parsing HTML content:

Below we define some common flags that should be used in fromHtml() method for parsing HTML content.

1. FROM_HTML_MODE_COMPACT: This flag is used to separate the block level elements with line break means single new line character in between.

2. FROM_HTML_MODE_LEGACY: This flag is used to separate the block level elements with blank lines means two new line characters in between.

3. FROM_HTML_OPTION_USE_CSS_COLORS: This flag is used to indicate that CSS color values should be used instead of those defined in Color.

4. FROM_HTML_SEPARATOR_LINE_BREAK_BLOCKQUOTE: This flag is used to indicate that texts inside <blockquote> elements will be separated from other texts with one newline character by default.

5. FROM_HTML_SEPARATOR_LINE_BREAK_DIV: This flag is used to indicate that texts inside <div> elements will be separated from other texts with one newline character by default.

6. FROM_HTML_SEPARATOR_LINE_BREAK_HEADING: This flag is used to indicate that texts inside <h1>,<h2>,<h3>,<h4>,<h5> and <h6> elements will be separated from other texts with one newline character by default.

7. FROM_HTML_SEPARATOR_LINE_BREAK_LIST: This flag is used to indicate that texts inside <ul> elements will be separated from other texts with one newline character by default.

8. FROM_HTML_SEPARATOR_LINE_BREAK_LIST_ITEM: This flag is used to indicate that texts inside <li> elements will be separated from other texts with one newline character by default.

9. FROM_HTML_SEPARATOR_LINE_BREAK_PARAGRAPH: This flag is used to indicate that inside <p> elements will be separated from other texts with one newline character by default.

Example 1 Of Parse HTML File content Using WebView With Example In Android Studio:

Below is the example of HTML in which we parse the HTML file and display the HTML content in our Android WebView. In this example firstly we create a assets folder and store a HTML file in it. After that we create a WebView in our XML file and then get the reference of WebView in our MainActivity and finally with the help of loadUrl() method we display the content in our webView.

Download Code

HTML in Android Example

Step 1: Create a new project and name it HtmlExample.

Step 2: Open res -> layout -> activity_main.xml (or) main.xml and add following code:

In this step we open an xml file and add the code for displaying a WebView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="abhiandroid.com.htmlexample.MainActivity">

    <WebView
        android:id="@+id/simpleWebView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp" />

</RelativeLayout>

Step 3: Now create assets folder in App. You can read here how to create assets folder in Android Studio

Step 4: Now inside assets folder add a HTML file name myfile.html. You can read here how to add local html file in Android Studio. Also inside myfile.html add the below HTML content or add any content in HTML format.

<h1>Heading 1</h1>
 <h2>Heading 2</h2>
<p>This is some html. Look, here's an <u>underline</u>.</p>
<p>Look, this is <em>emphasized.</em> And here\\'s some <b>bold</b>.</p>
<p>Here are UL list items:
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<p>Here are OL list items:
<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ol>

Step 5: Now Open src -> package -> MainActivity.java

In this step we open MainActivity where we add the code to initiate the WebView and then display the HTML content from file stored in assets folder into WebView.

package abhiandroid.com.htmlexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    WebView webView;

    public String fileName = "myfile.html";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // init webView
        webView = (WebView) findViewById(R.id.simpleWebView);
        // displaying content in WebView from html file that stored in assets folder
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/" + fileName);
    }
}

Output:

Now run the App and you will see local content added in HTML file is loaded in Webview.

Example 2 Of HTML In Android Studio Using TextView:

Below is the example of HTML in which we display the HTML content in our Android TextView with the help of fromHtml() method. In this example firstly we create a TextView in our XML file and then get the reference of TextView in our MainActivity and finally with the help of fromHtml() method we set the content in our TextView.

Download Code

HTML in TextView Android Studio

Step 1: Create a new project and name it HtmlExample.

Step 2: Open res -> layout -> activity_main.xml (or) main.xml and add following code:

In this step we open an xml file and add the code for displaying a TextView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="abhiandroid.com.htmlexample.MainActivity">

    <TextView
        android:id="@+id/simpleTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp" />

</RelativeLayout>

Step 3: Now Open src -> package -> MainActivity.java

In this step we open MainActivity where we add the code to initiate the TextView and then set the HTML content which is stored in a string variable into TextView using fromHtml() method.

package abhiandroid.com.htmlexample;

import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView textView;
     String content="<h1>Heading 1</h1>\n" +
             "        <h2>Heading 2</h2>\n" +
             "        <p>This is some html. Look, here\\'s an <u>underline</u>.</p>\n" +
             "        <p>Look, this is <em>emphasized.</em> And here\\'s some <b>bold</b>.</p>\n" +
             "        <p>Here are UL list items:\n" +
             "        <ul>\n" +
             "        <li>One</li>\n" +
             "        <li>Two</li>\n" +
             "        <li>Three</li>\n" +
             "        </ul>\n" +
             "        <p>Here are OL list items:\n" +
             "        <ol>\n" +
             "        <li>One</li>\n" +
             "        <li>Two</li>\n" +
             "        <li>Three</li>\n" +
             "        </ol>";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // init TextView
        textView = (TextView) findViewById(R.id.simpleTextView);
        // set Text in TextView using fromHtml() method with version check
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            textView.setText(Html.fromHtml(content, Html.FROM_HTML_MODE_LEGACY));
        } else
            textView.setText(Html.fromHtml(content));
    }
}

Output:

Now run the App and you will see HTML content is shown in TextView.

Example 3 Of HTML content in WebView With Example in Android Studio:

Below is the example of HTML in which we display the HTML content in our Android WebView. In this example firstly we create a WebView in our XML file and then get the reference of WebView in our MainActivity and finally with the help of loadDataWithBaseURL() method we display the content in our webView.

Download Code

HTML WebView Example in Android Studio

Step 1: Create a new project and name it HtmlWebViewExample.

Step 2: Open res -> layout -> activity_main.xml (or) main.xml and add following code:

In this step we open an xml file and add the code for displaying a WebView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="abhiandroid.com.htmlexample.MainActivity">

    <WebView
        android:id="@+id/simpleWebView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp" />

</RelativeLayout>

Step 3: Now Open src -> package -> MainActivity.java

In this step we open MainActivity where we add the code to initiate the WebView and then display the HTML content which is stored in a string variable into WebView.

package abhiandroid.com.htmlexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    WebView webView;
     String content="<h1>Heading 1</h1>\n" +
             "        <h2>Heading 2</h2>\n" +
             "        <p>This is some html. Look, here\\'s an <u>underline</u>.</p>\n" +
             "        <p>Look, this is <em>emphasized.</em> And here\\'s some <b>bold</b>.</p>\n" +
             "        <p>Here are UL list items:\n" +
             "        <ul>\n" +
             "        <li>One</li>\n" +
             "        <li>Two</li>\n" +
             "        <li>Three</li>\n" +
             "        </ul>\n" +
             "        <p>Here are OL list items:\n" +
             "        <ol>\n" +
             "        <li>One</li>\n" +
             "        <li>Two</li>\n" +
             "        <li>Three</li>\n" +
             "        </ol>";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // init webView
        webView = (WebView) findViewById(R.id.simpleWebView);
        // displaying text in WebView
        webView.loadDataWithBaseURL(null, content, "text/html", "utf-8", null);
    }
}

Output:

Now run the App and you will see HTML content is displayed using Webview.

4 thoughts on “HTML Tutorial In Android Studio Using TextView & Parsing Example”

Brian Reinhold says:

January 17, 2022 at 1:24 pm

I have an html file in the assets folder which renders fine. Is there a way I can display the icons I have in the res folder in this file?

Reply
roziya sk says:

September 25, 2017 at 6:28 am

hii sir i want to import css and js folder in asset folder so can u gauid me how i do

Reply
Atharv says:

July 5, 2017 at 10:39 am

Plz upload any project based on html,listview and webview combined. It would be greatly appreciated.

Reply
1. coder says:
  
  December 8, 2021 at 10:54 am
  
  No bro….never
  
  Reply

Let’s Connect

Hi, I'm Abhishek, founder and owner of this site. I believe in team work and there is a experienced developer team working on AbhiAndroid with a mission to simplify learning of Android App Development.
CONNECT WITH ME:
FACEBOOK | INSTAGRAM

Learn Android UI