Navigasi pada Aplikasi Android Modular dengan Jetpack Navigation Component

Photo by Jamie Street on Unsplash

Hai..baraya satu perjuangan buruh ketik pada android studio wkwkwk

lama tak berjumpa ya…maaf lagi sibuk memerangi imposter syndrome yang muncul terus dalam diri wkwk jadi insecure tiap hari haha

yaudah lupakan masalah imposter syndrome, sekarang mah gaskeun ngoding bor, pada tulisan kali ini saya ingin share salah satu komponen penting dalam pengembangan aplikasi android, yup betul sebuah navigasi :D.

gimana ceritanya kalo aplikasi gada navigasi wkwkwk, tapi kali ini saya akan coba share navigasi yang tidak biasa gan, saya akan share bagaimana berpindah atau bernavigasi dari satu hati ke lain hati…eh lintas modul ke modul lainya maksudnya maaf terlalu bersemangat :D

sebelum lanjut kita harus satukan persepsi, satukan pemahaman, satukan jiwa dan satukan hati dulu apa itu aplikasi modular baraya.

teman-teman pasti sudah tidak asing dengan pengembangan monolith pada aplikasi android, wait apa lagi monolith ?

jadi gini pengembangan aplikasi itu ada dua macam satau monolith yang biasa agan-agan lakukan ketika buat project, dalam android project terdapat satu modul App kan ? bener ga?

contoh monolith

sedangkan pada modular aplikasi itu sistemnya kita memecah-mecah per feature dengan sistem satu modul satu feature contoh baraya

terdapat module second_feature disitu nah itu anggap saja part feature yang di miliki si modul utama yaitu si app, sudah jelaskan perbedaan nya

Hal tersebut dilakukan karena monolith mempunyai kekurangan ketika aplikasinya sudah segede gaban wkwk kaya Gojek,Tokopedia dll bakal pusing nyari feature-feature tertentu, apalagi ketika developernya sudah banyak, pabuis ceuk bahasa sunda na mah wkwkw

kalo dengan modular kan enak developernya di alokasikan per feature kerjanya moal pabuis deui wkwk

yasudah sedikit saja intro modularnya, tapi yang mau dibahas pada artikel ini tidak seluruhnya tentang modular karena saya juga masih belajar wkwk lebih ke spesifik bagaimana cara pindah antar hati nya gan, eh ke hati terus.. maaf teringat seseorang wkkw antar modul maksudnya dengan Jetpack navigation component.

kalo belum tau Jetpack navigation Component baja dulu aja ya di https://developer.android.com/guide/navigation?hl=id

Kalo sudah, lanjut…saya akan coba kasih tutor cara perpindahan nya

pertama buat Project android baru terserah apapun namanya minumnya teh botol sosro hehe, jika sudah tambahkan pada Build.gradle app jadi seperti berikut:

jika sudah klik tombol sync yang muncul di atas, setelah itu kita buat nih modul featur nya dengan cara Klik File-New-New Module-pilih Android Library-Next-namai module nya sesuai fitur disini saya namai second_feature lau klik finish

terilihat pada kodingan yang di bold, fungsinya supaya modul app bisa akses ke modul ke dua nantinya

pasti sekarang bakal kaya gini penampakan project kita

sekarang buat pakacge baru bernama navigation pada res modul App dan buat file nav_graph.xml

buat fragmen baru dengan nama MainFragment dan ubah seprti berikut

kalo ada eror-eror biarkan dulu gas saja dulu beresin step-stepnya wkwkw

lalu fragment_main.xml seprti berikut

tampilan nya akan seperti ini, tema-teman bisa berkreasi ya ini hanya contoh, ntar funsi button ini untuk menuju ke module feature second yang telah kita buat

Ubah MainActivity pada module App seperti berkut

lalu activity_main.xml nay seperti berikut

Setelah itu tambahkan file ViewModel namai MainViewModel dan ubah jadi seperti berikut

Buka modul second_feature dan buat activity seperti biasa namai second_activity sudah tak perlu di utak atik.

pada pakacge res module second_feature buat pakacge navigation dan buat file second_graph.xml

Buat fragment di second_feature dengan nama SecondFeature

udah gausah di utak atik wkwk

nah sekrang kita hubungkan ini dua insan ini eh, dua modul maksdunya agan aduuuuh..

buka file second_graph.xml pada module second_feature

dan ubah jadi sperti ini

lalu buka file main_graph.xml pada module utama yaitu modul App dan ubah jadi speti berikut :

terlihat pada kodingan yang di bold, itu fungsinya untuk mendefinisikan bahwa kita bisa akses ke luar modul yaitu second_graph yang ada pada modul second_feature, dan definsikan destinasinya ke second_graph.

jika di lihat dalam versi desain nya sepeti ini kan iya ga?

Setelah itu Run boy

Harusnya ketika kita klik button maka akan berpindah ke module yang kedua menampilkan fragment yang ada di module ke 2 :)

Full Code nya bisa kunjungi Github saya disini

Thanks jika adaa kesalahan mohon koreksi pada kolom komentar ya guys mari sama-sama belajar hehe

Reference:

https://developer.android.com/guide/navigation?hl=id

https://medium.com/@hartwich.daniel/multi-module-navigation-with-the-android-architecture-component-82ed028fa1d9

Android Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store