How To Display Html Text In TextView And WebView

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

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

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/gUisxpEm908.

  1. There are three buttons on the screen in this example.
  2. When you click the first button, it will read an Html source text and display the source code in the first TextView object.
  3. When you click the second button, it will display the Html data as an Html page in the second TextView object.
  4. When you click the third button, it will display the Html data as an Html page in the third WebView object.

2. Example Source Files.

  1. Below is the example android project source files list.
    D:\WORK\DEV2QA.COM-EXAMPLE-CODE\ANDROIDEXAMPLEPROJECT\TEXTVIEWWEBVIEW
    │  .gitignore
    │  build.gradle
    │  gradle.properties
    │  gradlew
    │  gradlew.bat
    │  settings.gradle
    │
    ├─.idea
    │      gradle.xml
    │      misc.xml
    │      modules.xml
    │      runConfigurations.xml
    │
    ├─app
    │  │  .gitignore
    │  │  build.gradle
    │  │  proguard-rules.pro
    │  │
    │  └─src
    │      ├─androidTest
    │      │  └─java
    │      │      └─com
    │      │          └─dev2qa
    │      │              └─textviewwebview
    │      │                      ExampleInstrumentedTest.java
    │      │
    │      ├─main
    │      │  │  AndroidManifest.xml
    │      │  │
    │      │  ├─java
    │      │  │  └─com
    │      │  │      └─dev2qa
    │      │  │          └─textviewwebview
    │      │  │                  MainActivity.java
    │      │  │
    │      │  └─res
    │      │      ├─drawable
    │      │      │      ic_launcher_background.xml
    │      │      │
    │      │      ├─drawable-v24
    │      │      │      ic_launcher_foreground.xml
    │      │      │
    │      │      ├─layout
    │      │      │      activity_main.xml
    │      │      │
    │      │      ├─mipmap-anydpi-v26
    │      │      │      ic_launcher.xml
    │      │      │      ic_launcher_round.xml
    │      │      │
    │      │      ├─mipmap-hdpi
    │      │      │      ic_launcher.png
    │      │      │      ic_launcher_round.png
    │      │      │
    │      │      ├─mipmap-mdpi
    │      │      │      ic_launcher.png
    │      │      │      ic_launcher_round.png
    │      │      │
    │      │      ├─mipmap-xhdpi
    │      │      │      ic_launcher.png
    │      │      │      ic_launcher_round.png
    │      │      │
    │      │      ├─mipmap-xxhdpi
    │      │      │      ic_launcher.png
    │      │      │      ic_launcher_round.png
    │      │      │
    │      │      ├─mipmap-xxxhdpi
    │      │      │      ic_launcher.png
    │      │      │      ic_launcher_round.png
    │      │      │
    │      │      └─values
    │      │              colors.xml
    │      │              strings.xml
    │      │              styles.xml
    │      │
    │      └─test
    │          └─java
    │              └─com
    │                  └─dev2qa
    │                      └─textviewwebview
    │                              ExampleUnitTest.java
    │
    └─gradle
        └─wrapper
                gradle-wrapper.jar
                gradle-wrapper.properties
  2. This example contains three important source files.
  3. MainActivity.java
  4. activity_main.xml
  5. strings.xml

2.1 Main Activity Java File.

  1. 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.

  1. app / res / layout / activity_main.xml
  2. 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.

  1. app / res / values / strings.xml
  2. 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>
5 1 vote
Article Rating
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x