Tutorial Membuat Tampilan Aplikasi Grab Di Android Studio| activity dan message page

2 min read

hallo kembali lagi di tutorial programming infotech kali ini kita akan membahas tutorial membuat tampilan aplikasi grab di android studio activity dan message page. Sebelumnya kalian telah mengikuti tutorial yang lain. Maka agar berhasil membuatnya maka kalian ikuti dengan baik semua tutorialnya. Berikut list dari semua tutorial tampilan aplikasi grab

List tutorial aplikasi grab

  1. Tutorial Membuat Tampilan Aplikasi Grab Di Android Studio| home page – klik link
  2. Tutorial Membuat Tampilan Aplikasi Grab Di Android Studio| payment page – klik link
  3. Tutorial Membuat Tampilan Aplikasi Grab Di Android Studio| welcome page – klik link
  4. Tutorial Membuat Tampilan Aplikasi Grab Di Android Studio| activity dan message page

Screenshoot aplikasi message page dan activity page

by makhalibagas

Nah silahkan kalian pelajari latihan layouting diatas agar menambah pengetahuan tentang layouting, jika bermanfaat silahkan bisa dishare ke teman-teman kalian yang penginbelajar

Oke langsung mulai pembuatanya

buka fragment activity dan ubah code dari activity_fragment menjadi seperti berikut

Buka Projek

Buka yang kemarin kalian ikuti tutorial sebelumnya, jika sudah kalian buka maka selanjutnya ikuti langkah berikut

karena di activity message kita akan menggunakan expandable recyclerview, maka kita pelajari dulu apa itu expandable recyclerview agar kalian tahu mengenai pengertian tersebut, mari baca dengan baik agar paham yah

expandable adalah menu pada saat kita pencet salah satu item di recyclerview maka akan seperti menu drop down, yang kita pencet salah satu akan muncul dan ketika dipencet lagi akan tidak muncul lagi, mungkins seperti itu pengertian dari saya yah. Dan apabila salah silahkan koreksi lagi karena itu menurut saya

oke langsung pertama tahapnya, ubah fragment_activity menjadi seperti ini

lalu jika sudah kalian buat 2 fragment karena terdapat 2 menu di fragment activity ini yaitu, activities fragment dan delivery fragment, dan setelah kalian buat langkah selanjutnya adalah kita ke ActivityFragment.kt dan ubah code menjadi seperti berikut

di fragment activity diatas terdapat adapter dari viewpager karena kita menggunakan viewpager2 sebagai menu antara activities fragment dan delivery fragment, maka selanjutnya kita tinggal mengubah kedua fragment tersebut menjadi seperti berikut

yang pertama ActivitiesFragment

kita ubah layout dari activities fragment terlebih dahulu menjadi seperti berikut

jika sudah maka kita selanjutnya ke fragment delivery, karena di fragment activities kita cuma layout aja maka kalian cuma ubah yang diatas

kedua DeliveryFragment

nah disini kita baru akan membuat expandable recyclerview karena terdapat menu seperti drop down ini pada grab, oke langsung saja pertama buat terlebih layout item seperti berikut, buat layout item dengan nama item_ongoing setelah itu ubah code menjadi ini

jika sudah membuat item nya maka kita akan membuat model dari item nya seperti ini dengan nama ongoing

jika sudah kita layouting fragment delivery menjadi seperti berikut

nah ketika kalian sudah lakukan penulisan code seperti diatas tinggal kita akan membuat adapter dari expandable item recyclerview nya seperti berikut dengan nama OngoingAdapter

jika adapter telah berhasil kalian buat selanjutnya tinggal implementasi code dari DeliveryFragment menjadi seperi berikut

kalian telah berhasil membuat activity page jika mengikuti langkah diatas dengan benar, maka untuk selanjutnya kita tinggal membuat message page seperti berikut

buat 2 fragment juga dengan nama Chats fragment dan Notification Fragment lalu ubah kedua layout fragment diatas menjadi seperti berikut

fragment_chat.xml

lalu jika sudah

fragment_notif.xml

jika sudah kita diatas tidak mengimplementasikan code .kt karena hanya layout saja , dan karena di tutorial pertama kita telah membuat message fragment maka kita ubah code nya menjadi seperti berikut yahh

fragment_message.xml

lalu jika sudah

MessageFragment.kt

karena kita terdapat 2 menu juga maka kita di messagefragment nya juga terdapat adapter vewpager2 nya, maka seperti berikut semua codenya

tutorial diatas telah selesai silahkan jalankan aplikasi tersebut, semoga kalian mengikuti dengan baik dan berhasil, jika tidak bisa ditanyakan.

Penutup

Alhamdullillah tutorial kali ini telah selesai semoga yang kalian kerjakan dengan baik akan menghasilkan aplikasi yang maksimal juga.

Link Repository atau Source Code

kalian bisa lihat projek dari semua tampilan aplikasi grab di link bawah ini, jangan lupa kalian star agar menjadi lebih semangat dalam membuatnya yah.

UI-GRAB (github.com)

Leave a Reply

Your email address will not be published. Required fields are marked *

Translate »