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.
- There are three buttons on the screen in this example.
- When you click the first button, it will read an Html source text and display the source code in the first TextView object.
- When you click the second button, it will display the Html data as an Html page in the second TextView object.
- 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.
- 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 - This example contains three important source files.
- MainActivity.java
- activity_main.xml
- 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>
