How To Display Html Text In TextView And WebView

This example will tell you how to display html text in android android.widget.TextView and android.webkit.WebView object.

1. Display Html Data In Android TextView And WebView Example.

There are three buttons in the screen. When click the first button, it will read a html source text and display the source code in the first textview. When click the second button, it will display the html data as html page in the second textview. When click the third button, it will display the html data as html page in the third webview object.

2. Example Source Files.

show html in textview and webview example source files

This example contains three important source files.

  1. MainActivity.java
  2. activity_main.xml
  3. strings.xml.

2.1 Main Activity Java File.

MainActivity.java

package com.dev2qa.textviewwebview;

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

public class MainActivity extends AppCompatActivity {

    private Button showHtmlSourceTextInTextViewButton = null;

    private Button showHtmlInTextViewButton = null;

    private Button showHtmlInWebViewButton = null;

    private TextView textViewText = null;

    private TextView textViewHtml = null;

    private WebView webView = null;

    private String htmlData = null;

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

        setTitle("dev2qa.com - Show Html String In TextView VS WebView");

        initUiControls();

        showHtmlSourceTextInTextViewButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Set html source code text directly in textview.
                textViewText.setText(htmlData);
            }
        });

        showHtmlInTextViewButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Translate html source code to Spanned object.
                Spanned spannedHtml = Html.fromHtml(htmlData);
                // Set the Spanned object in textview.
                textViewHtml.setText(spannedHtml);
            }
        });


        showHtmlInWebViewButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String mimeType = "text/html";
                String encoding = "utf-8";
                // Load html source code into webview to show the html content.
                webView.loadDataWithBaseURL(null, htmlData, mimeType, encoding, null);
            }
        });


    }

    private void initUiControls()
    {
        if(showHtmlSourceTextInTextViewButton == null)
        {
            showHtmlSourceTextInTextViewButton = (Button)findViewById(R.id.button_show_html_source_text_in_textview);
        }

        if(showHtmlInTextViewButton == null)
        {
            showHtmlInTextViewButton = (Button)findViewById(R.id.button_show_html_in_textview);
        }

        if(showHtmlInWebViewButton == null)
        {
            showHtmlInWebViewButton = (Button)findViewById(R.id.button_show_html_in_webview);
        }

        if(textViewText == null)
        {
            textViewText = (TextView) findViewById(R.id.text_view_text);
        }

        if(textViewHtml == null)
        {
            textViewHtml = (TextView) findViewById(R.id.text_view_html);
        }

        if(webView == null)
        {
            webView = (WebView) findViewById(R.id.web_view);
        }

        if(htmlData == null)
        {
            htmlData = getString(R.string.html_data);
        }
    }
}

2.2 Main Activity Layout Xml File.

app / res / layout / activity_main.xml

The ScrollView is used to make the content scrollable.

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <Button
            android:id="@+id/button_show_html_source_text_in_textview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Show Html Source Text In TextView"
            android:textAllCaps="false"
            android:textSize="20dp"/>

        <Button
            android:id="@+id/button_show_html_in_textview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Show Html In TextView"
            android:textAllCaps="false"
            android:textSize="20dp"/>

        <Button
            android:id="@+id/button_show_html_in_webview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Show Html In WebView"
            android:textAllCaps="false"
            android:textSize="20dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Show Html Source Text In TextView:"/>

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Show Html In TextView:"
            android:layout_marginTop="20dp"/>

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Show Html In WebView:"
            android:layout_marginTop="20dp"/>

        <WebView
            android:id="@+id/web_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

</ScrollView>

2.3 Html Data String Definition File.

app / res / values / strings.xml 

The html data is declared in this file. Please note the html data value is wrapped with <![CDATA[ …]]>

<resources>
    <string name="app_name">TextViewWebView</string>

    <string name="html_data">
        <![CDATA[
        <h1>This is html h1.</h1>
        <h2>This is html h2</h2>
        <p>This is html p tag</p>
        <a href="#" onclick="javascrpit:alert('You click this link.')">This is a link</a>
        ]]>
    </string>
</resources>
(Visited 657 times, 6 visits today)
READ :   How To Create A Download Manager In Android

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.