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:
- Menampilkan HTML dari Variable.
- menampilkan HTML dari URL di sembarang website
- 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.
bang pengen nanya bang
kalo untuk menampilkan icon suara di webview bisa atau gak ya?
mas mau tanya ,. jika mau running di hp tapi servernya localhost gmna cara manggil URLnya ya?
terimakasih
gunakan ip(pc.laptop) dan pastikan hp dengan pc/laptop dalam satu jaringan
Bang, mau tanya, kalau webview ada audionya, kok nggak main ya audionya?
gan kalo nampilin gambar yang ada di html gmn ?? ada contoh gk ??