Panduan Membuat Aplikasi Mobile

dengan Android Studio

Dari permainan hingga aktivitas sosial, orang menggunakan ponsel dan aplikasi yang ada di
dalamnya untuk segala macam aktivitas. Salah satu alat paling ampuh yang tersedia bagi
pengembang aplikasi semacam itu adalah kemampuan untuk memuat dan mengambil
halaman dan informasi secara dinamis dari web.

Panduan ini akan membahas cara menyiapkan Android Studio serta cara
membuat Browser Web Sederhana dari awal yang dapat memuat halaman web,
menyegarkan, dan menggunakan menu bookmark sederhana.

Panduan ini akan mempelajari dasar-dasar membuat aplikasi Android dan merupakan titik
awal yang bagus sebelum mulai membuat aplikasi Android sebelum kamu lebih jauh dalam
menggunakan Template Aplikasi lanjutan yang tersedia di MC Project.

Ditulis oleh
Adi Gunawan
Menginstal Android Studio

Hal pertama yang pertama, menginstal Android Studio adalah urusan sederhana.
Menggunakan link berikut: https://developer.android.com/studio pilih “Download Android
Studio”.

Kemudian pilih lokasi yang akan diinstal untuk memastikannya memiliki jumlah ruang yang
baik, karena setiap aplikasi yang dibuat di dalamnya serta emulator perangkat Android
yang akan dijelaskan di bagian akhir panduan ini akan disimpan disana.
Setelah Android Studio diinstal dan dibuka, kamu akan melihat pesan selamat datang yang
meminta kamu membuat proyek baru. Lanjutkan dan terima tawaran itu lalu pilih untuk
membuat aktivitas kosong lalu isi dengan judul dan lokasi.

Pastikan untuk memilih Java saat diminta untuk memilih Bahasa dan kami akan
menggunakan API 15: Android 4.0.3 (IceCreamSandwich) untuk level API minimum kami
seperti yang ditunjukkan pada gambar. Kemudian pilih Selesai.

Mengembangkan Aplikasi WebView

Sekarang setelah Android Studio aktif dan berjalan, kamu akan berada di laman landas yang
penuh dengan menu dan ikon kecil serta fitur menakutkan lainnya. Jangan khawatir, kita
akan melewati ini.
Ingatlah bahwa meskipun halaman arahan terbuka, Android Studio mungkin masih
membangun beberapa file yang diperlukan yang dapat mengubah tata letak tampilan
sidebar, jadi untuk menghindari item melompat-lompat saat kamu mencoba bekerja
dengannya, tunggu beberapa menit sebelum melanjutkan ke langkah berikutnya.

Langkah 1 – Layout

Hal pertama yang perlu dilakukan adalah membuat tata letak aplikasi menjadi benar, jadi
arahkan ke 'activity_main.xml'. Itu harus berada di sepanjang bilah atas secara default,
namun jika tidak dapat ditemukan dengan menavigasi melalui sidebar dari “app > res >
layout > activity_main.xml” seperti yang ditunjukkan oleh gambar.

Apa yang kami ingin kamu perhatikan di halaman ini adalah tata letak file xml. Teks gold
mendefinisikan Tata Letak Terkendali yang berisi seluruh aplikasi. Setelah pengaturan awal
ditentukan untuk Constrained Layout, ada TextView di dalamnya yang kemudian memiliki
seluruh rangkaian pengaturannya sendiri, termasuk 'android:text=”Hello World!”' yang
mengontrol teks apa yang ditampilkan di halaman aplikasi saat ini.

Meskipun TextViews adalah alat yang sangat berguna, yang perlu kita lakukan pada tahap
ini adalah menghapus semua yang berkaitan dengan tampilan teks. Pada contoh gambar
yaitu baris 9 -16. Sehingga teks menyerupai gambar di sini.

Di ruang yang ditinggalkan oleh TextView kita akan membuat dua Linear Layout bersarang.
Tata Letak Linear adalah wadah yang mengatur isinya baik secara horizontal maupun
vertikal satu di samping yang lain secara linier. Untuk membuatnya, klik baris 9 seperti
pada gambar.
Kemudian tekan tab satu kali untuk membuat indentasi dan ketik “<LinearLayout” Android
Studio akan mencoba melengkapi bagian tersebut secara otomatis untuk Anda. Setelah
kamu mengetik “<LinearLayout” cukup tekan enter dan bagian tersebut akan dibuat untuk
Anda. Ini akan mengisi tata letak kamu dengan dua pengaturan, "layout_width" dan
"layout_height". Untuk kedua jenis ini di "match_parent". Setelah pengaturan
“layout_height” harus ada teks berikut “></LinearLayout>”. Ini menunjukkan akhir dari
elemen yang baru saja kamu buat. Jadi tempatkan kursor kamu di antara “>” dan “< ” dan
tekan enter untuk memperluas tata letak sehingga dapat memuat elemen di dalamnya.
Dalam bagian ini tekan tab sekali lagi untuk tingkat indentasi tambahan dan buat Linear
Layout lain persis seperti sebelumnya kecuali dengan "layout_height" disetel ke "40dp".
Setelah kamu menyelesaikan halaman kamu akan menyerupai gambar berikut.
Setelah Tata Letak Linier kamu disiapkan, kami perlu menambahkan beberapa pengaturan
untuk masing-masingnya. Dimulai dengan yang pertama kamu buat, di antara pengaturan
android lainnya kita perlu melihat 'android:orientation=”vertikal”'.

Ini mengontrol cara mengatur item di dalam Linear Layout. Setelah baris itu, masukkan
'android:id=”@+id/outsideLinearLayout”' yang akan memberikan seluruh container
id “outsideLinearLayout” untuk kita temukan dari kode Java nanti.

Hal yang sama perlu dilakukan pada tata letak kedua dengan beberapa perbedaan. Pertama,
orientasi harus disetel ke 'horizontal' alih-alih 'vertikal' dan id akan menjadi
'topLinearLayout'. [Jangan ragu untuk mengatur ID ke apa pun yang kamu inginkan, namun
jika kamu mengikuti apa yang kami gunakan, akan lebih mudah untuk memastikan kode
Java kamu diatur dengan benar pada langkah berikut]
Nah, itu saja, Tata Letak Linier kamu sudah selesai sepenuhnya, kami tidak akan
menyentuhnya lagi. Selamat, tapi sekarang sampai pada bagian yang lebih menarik.

Kami akan menambahkan 3 elemen lain ke file xml

1. Image View
Berisi dalam tata letak linier kedua, ketik “<ImageView” dan tekan enter. Android Studio
akan menyelesaikannya secara otomatis seperti yang dilakukan untuk elemen tata letak.

Untuk layout_height dan layout_width kita sekali lagi menginginkan "match_parent" untuk
kedua bidang. Tepat di bawah pengaturan tersebut kita akan menambahkan 3 baris
lagi: 'android:layout_weight=”0.9”',
'android:id=”@+id/iconView”', 'android:src=”@mipmap/ic_launcher”. Nilai bobot akan
menentukan pentingnya tampilan gambar. Kami ingin selalu hadir dan mengambil ruang
sebanyak yang dibutuhkan.

Ini akan menjadi pratinjau ikon kami dari setiap halaman yang dikunjungi oleh tampilan
web. Nilai src mengontrol gambar default yang akan ditampilkan dalam tampilan gambar,
kami menggunakan pustaka gambar umum dan mendapatkan ikon android sederhana yang
akan diganti dengan halaman web manapun yang kami kunjungi.

2. Progress Bar
Tepat di bawah Tampilan Gambar kita akan mengetik "<ProgressBar" dan tekan enter.
Sekali lagi ukuran keduanya akan disetel ke "match_parent" dan seperti tampilan gambar,
kami akan menambahkan beberapa nilai ke setelan: 'android:layout_weight=”0.1”',
'android:id=”topProgressBar”', 'style= ”@style/Widget.AppCompat.ProgessBar.Horizontal”'.

Gaya yang kami yakin terlihat agak aneh, tetapi mirip dengan mendapatkan 'src' dari
Tampilan Gambar. Itu melihat melalui gaya Bilah Kemajuan umum dan menemukan gaya
horizontal yang menyebabkan bilah meningkat di seluruh halaman saat halaman web
dimuat.

3. Web View
Di bawah Linear Layout kedua seluruhnya (namun masih di dalam yang pertama) ketik
“<WebView” dan tekan enter. Yang ini sebenarnya cukup sederhana untuk disiapkan di
halaman ini.
Untuk tinggi dan lebar, masukkan "match_parent" dan kemudian buat kolom id seperti ini:
'android:id=”@+id/mainWebView”' dan percaya atau tidak hanya itu yang harus kita
lakukan di halaman ini.

Saya mengerti bahwa itu mungkin terlihat banyak tetapi untuk referensi halaman
activity_main kamu sekarang akan terlihat seperti di gambar.

Langkah 2 – Java:
Untuk saat ini kita sudah selesai dengan elemen tata letak. Saatnya berpindah dari file
'activity_main.xml' ke file 'MainActivity.java'. Seperti yang terlihat pada beberapa gambar
sebelumnya yang seharusnya muncul secara default di bilah atas di sebelah file
'activity_main'. Jika tidak, maka file tersebut dapat ditemukan dengan menavigasi melalui
sidebar dengan membuka “app > java > com.example.beginnerwebview >
MainActivity.java”.

Ingatlah bahwa 'com.example.beginnerwebview' adalah nama paket yang kami siapkan di

awal tutorial dan ini mungkin nama yang berbeda untuk Anda.

Dalam file MainActivity pertama-tama kita perlu membuat koneksi ke elemen Layout yang
kita buat di file xml. Untuk melakukannya, temukan baris yang bertuliskan 'public class
MainActivity extends AppCompatActivity' dan setelah baris ini buat bagian di mana kita
akan membuat variabel yang akan menunjuk ke elemen di activity_main. Di antara baris
yang disebutkan dan '@Override' pertama tambahkan yang berikut:

LinearLayout outsideLinearLayout, topLinearLayout;

ImageView iconView;
ProgressBar progressBar;
WebView mainWebView;
Saat kamu membuat setiap baris ini, kamu akan menerima perintah untuk mengimpor
pustaka terkait, cukup tekan enter untuk menerima, tetapi jika tidak ditawarkan,
pernyataan impor akan disorot dengan warna kuning di gambar kiri.

Untuk menyelesaikan membuat pointer ke elemen activity_main kita, kita perlu bekerja
dalam metode 'onCreate'. Setelah baris 'setContentView(R.layout.activity_main);'
tambahkan coding berikut untuk menyelesaikan (disorot dengan warna orange pada
gambar):

outsideLinearLayout = findViewById(R.id.outsideLinearLayout);
topLinearLayout = findViewById(R.id.topLinearLayout);
iconView = findViewById(R.id.iconView);
progressBar = findViewById(R.id.topProgressBar);
mainWebView = findViewById(R.id.mainWebView);
Perlu diingat bahwa nilai yang mengikuti 'R.id.' adalah nama yang kami berikan ke elemen
tata letak kembali di activity_main.

Selesai, kita perlu mengatur beberapa pengaturan awal untuk tampilan web kita agar
berfungsi dengan baik. Jadi masih dalam metode onCreate tetapi di bawah baris lain yang
kami tambahkan, kami akan menambahkan beberapa baris kode agar semuanya
diinisialisasi dengan benar:

progressBar.setMax(100);
mainWebView.loadUrl(https://www.google.com/);
mainWebView.getSettings().setJavaScriptEnabled(true);
mainWebView.setWebViewClient(new WebViewClient());
mainWebView.setWebChromeClient(new WebChromeClient());
Jangan ragu untuk menyetel nilai .loadUrl ke halaman awal apapun yang kamu inginkan,
kami menggunakan google.com demi kesederhanaan.

Untuk menyelesaikan kumpulan pengkodean Java saat ini, kita perlu mengedit
WebChromeClient baru yang kamu buat untuk memasukkan informasi yang diperlukan ke
elemen Tata Letak kita.

Jadi kembali ke baris yang membaca 'mainWebView.setWebChromeClient(new

WebChromeClient());' dan tepat di akhir antara dua tanda kurung terakhir (jadi antara '()'
dan ');') buat kurung kurawal terbuka dan tertutup ('{}') dan tekan enter untuk menuju ke
baris baru di antara keduanya.

Di bagian yang baru dibuat ini, tekan 'Ctrl+O'. Ini akan membuka jendela baru bernama
'Select Methods to Override/Implement' kita akan memilih tiga di antaranya:

'onProgressChanged'
'onReceivedTitle'
'onReceivedIcon'

Tidak masalah dalam urutan apa kamu memilih ketiganya, tetapi pilih semuanya dengan
Ctrl+klik dan tekan 'OK'. Sekarang setelah itu dibuat, kita akan membahasnya satu per satu
dan menambahkan baris yang diperlukan.

Dimulai dengan 'onProgressChanged', di dalam metode, tepat setelah baris yang bertuliskan
'super.onProgressChanged(view, newProgress);' buat baris baru dengan teks berikut,
'progressBar.setProgress(newProgress);' Metode ini akan dipanggil setiap kali halaman
dimuat dan akan memperbarui level secara dinamis yang ditampilkan oleh bilah progres.

Sekarang di 'onReceivedIcon' lagi sebagai baris baru di bagian bawah tambahkan coding
berikut, 'iconView.setImageBitmap(icon);'. Dengan baris ini di tempat setiap kali klien
chrome mendapatkan halaman web baru, itu akan memberikan ikon terkait dari halaman
itu ke elemen iconView.

Akhirnya di bawah 'onReceivedTitle' di posisi relatif yang sama dengan dua lainnya
tambahkan baris 'getSupportActionBar().setTitle(title);' Ini akan mengubah judul
webviewer kita menjadi judul halaman web saat ini saat dimuat.

Dan itu saja untuk saat ini. Kami akan kembali ke kode java, tetapi untuk saat ini berikan
diri kamu tepukan yang layak, kami memiliki satu langkah yang sangat kecil dan kemudian
kami akan menjalankan demo pertama kami.
Langkah 3 – Permissions and Demo
Kami perlu menemukan file baru di sidebar lagi. Mulailah dengan masuk ke "app >
manifests > AndroidManifest.xml". File ini mengontrol izin yang akan diberikan aplikasi
kita saat dijalankan.

Kami akan menambahkan hanya tiga baris ke halaman ini dan kemudian kamu dapat
melupakan bahwa kamu pernah melihatnya karena hanya itu. Temukan '>' pada baris
ketiga halaman ini dan tempatkan kursor kamu setelahnya.

Tekan enter untuk membuat bagian terbuka baru antara baris tersebut dan baris yang
dimulai dengan '<application'. Di area ini kita akan memasukkan yang berikut:

<uses-permission android:name=”android.permission.INTERNET”/>
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE”/>
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”/>

Dengan itu, kami sekarang memiliki semua izin yang kami perlukan untuk sisa program ini
selesai.
Sekarang untuk melihat demo aplikasi, klik tombol putar hijau di sudut kanan atas jendela.
Ini akan membuka jendela baru berjudul 'Select Deployment Target'.

Pilihan kamu kemungkinan akan kosong tetapi kami akan memperbaikinya. Di dekat bagian
bawah jendela baru ini, klik tombol berjudul 'Buat Perangkat Virtual Baru' yang akan
membuka jendela baru lainnya (pasti yang terakhir) berjudul 'Konfigurasi Perangkat
Virtual'.

Pastikan bagian kategori di sebelah kiri disetel ke 'Telepon' dan gulir ke perangkat Android
apa pun yang ingin kamu tiru. kami akan menggunakan Pixel, tetapi semuanya harus
berfungsi. Setelah kamu memilihnya, klik Next.
Pada halaman baru yang disediakan, kamu akan diminta untuk memilih System Image.
Spesifiknya tidak terlalu penting, tetapi kamu akan memilih di antara beberapa rilis yang
berbeda, kami akan melanjutkan dengan Q karena ini adalah yang paling terkini pada saat
penulisan.

Jadi pastikan kamu menekan 'Unduh' di sebelah nama Rilis dan tunggu sampai selesai, lalu
sorot rilis dan klik Berikutnya sekali lagi.

Pada halaman berikut kamu akan memiliki opsi untuk mengubah nama Perangkat Virtual
Android (AVD) ini, jika kamu mau. Namun ini tidak diperlukan. Cukup klik Selesai di sudut
kanan bawah untuk melanjutkan.
Sekarang, kembali ke layar Select Deployment Target kamu akan melihat perangkat virtual
baru tersedia. Pilih dan klik OK.

Berikan waktu untuk menerapkan karena menjalankan emulator dari seluruh perangkat
baru dapat menjadi prosesor intensif, dan kemudian harus menginstal aplikasi baru yang
baru saja kamu buat.

Namun, setelah beberapa menit kamu akan melihat layar ponsel dengan aplikasi WebView
baru kamu aktif dan berjalan menampilkan google.com atau halaman web apa pun yang
kamu sertakan sebagai halaman arahan kamu dengan judul halaman di bilah atas dan ke
kiri dan icon dan progress bar terletak tepat di bawahnya. Selamat. Karena sekarang kita
beralih ke hal-hal yang menyenangkan.

Langkah 4 – Additional Functionality

Jadi WebView kamu berfungsi. Bagus, tapi agak membosankan bukan? Pada langkah ini kita
akan menambahkan beberapa fungsi yang sudah ada. Dimulai dengan menyetel bilah
progres agar hanya ditampilkan saat halaman benar-benar dimuat, lagipula kita tidak perlu
tahu bahwa halaman selalu 100% setiap saat.

Kemudian kami akan mengaktifkan penyegaran halaman saat pengguna ponsel menggesek
ke atas saat halaman sudah digulir ke atas. Selain itu jika kamu menekan tombol kembali
pada saat aplikasi tampilan web akan ditutup begitu saja, jadi kami akan menambahkan
beberapa fungsi yang akan memungkinkan aplikasi untuk kembali ke halaman sebelumnya
yang dikunjungi saat kembali ditekan dan hanya menutup aplikasi satu kali pengguna
kembali ke tempat mereka memulai dan menekan kembali.

Akhirnya kami mungkin ingin mengunduh sesuatu melalui browser baru di beberapa titik,

Progress Bar Visibility

Saatnya untuk kembali ke kode Java. Ingat bagaimana kami memperluas WebChromeClient
baru dengan menambahkan tanda kurung buka dan tutup? Karena itulah yang kami
lakukan lagi untuk WebViewClient satu baris di atas. Tambahkan tanda kurung buka dan
tutup di antara dua tanda kurung terakhir dan perluas.
Saat kamu berada di bagian baru yang kamu buat, tekan Ctrl-O lagi untuk membuka
halaman Select Methods to Override/Implement.

Dua fungsi yang kami cari adalah onPageStarted dan onPageFinished. Pilih keduanya dan
tekan 'OK'. Dari dua fungsi baru tersebut, 'onPageStarted' dijalankan setiap kali halaman
yang kamu tuju sedang dimuat dan 'onPageFinished' dijalankan ketika pemuatan selesai.

Jadi dimulai dengan onPageStarted, letakkan baris berikut:

'topLinearLayout.setVisibility(view.VISIBLE);'
Ini akan membuat seluruh bilah atas halaman terlihat saat halaman pertama kali diambil. Di
bawah onPageFinished letakkan baris yang sama persis kecuali daripada view.VISIBLE
letakkan 'view.INVISIBLE' yang akan menyembunyikan bilah atas saat halaman selesai
dimuat.

Apa yang akan kita dapatkan adalah efek visual yang agak keren di mana bilah turun dari
atas halaman saat halaman pertama kali diminta, mengisi bilah pemuatan saat halaman
dimuat dan kemudian dengan rapi menyembunyikan diri setelah halaman selesai Memuat.

SwipeRefresh

Salah satu fitur yang sangat umum kamu lihat di peramban seluler adalah kemampuan
untuk menggulir ke atas bahkan saat peramban berada di bagian atas laman untuk
menyebabkan laman disegarkan.
Masuk akal bagi kami untuk mengimplementasikan fitur itu dalam aplikasi kecil kami, jadi
mari kita bahas cara melakukannya. Dimulai dengan activity_main.xml, ini adalah tempat
kamu membuat tata letak umum halaman.

Pada baris paling atas kita akan mengganti teks yang mendefinisikan Constrained Layout
(yaitu: '<androidx.constrainedlayout.widget.ConstrainedLayout') dengan
'<androidx.swiperefreshlayout.widget.SwipeRefreshLayout'. Perhatikan bahwa penting
untuk hanya mengganti teks yang ditentukan dan tidak lebih.

Di bagian paling bawah halaman sekarang harus ada tag penutup untuk tata letak yang
dibatasi '</androidx.constrainedlayout.widget.ConstrainedLayout>' ganti juga dengan: '<
/androidx.swiperefreshlayout.widget.SwipeRefreshLayout>' untuk menutup tata letak
dengan benar.

Sekarang untuk menyelesaikan halaman .xml, tepat di bawah tag terbuka, kita perlu
membuat ID untuk SwipeRefreshLayout. kami akan menggunakan
'android:id=”@+id/swipeRefreshLayout”'.

Sayangnya itu tidak cukup menangani semua yang perlu kita lakukan namun kita selesai
dengan 'activity_main.xml' untuk sementara waktu. Untuk saat ini kembali ke
MainActivity.java. Pada halaman ini kita akan membuat pointer variabel baru seperti yang
kita lakukan sebelumnya untuk elemen tata letak kita hanya yang ini untuk
SwipeRefreshLayout.

Jadi di dekat bagian paling atas halaman, buat variabel SwipeRefreshLayout (milik kami
bernama 'swipeRefreshLayout' karena kami tidak kreatif). Kemudian dalam metode
onCreate arahkan ke elemen tata letak menggunakan 'findViewById' seperti yang kita
lakukan untuk elemen lainnya.

Hal terakhir yang perlu kita lakukan agar penyegaran gesek berfungsi adalah
menambahkan baris dalam kode java 'swipeRefreshLayout.setOnRefreshListener(new
SwipeRefreshLayout.OnRefreshListener() {});'
Ini seharusnya sudah tidak asing lagi sejak kami melakukan fitur tampilan web. Pokoknya
seperti kemudian menempatkan beberapa baris baru antara '{}' dan tekan Ctrl-O, pada
layar Methods to Override/Implement kita mencari metode 'onRefresh();'.

Dalam metode onRefresh yang dibuat, tambahkan baris berikut: 'mainWebView.reload();'

dan dengan itu selesai, layar harus disegarkan saat menggulir di atas bagian atas halaman
web.

Namun, jika kamu mencobanya, kamu akan menyadari bahwa begitu halaman mulai
disegarkan, roda yang berputar tidak akan pernah hilang. Sedikit kekeliruan fungsi menurut
saya, tapi kita bisa memperbaikinya. Kamu perlu menemukan WebViewClient baru yang
kami buat sebelumnya dan membuka metode onPageFinished.
Pergi tepat di bawah metode 'topLinearLayout.setVisibility' dan masukkan baris berikut:
'swipeRefreshLayout.setRefreshing(false);'. Ini akan memungkinkan roda berputar
menghilang setelah halaman disegarkan.

Back to go Back

Seperti disebutkan di atas, saat ini jika kamu menjalankan aplikasi dan menekan tombol
'kembali' di ponsel, yang akan terjadi adalah aplikasi akan tertutup sepenuhnya. Ini tidak
ideal karena kami ingin dapat menggunakannya untuk membuka halaman yang dikunjungi
sebelumnya. Mari kita perbaiki itu.

Tetap dalam kode Java dan gulir ke bawah. Semua yang telah kita lakukan sejauh ini
melibatkan metode onCreate. Namun kali ini kita akan membahas di bawah metode itu
(meskipun masih dalam MainActivity).

Di bagian bawah halaman java harus ada dua '}', yang pertama tab sekali dan yang kedua di
sisi kiri jendela. Setelah yang pertama, jadi di antara keduanya, buat baris baru dan tekan
Ctrl-O. Metode yang kita cari di sini disebut 'onBackPressed' dan berada di bawah kategori
'androidx.fragment.app.FragmentActivity'.

Ketika kamu menemukannya tekan 'OK'. Metode ini akan dipanggil setiap kali pengguna
menekan tombol kembali saat aplikasi terbuka. Saat ini satu-satunya baris yang ada di
dalamnya adalah 'super.onBackPressed();' yang pada dasarnya mengatakan untuk hanya
menggunakan fungsi default dari tombol kembali. Kami akan mempertahankan baris itu
tetapi mengikatnya dalam pernyataan 'if..else..'. Jadi sebelum baris itu ketik
'if(mainWebView.canGoBack()) {' berikut dan tekan enter.

Di dalam tanda kurung kurawal, masukkan 'mainWebView.goBack();'. Ini memberi tahu

kode bahwa setiap kali tombol kembali ditekan, sebelum menutup aplikasi, periksa terlebih
dahulu apakah browser web memiliki halaman dalam riwayatnya. Jika demikian, mundur
satu halaman. Untuk menghentikan aplikasi agar tidak menutup saat mengenalinya, buka '}'
setelah pernyataan if dan ketik 'else {' dan tekan enter.

Masukkan 'super.onBackPressed();' dalam metode ini. Itu akan menghentikan kode dari
menjalankan fungsionalitas default kecuali kamu kembali ke halaman pertama browser.
kembali();'. Ini memberi tahu kode bahwa setiap kali tombol kembali ditekan, sebelum
menutup aplikasi, periksa terlebih dahulu apakah browser web memiliki halaman dalam
riwayatnya. Jika demikian, mundur satu halaman. Untuk menghentikan aplikasi agar tidak
menutup saat mengenalinya, buka '}' setelah pernyataan if dan ketik 'else {' dan tekan enter.
Masukkan 'super.onBackPressed();' dalam metode ini.

Itu akan menghentikan kode dari menjalankan fungsionalitas default kecuali kamu kembali
ke halaman pertama browser. kembali();'. Ini memberi tahu kode bahwa setiap kali tombol
kembali ditekan, sebelum menutup aplikasi, periksa terlebih dahulu apakah browser web
memiliki halaman dalam riwayatnya.

Jika demikian, mundur satu halaman. Untuk menghentikan aplikasi agar tidak menutup saat
mengenalinya, buka '}' setelah pernyataan if dan ketik 'else {' dan tekan enter. Masukkan
'super.onBackPressed();' dalam metode ini. Itu akan menghentikan kode dari menjalankan
fungsionalitas default kecuali kamu kembali ke halaman pertama browser.

Download Manager

Dengan asumsi bahwa kamu mungkin benar-benar ingin menggunakan app browser web,
terkadang kamu harus mengunduh sesuatu. Disini kita akan segera membahas cara
mengizinkan aplikasi tampilan web untuk menangani permintaan unduhan.
Pada kode Java, buka di dekat bagian bawah metode onCreate tempat kami membuat
WebChromeClient baru. Setelah itu tambahkan baris baru
'mainWebView.setDownloadListener(new DownloadListener() {});'.

Kami telah melakukan ini untuk sementara waktu sekarang, kamu tahu apa yang akan
terjadi. Setelah mengetik baris itu, itu akan secara otomatis membuka tanda kurung
kurawal dan menambahkan fungsi penimpaan yang disebut 'onDownloadStart' tetapi jika
tidak, buka sendiri tanda kurung dan tekan Ctrl+O dan temukan fungsi di jendela.

Di dalam tanda kurung untuk 'onDownloadStart' tambahkan baris berikut,

'DownloadManager.Request currRequest = new DownloadManager.Request(Uri.parse(s));'.
Ada kemungkinan 'DownloadManager' dan 'Uri' keduanya akan ditampilkan sebagai merah,
ini hanya berarti bahwa fungsi tersebut belum diimpor. Klik pada mereka dan tekan
Alt+Enter untuk secara otomatis mengimpor perpustakaan yang diperlukan. Ini akan
membuat objek yang dapat kami manipulasi berisi permintaan unduhan yang dikirimkan
oleh halaman web.

Untuk baris berikutnya ketik 'currRequest.allowScanningByMediaScanner();'. Baris ini

bersifat opsional tetapi memastikan bahwa saat mengunduh file media seperti audio dan
video, file tersebut akan dicantumkan di pemutar media asli. Sekarang kami memiliki
permintaan unduhan dan kemampuan untuk mengetahui apakah itu file media, kami
memerlukan
'currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOT
IFY_COMPLETED);'.
Yang akan memberi tahu pengelola unduhan bahwa kami akan diberi tahu saat unduhan
selesai. Sekarang kami memiliki permintaan akan semua pengaturan yang diperlukan
selesai, kami hanya perlu sesuatu untuk mengelola permintaan dan mendapatkan file yang
sebenarnya diunduh. Ini akan membuat objek yang dapat kami manipulasi berisi
permintaan unduhan yang dikirimkan oleh halaman web. Untuk baris berikutnya ketik
'currRequest.allowScanningByMediaScanner();'.

Baris ini bersifat opsional tetapi memastikan bahwa saat mengunduh file media seperti
audio dan video, file tersebut akan dicantumkan di pemutar media asli. Sekarang kami
memiliki permintaan unduhan dan kemampuan untuk mengetahui apakah itu file media,
kami memerlukan
'currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOT
IFY_COMPLETED);'.

Yang akan memberi tahu pengelola unduhan bahwa kami akan diberi tahu saat unduhan
selesai. Sekarang kami memiliki permintaan akan semua pengaturan yang diperlukan
selesai, kami hanya perlu sesuatu untuk mengelola permintaan dan mendapatkan file yang
sebenarnya diunduh. Ini akan membuat objek yang dapat kami manipulasi berisi
permintaan unduhan yang dikirimkan oleh halaman web. Untuk baris berikutnya ketik
'currRequest.allowScanningByMediaScanner();'.

Baris ini bersifat opsional tetapi memastikan bahwa saat mengunduh file media seperti
audio dan video, file tersebut akan dicantumkan di pemutar media asli. Sekarang kami
memiliki permintaan unduhan dan kemampuan untuk mengetahui apakah itu file media,
kami memerlukan
'currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOT
IFY_COMPLETED);'.

Yang akan memberi tahu pengelola unduhan bahwa kami akan diberi tahu saat unduhan
selesai. Sekarang kami memiliki permintaan akan semua pengaturan yang diperlukan
selesai, kami hanya perlu sesuatu untuk mengelola permintaan dan mendapatkan file yang
sebenarnya diunduh. Untuk baris berikutnya ketik
'currRequest.allowScanningByMediaScanner();'.
Baris ini bersifat opsional tetapi memastikan bahwa saat mengunduh file media seperti
audio dan video, file tersebut akan dicantumkan di pemutar media asli. Sekarang kami
memiliki permintaan unduhan dan kemampuan untuk mengetahui apakah itu file media,
kami memerlukan
'currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOT
IFY_COMPLETED);'.

Yang akan memberi tahu pengelola unduhan bahwa kami akan diberi tahu saat unduhan
selesai. Sekarang kami memiliki permintaan akan semua pengaturan yang diperlukan
selesai, kami hanya perlu sesuatu untuk mengelola permintaan dan mendapatkan file yang
sebenarnya diunduh. Untuk baris berikutnya ketik
'currRequest.allowScanningByMediaScanner();'.

Baris ini bersifat opsional tetapi memastikan bahwa saat mengunduh file media seperti
audio dan video, file tersebut akan dicantumkan di pemutar media asli. Sekarang kami
memiliki permintaan unduhan dan kemampuan untuk mengetahui apakah itu file media,
kami memerlukan
'currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOT
IFY_COMPLETED);'.

Yang akan memberi tahu pengelola unduhan bahwa kami akan diberi tahu saat unduhan
selesai. Sekarang kami memiliki permintaan akan semua pengaturan yang diperlukan
selesai, kami hanya perlu sesuatu untuk mengelola permintaan dan mendapatkan file yang
sebenarnya diunduh.

Sekarang kami memiliki permintaan unduhan dan kemampuan untuk mengetahui apakah
itu file media, kami memerlukan
'currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOT
IFY_COMPLETED);'.

Yang akan memberi tahu pengelola unduhan bahwa kami akan diberi tahu saat unduhan
selesai. Sekarang kami memiliki permintaan akan semua pengaturan yang diperlukan
selesai, kami hanya perlu sesuatu untuk mengelola permintaan dan mendapatkan file yang
sebenarnya diunduh.
Sekarang kami memiliki permintaan unduhan dan kemampuan untuk mengetahui apakah
itu file media, kami memerlukan
'currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOT
IFY_COMPLETED);'. Yang akan memberi tahu pengelola unduhan bahwa kami akan diberi
tahu saat unduhan selesai.

Sekarang kami memiliki permintaan akan semua pengaturan yang diperlukan selesai, kami
hanya perlu sesuatu untuk mengelola permintaan dan mendapatkan file yang sebenarnya
diunduh.

Jadi, mungkin menyisakan sedikit ruang kosong untuk menunjukkan bahwa kita berada di
bagian baru, lalu masukkan baris 'DownloadManager currDownload = (DownloadManager)
getSystemService(DOWNLOAD_SERVICE);'.

Ini akan menjadi manajer kami dan bertanggung jawab untuk memastikan file sampai ke
tujuannya. Jadi akhirnya masukkan 'currDownload.enqueue(currRequest);'. Ini untuk
menyampaikan permintaan kami kepada manajer kami yang akan memulai pengunduhan
file yang diminta.

Langkah 5 – Menu dan Bookmark

Sekarang kita memiliki browser web dengan fitur yang cukup baik, tidakkah kamu berpikir
bahwa bilah atas terlihat sedikit kosong dengan hanya judul halaman web di atasnya?

Berpikir begitu. Jadi untuk langkah ini kita akan menambahkan beberapa icon ke menu bar
serta daftar bookmark singkat. Pergi ke kolom kiri dan temukan direktori berikut: app >
res. Klik kanan pada folder res dan buka New > Android Resource Directory.

Ini akan membuka jendela untuk properti folder baru. Ubah nama default menjadi 'menu'
serta jenis direktori menjadi jenis menu di dropdown di bawah bilah penamaan. Sekarang
klik kanan pada direktori baru yang kamu buat ini dan buka: New > Menu resource file.
Dalam file ini satu-satunya parameter yang perlu diatur adalah bidang nama.

Anda mungkin akan mengenali jenis file ini sebagai file tata letak yang mirip dengan
activity_main.xml yang telah kita edit sejauh ini. Namun itu hanya akan digunakan untuk
mengedit tata letak bilah menu.
Namun sebelum kita melanjutkannya, buka direktori 'drawable' di folder 'res' yang sama.
Saat ini harus ada dua versi ikon peluncur yang kami gunakan untuk bilah Kemajuan kami.
Kami akan menginginkan beberapa tombol untuk menekan bilah menu kami sehingga kami
akan mengimpor gambar yang diperlukan di sini.

Jadi klik kanan pada folder drawable dan pergi ke 'New > Vector Asset'. Ini akan membuka
jendela baru yang khusus dimaksudkan untuk memilih ikon. Di sisi kiri jendela baru ini
harus ada bagian berjudul 'Clip Art:' dan di sebelah judul itu akan ada kotak kecil dengan
ikon saat ini di dalamnya.

Klik pada kotak itu dan setelah sedetik jendela baru akan terbuka dengan seluruh koleksi
ikon yang tersedia. Kami akan mengambil beberapa dari jendela ini, dimulai dengan 'panah
belakang'. Ada bilah pencarian di sudut kiri atas yang dapat membantu menemukan salah
satu ikon yang kami beri nama. Setelah kamu menemukan ikon yang diperlukan, klik
'Selanjutnya' dan kemudian 'Selesai' di halaman berikutnya. Sekarang kembali dan lakukan
lagi untuk ikon berikut: 'panah maju', 'menu', 'segarkan'.

Sekarang semua ikon kamu telah diimpor, klik 'ic_arrow_back_black_24dp' di folder

drawable untuk membuka file .xml untuk memanipulasinya. Apa yang ingin kamu temukan
harus ada di baris 7, disebut 'fillColor:'. Temukan bagian dalam tanda kutip yang
bertuliskan “#FF000000”. Ubah ke "#FFFFFFFF". Ini adalah kode hex, kami mengubah
warna ikon dari hitam menjadi putih yang akan membuatnya lebih mudah dilihat pada latar
belakang biru tua. Sekarang telusuri dan lakukan hal yang sama untuk semua ikon yang
baru saja kita impor.

Baiklah, seperti yang dijanjikan sekarang kembali ke file browser_menu.xml yang kita buat
di awal bagian ini. Kami akan menambahkan sedikit kode untuk itu sekarang. Dimulai
dengan baris paling atas yang berisi deklarasi <menu. Ikuti baris itu sampai akhir dan
setelah 'android”' tetapi sebelum '>' sisipkan baris baru. Kode yang akan dimasukkan di sini
adalah 'xmlns:app=”http://schemas.android.com/apk/res-auto”'. Setelah itu kita benar-
benar bisa masuk ke menu dan kita akan memasukkan elemen 'item' untuk setiap entri ke
bilah menu kita. Dimulai dengan tombol kembali, masukkan yang berikut ini:

'<item android:title=”Back”
android:id=”@+id/menuBack”
app:showAsAction=”always”
android:icon=”@drawable/ic_arrow_back_black_24dp”/>'
'title' adalah bagaimana item akan benar-benar disimpan di bilah menu, id adalah sesuatu
yang telah kita gunakan sebelumnya dan akan digunakan oleh kita dalam kode Java untuk
menautkan ke tombol, showAsAction mengontrol seberapa sering tombol berada di menu
dan seberapa sering itu ada di bilah menu tanpa perlu membuka menu untuk melihatnya,
dengan menyetelnya ke "Always" kami mengatakan kami selalu menginginkannya di bilah
dan bukan di menu itu sendiri. Terakhir, elemen ikon menunjuk ke ikon yang baru saja kita
impor yang seharusnya ditampilkan di bilah menu jika kamu meluncurkan aplikasi.

Sekarang, mengikuti format yang sama ini, lakukan hal yang sama untuk tombol 'Forward'
dan tombol 'Refresh'. Perubahannya adalah 'title=”Forward”', id=”@+id/menuForward”,
dan ikon yang menunjuk ke nama ikon yang telah kita impor sebelumnya untuk tujuan ini.
Bagian 1:

Kami akan kembali ke file ini sebentar tapi untuk sekarang kembali ke 'MainActivity.java'.
Temukan area tempat kami membuat metode override onBackPressed. Kejar dan tekan
Ctrl-O lagi. Metode yang kami cari berjudul 'onCreateOptionsMenu' dan
'onOptionsItemSelected'. Pilih keduanya dan buat metode override. Pergi ke
'onCreateOptionsMenu', di sini kita akan membuat inflater menu kita sendiri. Inflater menu
adalah objek yang mengisi menu opsi dengan item yang tersedia.

Jadi sebelum fungsi 'return' tambahkan baris berikut: 'MenuInflater menuInflater =

getMenuInflater();'. Dan sebuah variabel tidak berguna jika kamu tidak melakukan apa-apa
dengannya, maka masukkan: 'menuInflater.inflate(R.menu.browser_menu, menu);' Ini akan
memberi tahu inflater menu untuk menyediakan menu opsi dengan menu buatan kami
sendiri yang baru saja kami selesaikan tata letaknya.

Itu akan menyelesaikan metode itu. Sekarang pindah ke metode onOptionsItemsSelected

yang kita buat tepat setelahnya. Dalam metode ini kita akan menerima item menu yang
diklik dan memberi tahu kode apa yang harus dilakukan sebagai tanggapan. Kita akan mulai
dengan membuat pernyataan switch berdasarkan MenuItem yang diteruskan secara default
ke fungsi onOptionsItemSelected.

Jadi antara pernyataan '{' dan 'return' tambahkan 'switch(item.getItemId()){' berikut dan
tekan enter. Ini akan memungkinkan kami untuk beralih di antara metode yang berbeda
tergantung pada item mana yang dipilih. Jadi mulailah dengan memasukkan item case
untuk setiap tombol yang telah kita tambahkan ke menu kita sejauh ini. Mereka dapat
ditambahkan sebagai berikut:
case R.id.menuRefresh:
break;
case R.id.menuBack:
break;
case R.id.menuForward:
break;

Saat ini cara kerja switch statement adalah ketika item menu dipilih, fungsi
onOptionsItemSelected dijalankan dengan parameter yang disetel ke tombol yang ditekan.
Pernyataan switch kemudian memeriksa ID dari tombol itu dan memeriksa untuk melihat
apakah ada case yang disetel ke ID itu. Saat ini semua kasus mengatakan untuk dilakukan
adalah keluar dari pernyataan switch tetapi kami akan menambahkan beberapa fungsi di
sini.

Dimulai dengan menuRefresh. Jika pengguna memilih tombol itu, kami ingin halaman
dimuat ulang sama seperti jika pengguna menggulir ke atas dari atas halaman. Yang seperti
yang kita alami sebelumnya hanyalah satu baris kode sederhana. Jadi antara 'menuRefresh:'
dan 'break;' tambahkan baris 'mainWebView.reload();'
Untuk menuBack kamu mungkin tergoda untuk melakukan potongan kode yang sama
seperti yang kami lakukan saat tombol kembali ditekan pada perangkat android. Dan jika
kamu melakukannya, itu akan berhasil. Namun kita tidak perlu menghabiskan banyak
usaha. Antara 'menuBack:' dan 'break;' letakkan baris 'onBackPressed();' untuk sekadar
memanggil fungsi di atas yang dapat menangani pemindahan kembali melalui halaman
dengan sendirinya.

Akhirnya untuk bagian menuForward. Kami akan menambahkan beberapa kode di tempat
yang sama. Namun karena kami belum memiliki fungsi yang dibangun untuk menangani ke
depan, kami harus menulis tes cepat untuk memastikan tidak ada kesalahan yang terjadi.
Jadi di tempat yang sama tambahkan:

if(mainWebView.canGoForward())
mainWebView.goForward();

Pernyataan 'if' akan memastikan kami tidak merusak aplikasi dan hanya bergerak maju jika
ada elemen maju di pengaturan halaman.

Pada titik ini jangan ragu untuk mencobanya, semua tombol yang kami tambahkan ke bilah
menu seharusnya berfungsi dengan baik.
Bagian 2:

Sekarang kita akan menambahkan menu bookmark kecil dengan beberapa halaman dasar
yang mungkin ingin dibuka oleh setiap pengguna webview kita dengan cepat. Jadi untuk
memulai ini kita perlu kembali ke 'browser_menu.xml'.

Dan kembali ke halaman tata letak ini kita akan menambahkan 3 item lagi (namun jangan
ragu untuk menambahkan sebanyak yang kamu inginkan) yang berkorelasi dengan
halaman web yang berbeda.

Jadi seperti yang kita lakukan sebelumnya kita akan menambahkan item ini dalam format:

<item android:title=”XXX”
app:showAsAction=”xxx”
android:id=”@+id/XXX”/>

Untuk opsi bookmark ini, kami ingin 'app:showAsAction' sama dengan "never" karena
tombol akan selalu ada di menu bookmark dan tidak ditampilkan di bilah menu itu sendiri.
Untuk tiga halaman web saya, kami akan menggunakan "Youtube", "Google", dan
"Facebook" tetapi jangan ragu untuk menunjuk ke halaman apa pun yang kamu inginkan.
Untuk mencapainya kami akan menggunakan nama halaman sebagai judul
(android:title=”Youtube”) dan nama plus 'tombol' untuk id
(android:id=”@+id/youtubeButton”).

Sekarang agar tombol-tombol ini berfungsi kita harus kembali ke kode Java dan
memasukkan beberapa case untuk mereka di dalam pernyataan switch kita sebelumnya.
Jadi kembali ke kode di dalam 'onOptionsItemSelected()' kita akan menambahkan sejumlah
item ke pernyataan peralihan itu sama dengan jumlah halaman yang ingin kita tambahkan
ke bilah bookmark. Dalam format ini:

case R.id.XXXbutton:
mainWebView.loadUrl(“https://>url here</”);
break;
Dengan versi kami ditunjukkan di gambar kiri.

Ada satu hal terakhir sebelum kita dapat memanggil bilah bookmark selesai. Jika kamu
membuka emulator android sekarang kamu akan melihat tiga tombol vertikal di sisi kanan
yang ketika ditekan membuka menu bookmark. Ini bekerja namun kami pikir itu bisa
terlihat sedikit lebih baik. kami juga meminta kamu membuat ikon menu jauh di awal
bagian ini sehingga sayang sekali jika tidak menggunakannya.

Menambahkan ikon untuk tombol menu tidak semudah tombol lain yang kami letakkan di
bilah atas karena sudah ada dalam tata letak default untuk aplikasi Android. Namun itu bisa
dilakukan. Mulailah dengan membuka 'app > res > values > styles.xml'. File ini berisi
informasi tentang tema aplikasi dan bagian atas dan bawah harus berupa tag '<resource>'
dengan tag 'style' di dalamnya.

Kami akan menambahkan item ke dalam tag 'gaya' untuk memulai. Itu akan membaca

<item
name=”android:actionOverflowButtonStyle”>@style/myActionButtonOverflow</item>’

Sekarang ditambahkan dengan item lain, setelah flag '</style> masukkan baris baru. Kita
akan membuat bagian gaya kita sendiri. Jadi ketik:

<style name=”myActionButtonOverflow”
parent=”android:style/Widget.Holo.Light.ActionButton.Overflow”>

</style>

Elemen style ini sekarang akan berisi semua elemen tampilan dari tombol menu. Jadi, di
dalam bagian gaya baru ini kita akan menambahkan dua garis untuk membuat tombol
terlihat seperti yang kita inginkan. Yang pertama harus mirip dengan menambahkan ikon
ke item bilah atas:

<item name=”android:src”>@drawable/ic_menu_black_24dp</item>
<item name=”android:background”>?android:attr/actionBarItemBackground</item>
Baris pertama di sana menyetel ikon menjadi ikon menu yang kami atur di awal bagian ini.
Dan baris kedua menyetel latar belakang bilah atas ke nilai standarnya. Baris inilah yang
harus kamu ubah jika kamu ingin bilah atas menjadi sangat berbeda. Akhirnya gambar di
bawah ini menunjukkan apa yang kami dapatkan setelah seluruh proses ini.
Dengan itu selesai, aplikasi WebView kita harus siap digunakan. Jalankan emulator dan
lihatlah.
Keempat tombol menu kita harus diatur dengan warna putih pada latar belakang hijau tua.
Halaman harus dimuat dengan baik dengan bilah progres hanya terlihat saat halaman
dimuat secara aktif.

Akhirnya tombol bookmark harus membuka menu kecil dengan nama beberapa situs web
yang ketika diklik mengirim pengguna ke situs tersebut.

Saya harap kamu bersenang-senang belajar sedikit tentang Android Studio dan aplikasi
WebView khususnya, dan lihat itu tidak terlalu menakutkan! Anda juga dapat
mengunduh source code lengkap aplikasi diatas Download Disini.

Setelah kamu merasa nyaman dengan dasar-dasar Android Studio, ada banyak Template
Aplikasi Android canggih yang tersedia di MC Project untuk memulai proyek seluler kamu
berikutnya.