Banyak ditemui kasus pengembangan aplikasi Android yang beberapa bagian harus menggunakan HTML sebagai sumber konten, bahkan ada yang seluruh kontennya adalah html, ini mungkin bisa menggunakan WebView, tapi bagaimana jika itu hanya sebagian saja? Oke, marik kita bahas.
1. Tags HTML yang didukung Android Studio
Dokumentasi API Android telah menetapkan tag HTML apa saja yang mereka support, jadi inilah yang sampai sekarang masih didukung.
- b & strong tag untuk bold
- i, em, cite & dfn tag untuk Italics
- u tag untuk Underline
- sub tag untuk Subtext
- sup tag untuk Supertext
- big tag untuk Big
- small tag untuk Small
- tt tag untuk Monospace
- h1 to h6 tag untuk Headlines
- img tag untuk image
- font tag untuk Font face and color
- blockquote tag untuk longer quotes
- a tag untuk Link
- div and p tag untuk Paragraph
- br tag untuk Linefeed
2. Cara menampilkan konten HTML di TextView
Sebelumnya menampilkan konten HTML bisa menggunakan method Html.fromHtml(), tapi tak jarang ditemui isu deprecated, hal ini terjadi pada pengembangan di target SDK diatas 14, katakanlah Anda membuat target minimal di Android versi N (nougat), maka Anda perlu menggunakan method ini HtmlCompat.fromHtml().
Terdapat 4 varian dalam menggunakan method fromHtml(), dan itu terletak di parameter yang digunakan.
- fromHtml(String source), method ini digunakan untuk menampilkan style text sebagaimana yang telah css buat. Catatan, method ini telah usang untuk target api 24 keatas, sebagai gantinya silakan gunakan fromHtml(String, int).
- fromHtml(String source, int flags), method ini sebagai pengganti method sebelumnya, sebagaimana telah saya sebutkan sebelumnya, jadi kita perlu parameter satu lagi bertipe integer, namun kita tidak boleh asal menginputkan karena untuk dapat bekerja sebagaimana mestinya kita tinggal memilih saja flags yang telah disediakan API android, contoh kita pilih flags FROM_HTML_MODE_LEGACY.
- fromHtml(String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler) method ini digunakan untuk menampilkan style text, image tag, sehigga kita perlu secara spesifik menggunakan paramter ImageGetter untuk request ke internet, tapi jika Anda tidak menghendakinya, maka buat saja null parameter ini. Sementara itu TagHandler untuk menghandle tag-tag yang tidak diketahui, sekali lagi jika Anda tidak menghendakinya, silakan buat null saja.
- fromHtml(String source, int flags, Html.ImageGetter imageGetter, Html.TagHandler tagHandler), method ini digunakan untuk menggantikan method sebelumnya, yang mana bakal usang untuk target API diatasnya, method ini perlu mencantumkan flags FROM_HTML_MODE_LEGACY.
Beberapa constant flags yang bisa digunakan untuk parsing konten HTML.
- FROM_HTML_MODE_COMPACT, flag ini digunakan untuk memisahkan antara blok level elemen dengan single line break / new line / tag br.
- FROM_HTML_MODE_LEGACY, flag ini digunakan untuk memisahkan antara blok level elemen dengan blank line (maksudnya double break line).
- FROM_HTML_OPTION_USE_CSS_COLORS, flag ini digunakan untuk memprioritaskan definisi warna di css konten HTML ketimbang definisi warna di textView.
- FROM_HTML_SEPARATOR_LINE_BREAK_BLOCKQUOTE, flag ini digunakan untuk mengindikasikan bahwa text di antara tag < blockquote > akan dipisahkan dari text lainnya dengan jarak masing-masing single break line baik sebelumnya atau setelahnya.
- FROM_HTML_SEPARATOR_LINE_BREAK_DIV, flag ini mengindikasikan bahwa text diantara tag < div > akan dipisahkan dari text lainnya dengan jarak masing-masing single break line baik sebelumnya atau setelahnya.
- FROM_HTML_SEPARATOR_LINE_BREAK_HEADING, flag ini mengindikasikan bahwa text diantara tag < h1 >,< h2 >,< h3 >,< h4 >,< h5 > and < h6 > akan dipisahkan dari text lainnya dengan jarak masing-masing single break line baik sebelumnya atau setelahnya.
- FROM_HTML_SEPARATOR_LINE_BREAK_LIST, flag ini mengindikasikan bahwa text diantara tag < ul > akan dipisahkan dari text lainnya dengan jarak masing-masing single break line baik sebelumnya atau setelahnya.
- FROM_HTML_SEPARATOR_LINE_BREAK_LIST_ITEM, flag ini mengindikasikan bahwa text diantara tag < li > akan dipisahkan dari text lainnya dengan jarak masing-masing single break line baik sebelumnya atau setelahnya.
- FROM_HTML_SEPARATOR_LINE_BREAK_PARAGRAPH, flag ini mengindikasikan bahwa text diantara tag < p > akan dipisahkan dari text lainnya dengan jarak masing-masing single break line baik sebelumnya atau setelahnya.
Berikut kami berikan contoh bagaimana bekerja dengan TextView untuk menampilkan konten HTML. Pertama kita buat dulu project baru, khusus untuk latihan silakan berinama HtmlExample. Jangan lupa pilih Empty Activity untuk inisialisasi saat project di generate.
Selanjutnya, rombak layout activity_main.xml sebagaimana berikut.
<?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>
Selanjutnya, perhatikan kode di bawah ini, saya menginisialisasi variable content bertipe string untuk menampung koten HTML, ini yang saya maksud dengan sebagian koten menggunakan html. Oke, sekarang silakan rombak MainActivity.java sehingga sedemikian rupa.
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));
}
}
Sekarang, jalankan project untuk melihat hasil yang ditunjukkan oleh TextView.
3. Cara menampilkan konten HTML di WebView
Baik, sebelum kita melangkah lebih jauh, alangkah baiknya jika saya berikan gambaran sederhana terlebih dahulu tentang studi kasus yang bakal kita hadapi, tujuannya adalah agar teman-teman tidak bingung harus menggunakan cara yang mana saat dihadapkan dengan kasus yang serupa saat bekerja nanti.
Oke, katakanlah kita punya halaman A, B, dan C. Konten halaman A berasal dari halaman web tertentu, katakanlah dari "https://bundet.com/pub/detail/cara-parsing-html-menggunakan-textview-dan-webview-di-android-studio-1579187824". Sedangkan konten halaman B bersifat lokal, katakanlah dari projcet Anda di folder assets/yourfile.html. Terakhir halaman C hanya perlu sebagian konten html.
Oke, untuk menghadapi kasus halaman A dan B kita bisa menggunakan method loadUrl(), sedangkan untuk halaman C kita bisa menggunakan loadDataWithBaseURL(). Sampai di sini paham kan? jadi, saya cukup berikan 2 contoh pengerjaan saja, karena penanganan halaman A & B prinsipnya sama.
a. Menangani halaman A & B menggunakan loadUrl()
Masih di project yang sama, silakan siapkan beberapa tombol untuk beralih ke halaman berbeda dengan kasus yang berbeda atau jika Anda masih bingung, silakan buat project baru lagi saja dan bernama "Latihan WebView loadUrl", seperti biasa pilih Empty Activity untuk inisialisasi saat project digenerate.
Selanjutnya, rombak layout activity_main.xml sehingga sedemikan rupa.
<?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>
Selanjutnya, create folder assets di dalam folder project kamu, dan create file ber-extensi *html katakanlah "myfile.html", lalu sesuaikan isinya seperti di bawah ini.
<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>
Selanjutnya, rombak MainActivity.java sehingga sedemikian rupa.
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);
}
}
Jalankan project untuk melihat hasilnya.
b. Menangani halaman C menggunakan loadDataWithBaseURL()
Silakan kalo mau buat project lagi, atau bagi yang sudah paham mau buat activitas baru juga silakan. Prinsipnya adalah kita menyiapkan activity khusus untuk setiap kasus yang berbeda.
Oke, seperti biasa rombak layout activity_main.xml sehingga sedemikan rupa.
<?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>
Tak ketinggalan rombak juga MainActivity.java sehingga sedemikian rupa.
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);
}
}
Jalankan project dan lihat hasilnya.
Demikian ulasan kami seputar parse html di android studio, semoga bermanfaat!
