Cara Membuat WebView dengan Custom Html (Data Assets) di Android

0

Sebelum kita bahas tutorial membuat webview dengan memuat kostum html di data aset, alangkah baiknya kamu membaca terlebih dahulu cara membuat webview sederhana di android agar lebih mudah memahaminya.

Cara mudah membuat webview dengan menggunakan data aset dan menayangkan html khusus

kali ini kita akan mencoba membuat sebuah WebView dengan memuat atau kostum html via data aset di dalam proyek itu sendiri. maksudnya adalah kita tidak memasukkan server luar untuk memuat halaman-nya. Hal ini biasanya di buat oleh para pengembang untuk kostum error page (halaman error).

Mari kita coba membuat webview dengan customhtml

Di sini kita akan mencoba membuat webview dengan 1 halaman yang akan memuat data index.html yang akan kita masukkan kedalam folder assets di dalam proyek itu sendiri. Penasaran kan, mari kita mulai tutorial di bawah ini.

Membuat proyek baru di Androd studio atau Aide jika menggunakan android

Buka android studio kamu dan buatlah sebuah proyek baru untuk memulainya.

Cara Membuat webview kostum html 1

Jangan lupa beri nama “Webview Kostum” dan package domain “com.engkungs.webviewkostum” untuk menyesuaikan pada tutorial kali ini.

Cara Membuat webview kostum html 2

Selanjutnya pilih target SDK. Bisa di sesuaikan sesuai versi.

Cara Membuat webview kostum html 3

 

Kemudian kamu pilih Empty Activity lalu klik next.

Cara Membuat webview kostum html 4

 

Terakhir yaitu klik Finish.

 

Cara Membuat webview kostum html 5

Buat file html

Mempersiapkan file html. buatlah file dengan nama index.html di dalam folder assets. jika belum ada buatlah folder baru di antara folder res dan java. dengan nama “assets“. Di bawah ini adalah contoh kode html yang akan kita muat di dalam webview.

kode

Mengatur Layout

Buka res/layout/activity_main.xml. lalu masukkan kode webview di bawah ini.

Mengatur Java

Untuk mengoperasikan-nya silahkan kamu buka “com/engkungs/webviewkostum/MainActivity.java”. lalu masukkan kode berikut ini.

Keterangan di dalam kode WebView kostum :

jika kita memuat dengan url, maka kita awali dengan kode webView.loadUrl(“https://google.com”);, nah jika kita memuat data assets yaitu dengan awalan webView.loadUrl(“file:///android_asset/index.html”); .

perlu di ingat! bahwa tulisan yang di java dengan nama folder berbeda. dari folder dengan nama assets (dengan akhiran s) dan di java menggunakan android_asset (tanpa akhiran s).

Menambahkan Permisson (perizinan akses internet -> wajib )

buka AndroidManifest.xml dan tambahkan kode di bawah ini tepat di atas kode <application …

atau seperti berikut ini.

Jalankan Aplikasi (run)

Langkah terakhir adalah menjalankan aplikasi dari sebuah proyek yang telah kita buat yaitu WebView KostumHtml dengan cara klik ikon run dan lihat hasilnya.

Cara Membuat webview kostum html android studio
webview custom html example
Download Source Code Webview Kostum Html

Download Source Code

Sekian dari tutorial cara membuat webview dengan kostum html dengan cara memuat data assets di android studio dan semoga dapat bermanfaat.

80%
Awesome
  • Design

Leave A Reply

Your email address will not be published.

37 − 28 =