Tutorial Membuat Tampilan Aplikasi Grab Di Android Studio| Home page. Menggunakan bahasa kotlin karena sekarang lebih banyak digunakan dan akan terus berkembang pesat bahkan banyak yang tadinya menggunakan java sekarang hijrah ke kotlin. untuk itu mari kita belajar bersama-sama agar menjadi lebih mengerti dan akan terus mengerti.
kalian lagi belajar layouting pada android studio, nah disini kita akan mempelajari layouting dari tampilan aplikasi grab. Pasti dari kita sering menggunakan aplikasi ini karena itu kita pengin membuat tampilan aplikasi ini untuk belajar dan mengembangkan skil kita dalam belajar. Untuk itu kita harus sering explorer sesuatu yang baru dan diusahakan setiap hari agar kita menjadi paham.
Schreenshott dari home page

Tutorial membuat tampilan aplikasi grab
siapa yang tidak kenal aplikasi satu ini, Aplikasi yang telah banyak digunakan dan bermanfaat bagi kita semua. Aplikasi pengantaran makanan, ojek dll yang ada di asia tenggara ini sangat membantu dalam situasi covid ini. Banyak aplikasi yang dapat membatu kita dan salah satunya adalah grab ini. Untuk itu mari kita belajar membuat tampilan dari aplikasi grab yang pertama kita buat adalah homepage terlebih dahulu. Karena insyallah tutorial kali ini akan menjadi beberapa bagian yah!
Tutorial membuat tampilan aplikasi grab
oke langsung ke langkah nya, mari simak baik-baik agar berhasil membuat tampilan aplikasi grab.
Siapkan leptop kalian, buka android studio , buat projek dengan bahasa kotlin lalu tunggu build selesai, jika sudah siapkan asset yang diperlukan. Asset nya akan ada di repository saya tetapi akan saya publik setelah tutorial ini selesai yah jadi nantikan terus tutorialnya. Selanjutnya…
Tutorial kali ini akan sedikit panjang jadi perhatikan baik-baik dan jangan sampai males karena kalau males pasti tidak akan berhasil membuatnya yah
Import library
kita membutuhkan beberapa library dalam membuat tampilan grab ini yaitu seperti library berikut.
Buat menu untuk bottom navigation
dengan cara klik kanan pada folder res lau pilih new -> Android Resource File dan Resource Type ganti dengan menu setelah itu beri nama dengan main_menu lalu oke
Jika sudah maka masukan code seperti berikut
jika sudah proses selanjutnya adalah buat navigation, dengan cara klik kanan pada folder res lau pilih new -> Android Resource File dan Resource Type ganti dengan navigation setelah itu beri nama dengan bottom_navigation lalu oke, dan selanjutnya membuat fragment untuk menu bottom navigation nya. Ada 5 fragment yang kita buat sesuai dengan aplikasi grab yaitu Home, Activity, Payment, Message, Account jika sudah membuat fragmentnya.
lalu masukan code seperti berikut di bottom_navigation
nah kalau sudah kalian tinggal edit activity_main.xml menjadi seperti berikut.
nanti akan ada error pada include karena kita belum membuat layout dari app_bar biarkan saja, selesaikan dahulu dan jika sudah maka lanjut membuat app_bar nya di layout lain seperti berikut code app_bar nya
jika app_bar sudah selanjutnya implementasikan botom navigation nya di MainActivity.kt nya dan seperti berikut code nya
jika telah mengikuti tutorial diatas dengan baik, maka kalian telah berhasil membuat bottom navagation seperti aplikasi grab, lalu selanjutnya tinggal layouting fragment home
sebelum itu kita buat item dari recyclerview yang ada di fragment nya home terlebih dahulu, seperti berikut item dari recyclerviewnya
jika item sudah dibuat selanjutnya kalian membuat home nya, ikuti langkah berikut agar berhasil.
pertama jadikan viewgroup menjadi nestedscrolview agar bisa kita scrol karena akan ada beberapa recyclervirew di home fragment, jika sudah lalu didalam nestedscrolview kalian tambahkan contrains layout. Maka akan menjadi seperti berikut
jika sudah langkah selanjutya adalah membuat menusearchview seperti berikut

membuat seperti diatas code nya seperti ini
selanjutnya kita akan membuat layout seperti ini

dan tambahkan code seperti berikut
jiika sudah kita akan membuat seperti berikut yaitu icon dari menu tampilan aplikasi grab

tambahkan codenya seperti berikut
jika menu sudah selanjtunya kita akan membuat tampilan bawah dari icon tersebut berupa recyclerview discover dari grab dll, maka code dari rv tersebut adalah seperti berikut
maka full code dari frament home nya akan menjadi seperti berikut, perhatikan baik-baik yah jangan sampai kelewat
jika sudah selesai pembuatan fragment layout diatas kita selanjutnya akan mengimplementasikan recyclerview nya, yang pertama kalian buat model dari itemnya terlebih dahulu seperti berikut
jika sudah dibuat kita akan membuat adapter untuk set data dari recycleriew nya dan adapternya seperti berikut codenya.
dan jika adapter telah dibuat selanjutnya kita membuat layout botto sheet nya terlebih dahulu karena di home fragment apabila kita klik iconmore maka akan muncul dialog dari bawah dan itu dinamakan bottomsheet. Pengin tau bottomsheet itu apa? berikut penjelasan simple
Apa itu BottomSheet?
BottomSheet adalah komponen yang digunakan untuk menampilkan beberapa informasi dengan menggeser tampilan ke atas dari bagian bawah layar dan juga, Anda bisa menyembunyikan BottomSheet ini saat pesan disampaikan kepada pengguna. Ini adalah cara yang bagus untuk menyampaikan beberapa pesan atau melakukan beberapa tugas di Android.
dan sudah tau maka selanjutnya kita buat layout dari bottom sheet nya terlebih dahulu seperti berikut codenya
jika sudah selanjutnya adalah membuat class untuk bottomsheet nya agar anti bisa kita panggil di home fragment nya. dan seperti berikut code nya
jikaa sudah langkah terkahir dalam pembuatan layouting home fragment adalah implemetasikan di home fragment kt nya sperti berikut
jika langkah – langkah diatas kalian lakukan dengan baik maka kalian telah menyelesaikan tutorial kalia ini yaitu membuat tampilan aplikasi grab home page, jalankan aplikasi tersebut maka akan menjadi sepeerti gambar yang paling atas sendiri yah. jika masih terdapat error bisa kalian ulangi dari atas dengan bai-baik dan jika terus error kalian bisa bertanya
Penutup
Alhamdullillah tutorial kali ini telah selesai semoga yang kalian kerjakan dengan baik akan menghasilkan aplikasi yang maksimal juga, Semoga bermanfaat tutorialnya bagi kalian yah. Jangan lupa di share ke teman-teman atau socialmedia kalian agar tahu. Kalian bisa request tutorial dan jangan lupa berkunjung keartikel tutorial-tutorial lainya yah teman-teman semua.
Note
repository projek ini akan dipublic setelah tutorial nya selesai semua jadi ikuti terus tutorial-tutorial dari kami agar kita bisa terus semangat dalam membuat tutorialnya. Sekian terimakasih semua.
Ditunggu repositorynya bang soalnya gk bisa ngikutin tutorialnya karena gambar2 nya blm lengkap
https://github.com/makhalibagas/UI-GRAB
ini bang, bisa dilihat
baca juga tutorial lainya yah bang
terimakasih…