7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Android SDK

Android SDK: Embed WebView dengan WebKit Engine

Scroll to top
Read Time: 3 mins

Indonesian (Bahasa Indonesia) translation by Amar Shaleh (you can also view the original English article)

Quick tip ini akan menunjukkan bagaimana Anda dapat embed WebView Android dalam aplikasi Anda dengan WebKit engine. Anda akan belajar bagaimana untuk memuat sebuah URL eksternal dan membuat kustom markup yang disupply in-app.

Langkah 1: Persiapan

Memulai dengan membuat sebuah proyek Android SDK baru dalam IDE yang  dipilih. Anda bisa menamai main activity, package root dan proyek apa pun yang Anda inginkan. Pilih Android 1.6 sebagai platform Anda untuk menjaga kompatibilitas yang luas.

Android WebView: Create New WebView Project With WebKitAndroid WebView: Create New WebView Project With WebKitAndroid WebView: Create New WebView Project With WebKit

Langkah 2: Menyiapkan WebView Widget

WebView widget bekerja seperti widget Android SDK lainnya: Anda deklarasi dalam tata letak file dan kemudian mengaksesnya dari Activity dan menceritakan apa yang harus dilakukan.

Buka file main.xml tata letak atau buat jika IDE Anda belum melakukannya. Selanjutnya, deklarasi WebView widget sebagai child elemen LinearLayout, pastikan untuk menentukan ID sehingga Anda bisa mengakses widget kemudian. Seperti biasa, jangan lupa untuk menyatakan lebar dan tinggi atau yang lain aplikasi Anda akan memunculkan exception. Untuk keperluan demonstrasi, kita akan memiliki komponen yang mengisi seluruh layar dengan menetapkan atribut android: layout_width dan android: layout_height ke fill_parent.

Langkah 3: Meminta Permission Internet dari Manifest Android

Karena kami akan membuka URL dalam WebView widget, kami harus memastikan untuk meminta permission untuk mengakses Internet di AndroidManifest.xml

Membukanya dan deklarasi sebuah elemen uses-permission yang mana Anda menentukan android.permission.INTERNET sebagai atribut android: name, seperti begitu (baris 6):

Jika Anda memulai aplikasi Anda di Android emulator sekarang, Anda akan melihat layar putih kosong. Mengapa? Yah, kita belum diberitahu WebView untuk membuat apa pun belum-yang adalah apa yang akan kita lakukan selanjutnya.

Langkah 4: Memuat halaman Web

Buka main activty (com.webkitdemo.WebKitDemo dalam kasus kami) dan menambahkan kode berikut ke onCreate() metode:

Ini snippet kode mengakses widget WebView melalui resource ID dan memanggil loadUrl(). Memulai app di emulator dan melihat hasilnya: ini harus menampilkan situs saat ini Anda berada!

Android Webview: Webkit Rendering

Step 5: Render kustom Markup

Selanjutnya, kita akan mengganti loadUrl() dengan loadData(), yang mengambil tiga argumen:

  1. String htmlData
  2. String mimeType
  3. String encoding

Komen engine.loadUrl() baris dan masukkan kode berikut di bawah ini:

Kompilasi dan restart aplikasi di emulator dan Anda harus melihat ini:

Android WebView: Load Custom HTML/CSS

Secara teknis, Anda bisa lulus jenis lain dari data dengan tipe-mime yang masing-masing metode ini, tetapi sebagian besar waktu Anda akan menggunakan teks/html dengan UTF-8-encoding. Jangan lupa bahwa Anda menggunakan WebKit, powerful web engine; Anda dapat menggunakan CSS3, JavaScript dll ketika Anda merancang manual Anda atau apa pun yang Anda inginkan untuk ditampilkan.

Catatan: Salah satu keanehan WebView's adalah fakta bahwa JavaScript dinonaktifkan secara default. Alasan untuk ini adalah bahwa dalam kebanyakan kasus ketika Anda sedang embedding WebView ke aplikasi Anda, Anda menggunakannya untuk bantuan manual atau sesuatu yang tidak memerlukan JavaScript. Namun demikian, sangat mudah untuk mengaktifkan itu jika Anda membutuhkannya:

Fitur tambahan

Anda mungkin telah memperhatikan bahwa widget tidak memiliki toolbar. Hal ini dimaksudkan, seperti yang Anda biasanya akan meluncurkan aplikasi browser web asli jika Anda ingin kemampuan navigasi. Namun, ada cara untuk mengontrol secara pemrograman. Mencoba menerapkan salah satu metode berikut pada contoh widget Anda:

  • reload(): menyegarkan dan kembali merender halaman.
  • goForward(): pergi satu langkah maju dalam history browser.
  • goBack(): pergi satu langkah kembali dalam history browser.

API memiliki banyak untuk yang di tawarkan, tetapi yang melampaui lingkup ini tips cepat.

Kesimpulan

Anda sekarang harus akrab dengan penggunaan dasar widget Android WebView yang sangat berguna. Anda dapat menggunakannya untuk menampilkan "tentang" halaman web untuk aplikasi Anda atau user manual-segala macam hal. Secara teknis, Anda bahkan dapat menulis aplikasi Anda menggunakan JavaScript, CSS dan HTML dan menampilkannya menggunakan widget, meskipun itu tidak akan terlalu praktis... Atau apakah itu?

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.