Hai teman - teman semua! Bertemu lagi di pembahasan Android Studio, setelah sebelumnya saya membahas API Player, nah pada kesempatan kali ini kita akan mempelajari tentang WebView pada Android Studio dan disinii saya akan menjelaskan dan mengimplementasikannya.
Jika ingin menyediakan aplikasi web atau halaman web sebagai bagian dari aplikasi client. Kita dapat melakukannya menggunakan WebView. Class WebView adalah ekstensi class view android yang memungkinkan kita menampilkan halaman web sebagai bagian dari tata letak aktivitas kita. Class ini tidak menyertakan fitur apapun dari browser web yang dikembangkan sepenuhnya, seperti kontorl navigasi atau kolom URL. Semua yang dilakukan WebView secara default adalah menampilkan halaman web.
Teori Singkat
Skenario umum ketika menggunakan WebView menjadi sangat membantu adalah saat anda ingin memberikan informasi di aplikasi yang mungkin perlu diperbarui, seperti perjanjian pengguna akhir atau panduan pengguna. Dalam aplikasi android, anda dapat membuat Activity yang berisi WebView, lalu menggunakan untuk menampilkan dokumen anda yang dihosting secara online.
Skenario lain ketika WebView menjadi sangat membantu adalah saat aplikasi anda memberikan data kepada pengguna yang selalu memerlukan koneksi internet untuk mengambil data, seperti email. Dalam kasus ini, anda mungkin menyadari bahwa lebih mudah untuk membuah WebView di aplikasi Android anda yang menampilkan halaman web dengan semua data pengguna, daripada membuat permintaan jaringan, lalu mengurai data, dan merendernya dalam tata letak Android. Sebagai gantinya, anda dapat merancang halaman web yang disesuaikan untuk perangkat android, lalu menerapkan WebView di aplikasi android anda yang membuat halaman web.
Menambahkan WebView ke Aplikasi Anda
Pembahasan ini menunjukkan cara memulai WebView dan cara melakukan beberapa hal tambahan, seperti menangani navigasi halaman dan mengikat JavaScript dari halaman web anda ke kode sisi klien di aplikasi android anda. Untuk menambahkan WebView di aplikasi anda dapat menyertakan elemen di tata letak aktivitas, atau menetapkan seluruh jendela aktivitas sebagai WebView di onCreate().
Menambahkan WebView di Layout aktivitas
Untuk menambahkan WebView ke aplikasi di tata letak, tambahkan source code berikut ke file activity_main.xml (tata letak aktivitas anda) :
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Untuk memuat halaman web di WebView gunakan loadUrl() pada MainActivity.java. Contoh :
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://nofieanggraeni.blogspot.com/");
Menambahkan WebView di onCreate()
Untuk menambahkan WebView ke aplikasi anda di metode onCreate() aktivitas, gunakan logika yang mirip dengan source code berikut ini :
WebView myWebView = new WebView(activityContext);
setContentView(myWebView);
Kemudian untuk memuat halaman dengan source code berikut :
webView.loadUrl("https://nofieanggraeni.blogspot.com/");Namun sebelum berfungsi aplikasi anda harus memiliki akses ke internet. Untuk mendapatkan akses internet, minta izin INTERNET di file Manifest (AndroidManifest.xml) anda. Contoh :
<manifest ... >
<uses-permission android:name="android.permission.INTERNET" />
...
</manifest>
Itulah semua yang kita butuhkan untuk dasar WebView yang menampilkan halaman web. Selain itu, kita dapat menyesuaikan WebView dengan mengubah hal - hal berikut :
Tutorial membuat WebView
Sekarang kita akan mencoba mengimplementasikan class WebView, langkahnya seperti berikut ini :
1. Sebelum masuk ke Andorid Studio kita siapkan sebuah file gambar dengan jenis format .png seperti gambar dibawah ini :
2. Kemudian, kalian buka terlebih dahulu aplikasi Android Studio yang ada di PC kalian.
- Pilih Start → Android Studio
- Pilih Create New Projects
- Pilih Empty Activity lalu klik Next
Akan muncul Configure Your Project
**
- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana → WebView.
- Pilih lokasi penyimpanan (Save Location) → Disesuaikan dengan keinginan kalian dimana project ini akan di simpan.
- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, jika tidak ada website bisa menggunakan default, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project webview.
- Untuk minimum API level kita pilih → API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).
- Untuk bahasa yang digunakan pilih Java.
- Jika Sudah selesai klik Finish.
3. Setelah melakukan Configurasi Project maka akan tampil halaman utama IDE Android Studio, setelah itu ubah layout menjadi RelativeLayout, kemudian Copy kembali file pinoot640.png tadi ke dalam folder ..res/drawable dengan cara klik kanan pada folder drawable lalu pilih paste (ctrl+v).
4. Kemudian kita buka file activity_main.xml pada folder res/layout/activity_main.xml, dan kita masukkan source code berikut :
5. Setelah itu kita buka file MainActivity.java ubah dan tambahkan source code berikut :
6. Tambahkan uses-permission INTERNET dalam script AndroidManifest.xml seperti di bawah ini :
7. Agar terlihat lebih menarik User interface - nya kita hilangkan actionbar webview dengan merubah script themes.xml yang ada dalam folder ..res/values/themes.xml seperti di bawah ini :
Notes : Biasanya untuk merubah resource ini filenya beda versi atau perangkat ini berbeda, ada yang nama file style.xml dan juga themes.xml. Jadi kalian cek terlebih dahulu, jika tidak ada themes.xml maka akan ada file style.xml.
8. Kemudian Jalankan emulator tambahan (Vysor) di kedua perangkat yaitu PC dan Handphone kalian masing - masing, sambungkan dengan menggunakan kabel USB lalu aktifkan mode debbuging USB. Kenapa menggunakan Vysor? Supaya tidak terlalu berat dan membebankan PC kalian, tetapi jika PC kalian memenuhi spesifikasi Android Studio atau bahkan lebih bisa langsung dari Android Studio di PCnya tanpa harus menggunakan Emulator tambahan.
Hasilnya akan tampil seperti video berikut ini :
Demikianlah penjelasan dan implementasi Tutorial Membuat WebView pada Android Studio. Semoga apa yang disampaikan bisa bermanfaat bagi teman-teman semua, mohon maaf jika ada kesalahan dan kekurangan lainnya. Sampai jumpa di Pembahasan selanjutnya. Jika ada yang di tanyakan silahkan tinggalkan komentar di kolom dibawah ini.
0 comments:
Posting Komentar