Cara Menampilkan File HTML Pada Aplikasi Android Secara Local Dengan Android Studio



Ngulik Kode - Pada pembuatan aplikasi android selain hanya mendukung file XML dan Java ternyata juga mendukung file berbentuk HTML yang nantinya akan ditampilkan pada aplikasi menggunakan WebView. Apa itu WebVew ? jika anda sudah mambaca artikel milik kami sebelumnya anda bisa lihat pada postingan sebelumnya, jika belum anda klik link dibawah ini :

► Projec Membuat WebView Menggunakan Android Studio

1. Buat Project Android Studio

Langsung saja kita memulai untuk membuat aplikasi android pertama anda buat dahulu project baru pada android studio.

2. Membuat Directory Assets

Tidak seperti pada ADT Eclipse yang sudah memiliki directory assets pada saat pertama kali membuat project, Android Studio tidak ada Directory Assets jika kita tidak membuatnya. Oleh karena itu kita membuat terlebih dahulu yang nantinya akan di gunakan untuk menyimpan file HTML, CSS, dan file web lainnya.


Seperti gambar diatas untuk membuat folder assets anda tinggal melakukan klik kanan pada app > New > Folder > Assets Folder


3. Membuat File HTML

Sekarang kita membuat sebuah file HTML yang nantinya akan ditampilkan pada aplikasi android, anda juga bisa menambahakan file CSS untuk tampilan agar lebih menarik nantinya. disini saya akan memberikan contoh file HTML yang saya buat.

lihat.html

Pada tulisan Merah diatas anda juga dapat memasukan gambar untuk ditampilkan pada aplikasi android.

Jika semua file yang ingin ditampilkan sudah siap semua, sekarang anda tinggal pindahkan semua file ke folder assets project android anda, dengan cara buka lokasi project android anda simpan contoh saya menyimpan pada C:\Users\Sholihin\AndroidStudioProjects disini lah saya menyimpan project saya, lalu buka folder project anda. Contoh folder project punya saya WebViewHTML Lalu buka app > src > main > assets disini lah tempat untuk meletakan file web anda yang ingin ditampilkan pada aplikasi android.

3. Membuat WebView Aplikasi Android

Sekarang kita membuat WebView yang fungsinya nanti akan menampilkan file HTML yang sudah kita buat tadi. Sekarang anda buka activity_main.xml pada directory layout pada Android Studio lalu tambahkan kode seperti dibawah ini.

activity_main.xml



Sekarang menuju file MainActivity.java lalu tambahkan kode seperti gambar dibawah ini.

MainActivity.java



Pada tulisan merah diatas harus sesuai dengan file yang ingin anda tampilkan pada aplikasi android. Sampai disini proses pembuatan Aplikasi WebView selesai sekarang tinggal menjalankan project androidnya.


Nah berikut ini adalah tampilanya, akan tampak seperti gambar diatas sampai disini proses pembuatan sudah selesai, anda dapat mengembangkannya sendiri agar lebih menarik lagi.

Sekian Tutorial yang singkat ini, yang dapat saya berikan untuk anda semoga dapat bermanfaat dan menjadi bahan referensi anda untuk membangun aplikasi android.


Previous
Next Post »

4 komentar

Write komentar
Play Om
AUTHOR
May 30, 2016 at 1:25 PM delete

Good day!
Why not see the .js files?
"Uncaught ReferenceError: $ is not defined"
http://paste.ofcode.org/363UGxVHdNaJh296c8zSWah

Reply
avatar
AITI Indo
AUTHOR
September 12, 2016 at 9:22 PM delete

taruh codenya dimana ya???yg java

Reply
avatar
Ngulik Kode
AUTHOR
September 21, 2016 at 3:02 AM delete

untuk kode java diletakkan pada directory app/java/namapackage/MainActivity.java di android studio.

Reply
avatar
Ngulik Kode
AUTHOR
September 21, 2016 at 3:09 AM delete

sorry, i am here only cite only the form html file.. and I've never tried to file other than html

Reply
avatar

Formulir Kontak

Name

Email *

Message *