Eksplorasi Android Jetpack Navigation — Part 2

Bagaimana menggunakan Navigasi dan Bundle pada Navigation

Irfan Irawan Sukirman
Oct 27 · 6 min read

Assalaamu’alaykum bro.

Setelah sebelumnya kita membahas dasar-dasar dari library Navigation, kali ini kita akan mencoba membuat sebuah aplikasi sederhana yang terdiri dari halaman daftar pasien dan halaman detail informasi dari pasien menggunakan library ini.

Berikut skema dari aplikasi yang akan dibuat:

Patient App Diagram Flow

Step 0— Mempersiapkan Dependencies

  • navigation-fragment-ktx dan navigation-ui-ktx : adalah library akan digunakan untuk proses navigasi antar halaman.
  • recyclerview : adalah library yang digunakan untuk membuat daftar pasien.
  • picasso : adalah library yang digunakan untuk menampilkan gambar pasien.

Step 1 — Membuat Halaman Root

PatientActivity Class

Pada kelas ini tidak ada penambahan kode sama sekali karena semua pengelolaan navigasi dilakukan oleh Navigation Controller yang sebelumnya. Kita hanya perlu mendefinisikan semua fragment melalui Navigation Graph (navigation XML) dan navigasinya sendiri dilakukan pada kelas fragment. Sehingga secara default kode yang terlulis pada kelas Activity hanya seperti kode diatas.

Step 2 — Membuat Adapter Daftar Pasien

Patient Item (XML)

Hasil kode diatas akan nampak hasilnya seperti pada gambar dibawah ini.

UI Patient Item

Patient Adapter Class

Pada halaman kelas adapter diatas, selain untuk melakukan render UI juga dilakukan pemetaan data ke view serta memasang sebuah interface listener yang gunanya untuk menampung data pasien yang terpilih dan membawanya ke halaman PatientListFragment. Nantinya data tersebut akan dibawa oleh bundle sebagai arguments ke halaman detail pasien.

Step 3— Membuat Halaman Daftar Pasien

Data Class Patient

data class Patient berfungsi sebagai bussiness logic yang akan menampung semua data pasien yang akan ditampilkan kedalam aplikasi.

Patient Item Listener

Interface PatientItemListener berfungsi sebagai handler item ketika pengguna memilih satu pasien yang terlihat pada aplikasi dan membawa data yang terseleksi ke helaman PatientListFragment Class.

PatientListFragment Class

Full Implementation PatientListFragment Class

Step 4— Membuat Halaman Detail Pasien

Setelah berhasil membuat halaman daftar pasien yang ditulis pada kelas PatientListFragment. Maka selanjutnya adalah membuat sebuah halaman yang berisikan detail informasi dari seorang pasien.

Patient Detail Fragment (XML)

Hasil kode diatas akan nampak hasilnya seperti pada gambar dibawah ini.

UI Patient Detail Fragment

PatientDetailFragment Class

Pada kelas PatientDetailFragment diatas terdapat fungsi setupPatientData() yang bertugas untuk melakukan pemetaan data ke UI berdasarkan arguments yang telah dikirim dari halaman daftar pasien sebelumnya.

Step 5 — Membuat Navigation Graph

Hasil kode diatas akan nampak hasilnya seperti pada gambar dibawah ini.

Navigation Graph Patient

Step 6— bundleOf Sebagai Kurir Data

Pada kode diatas, bundle akan bekerja untuk menampung data pasien yang terpilih. Lalu dilakukan pemetaan value berdasarkan key (Key-Value Pair). Setelah itu, untuk melakukan navigasi ke halaman detail pasien menggunakan extension function findNavController() dan membawa parameter arguments (bundle) ke halaman detail pasien.

Nah, hasil akhir dari aplikasi ini dapat dilihat pada video berikut ini:

Alhamdulillah. Kita telah menyelesaikan tutorial pada kesempatan ini. Source code bisa kalian dapatkan disini. Sesi selanjutnya saya akan coba bagikan tutorial bagaimana cara melakukan navigasi menggunakan <action> serta menambahkan animasi ketika transisi pada setiap halaman Insyaallah. Sekian dan semoga bermanfaat.

Wassalaamu’alaykum Warahmatullahi Wabarakatuh


Easyread

Easy read, easy understanding. A good writing is a writing that can be understood in easy ways

Irfan Irawan Sukirman

Written by

Mobile Developer at Tokodistributor.com | Freelancer website and mobile hybrid with Flutter

Easyread

Easyread

Easy read, easy understanding. A good writing is a writing that can be understood in easy ways

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade