Panduan Membuat Aplikasi 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.

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.

Mengembangkan Aplikasi WebView

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.

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:

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):

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:


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_NOTIFY_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_NOTIFY_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_NOTIFY_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_NOTIFY_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_NOTIFY_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_NOTIFY_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_NOTIFY_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: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:


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:


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:


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

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:


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.