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.