Tutorial WebView Android

Kadang, saat kita membuat aplikasi android, Ada halaman yang membutuhkan komponen Web, misalkan halaman Help atau halaman Profil atau halaman Berita seperti detik.com. Bagaimana caranya menampilkan halaman HTML didalam aplikasi Android? Ternyata caranya lebih mudah dari yang saya kira, cukup gunakan komponen WebView.

Komponen Webview bisa dipakai dengan 3 cara sbb:

1. Menampilkan HTML dari Variable.
2. menampilkan HTML dari URL di sembarang website
3. Menampilkan File HTML dari Folder Assets

Menampilkan HTML dari Varible String

Cara ini dipakai jika kita ingin menampilkan teks pendek di Android namun dengan format HTML

wv = (WebView) findViewById(R.id.webView1);
		WebSettings webSettings = wv.getSettings();
		webSettings.setJavaScriptEnabled(true);
		String data = "<h2>Belajar webview </h2> "
				+ "<p> Webview adalah komponen penting di android </p>";

		wv.loadData(data, "text/html", "UTF8");

Fungsi untuk menampilkan data HTML adalah Webview.LoadData().

Menampilkan HTML dari URL

Cara ini dipakai untuk menampilkan halaman sebuah website didalam Activity Android. Sering dipakai untuk menampilkan Lisensi, About, Contact atau halaman informasi lain.

	wv = (WebView) findViewById(R.id.webView1);
		WebSettings webSettings = wv.getSettings();
		webSettings.setJavaScriptEnabled(true);
		wv.loadUrl("http://m.detik.com");
		//	wv.loadUrl("http://10.0.2.2/demowebview.html");

Contoh kode diatas adalah webview yang menampilkan halaman website m.detik.com. Jika anda ingin menampilkan halaman website dari server lokal seperti XAMPP, maka gunakan baris yang saya beri tanda komentar wv.loadUrl("http://10.0.2.2/demowebview.html"). Cara ini sering dipakai untuk melakukan testng aplikasi Hybrid, Aplikasi hybrid adalah aplikasi yang mencampur WebApp dengan Aplikasi Native.

Menampilkan file HTML dari asset Folder

Cara ini sering dipakai untuk membuat aplikasi yang sifatnya Informasi saja. Contohnya misalkan anda ingin membuat aplikasi android untuk menampilkan informasi propinsi diseluruh indonesia. Dari pada ribet pake SQLite, mending buat aja file HTML untuk masing masing propinsi, letakan di folder assets dan panggil dengan Webview. Cara ini tidak perlu koneksi internet.

setContentView(R.layout.activity_webview);
WebView wv;
content = "file:///android_asset/index.html";
		
wv = (WebView) findViewById(R.id.webView1);
WebSettings webSettings = wv.getSettings();
webSettings.setJavaScriptEnabled(true);
wv.loadUrl(content);

Contoh kode diatas dipakai untuk menampilkan file index.html yang berada di folder Assets.

Download

Jika anda ingin melihat dan mencoba sendiri, silahkan download codenya disini.

Jika kita perhatikan, tampilan Webview terasa datar dan kurang menarik, Agar lebih menarik gunakan CSS seperti anda membuat website biasa. Cara lain, gunakan Jquery Mobile sehingga tampilannya terlihat modern dan tampak seperti aplikasi Native, Tutorial selanjutnya akan membahas Cara mengintegrasikan JQuery Mobile dengan WebView.