How to display HTML code in Android - Android Studio Tutorial for Beginners

Overview

In this tutorial, we show you how to display HTML code in Android Studio. Display HTML content in Android using WebView and display the HTML content in the Textview.
Follow the steps mentioned below to develop this application.

Creating the project

Open the Android Studio, then click “Start a new Android Studio project”.

Enter the content to the following:

• Application Name: DisplayHTMLCode
• Company domain: jackrutorial.com
• Project location: C:/android
• then click "Next".

Select the form factors and minimum SDK. In this tutorial, We selected the minimum SDK "API 15: Android 4.0.3(IceCreamSandwich)", click "Next".

 Select the Empty activity and click "Next".

Leave the activity name “MainActivity”, Click Finish.

Create LinearLayout, Button, TextView and WebView Widget

Open the activity_main.xml layout file, we will create our LinearLayout with Button, TextView and WebView Widget. The layout code snippet is shown below.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >

        <Button
            android:id="@+id/btnTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Using TextView"
            />

        <Button
            android:id="@+id/btnWebView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Using WebView"
            />

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

        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txtDescription"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            />

    </LinearLayout>

</android.support.constraint.ConstraintLayout>

Main Activity

1. Display HTML code using TextView

The method Html.fromHtml(String source) is deprecated as of API level 24. To check Android versions, If the Android Nougat and higher (>= API level 24) then we using code snippet is shown below

txtTextView.setText(Html.fromHtml(descriptionUsingTextView, Html.FROM_HTML_MODE_LEGACY));

Else older versions of Android (< API level 24) then we using code snippet is shown below

txtTextView.setText(Html.fromHtml(descriptionUsingTextView));

In the snippet code above, we using the method Html.fromHtml(String source, int flags). This method is used to display styled text from the provided HTML string. Example: Html.fromHtml(descriptionUsingTextView, Html.FROM_HTML_MODE_LEGACY).Below there is a list of common flags that should be used in fromHtml() method.

• FROM_HTML_MODE_COMPACT: This flag is used to separate the block level elements with line break means single new line character in between.
• FROM_HTML_MODE_LEGACY: This flag is used to separate the block level elements with blank lines means two new line characters in between.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.

2. Display HTML code using WebView

We using the method WebView.loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl) to display HTML code.

webView.loadDataWithBaseURL(null, descriptionUsingWebView, "text/html", "utf-8", null);

Complete MainActivity.java Code

package com.jackrutorial.displayhtmlcode;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    Button btnTextView;
    Button btnWebView;
    WebView webView;
    TextView txtTextView;

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

        btnTextView = (Button) findViewById(R.id.btnTextView);
        btnWebView = (Button) findViewById(R.id.btnWebView);
        txtTextView = (TextView) findViewById(R.id.txtTextView);
        webView = (WebView) findViewById(R.id.webView);

        final String descriptionUsingTextView = "<h2>Display HTML code in Android using TextView</h2><p>In this tutorial, we show you how to display HTML code in Android using TextView</p>";
        final String descriptionUsingWebView = "<h2>Display HTML code in Android using WebView</h2><p>In this tutorial, we show you how to display HTML code in Android using WebView</p>";


        btnTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
                    txtTextView.setText(Html.fromHtml(descriptionUsingTextView, Html.FROM_HTML_MODE_LEGACY));
                } else {
                    txtTextView.setText(Html.fromHtml(descriptionUsingTextView));
                }

                //hiden html from webview
                webView.loadDataWithBaseURL(null, null, "text/html", "utf-8", null);
            }
        });

        btnWebView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.loadDataWithBaseURL(null, descriptionUsingWebView, "text/html", "utf-8", null);

                //hiden html from textview
                txtTextView.setText(null);
            }
        });


    }
}

Run this app in the Android Emulator

• You can run this app from an Android Studio project. Or you can run this app that's been installed on the emulator as you would run any app on a device. To start the emulator and run this app in your project.
• Open Android Studio project and click Run.In the Select Deployment Target dialog, select an existing emulator definition, and then click OK.

Note:

• If you don’t see a definition you want to use, click Create New Virtual Device to launch the AVD Manager. After you define a new AVD, in the Select Deployment Target dialog, then click OK.
• If you want to use this emulator definition as the default for your project, select Use same selection for future launches.

We will see HTML content is displayed using Textview when clicked the 'Using TextView' Button.

We will see HTML content is displayed using Webview when clicked the 'Using WebView' Button.

• Tweet
• Share
• Share
• Share
• Share