Implementasi Navigation Architecture android jetpack dengan kotlin
seperti dijelaskan pada judul diatas, hari ini saya akan membuat story tentang bagaimana cara mengimplementasikan feature baru dari android jetpack component ini.
apa itu “Navigation Architecture Component” ?
pada Google IO 2018, google mengenalkan news part dari android jetpack dan salah satu komponen nya adalah Navigasi
Navigasi membantu kita untuk mengatur event navigasi untuk perpindahan dari fragment A menuju fragment B
baik itu pada event sederhana Button Klik maupun Widget Navigation seperti NavigationView,BottomNavigation dan lainnya.
pada tulisan kali ini kita akan mempraktekkannnya dengan mengimplementasikan ‘Navigasi’ dan ‘Bottom Navigation’
jika tanpa menggunakan Navigasi, biasanya untuk berpindahan dari satu activity / fragment kita menggunakan ‘Intent’ atau untuk Bottom Navigation kita biasa menggunakan ‘Fragment Transaction’ & TabLayout atau Viewpager.
tapi semenjak adanya Navigasi, kita bisa dengan mudah melakukannya, bahkan hanya perlu menulis “Beberapa Baris Code saja”, bagaimana ? amazing bukan . baiklah langsung saja kita memasuki pada tahap Codingannya.
Add Library Android Jetpack Componen Navigation
kemudian pada Build.gradle(Project) tambahakn sebuah clashpath agar Navigation Graph dapat work perfect di android studio, sehinggal build.gradle(project) menjadi seperti ini
Jika telah selesai, maka langkah selanjutnya adalah -> Sync Project -> BuildProject (cntrl + F9)
Selanjutnya (disini saya menganggap kamu sudah memiliki satu activity “Main Activity”) kemudian tambahkan 3 Fragment
dengan cara :
Klikkanan (pada Package) -> create news -> Blank Fragment (atur nama fragment) dan buat kan 3 buah fragment.
selanjutnya pada folder ‘res’ create folde menu dengan cara :
klik kanan (pada folder /res) -> news resource dir -> change main -> menu -> give name menu_bottom_nav.xml
isi menu_bottom_nav.xml
kemudian pada ‘activityMain.xml’ atau layout activity yang akan digunakan untuk menampung 3 fragment yang telah kita buat tadi.
buat ActivityMain.xml hingga seperti ini:
Note : pada layout ini saya menggunakna material design layout
pada tahap ini kita sudah menyiapkan layout activitymain agar dapat menampung fragment lain dengan menambahkan widget fragment dan pemberian atribute berikut
android:name=”androidx.navigation.fragment.NavHostFragment” app:navGraph=”@navigation/nav_graph”
app:defaultNavHost=”true”
Kita akan membuat NavGraph nya, yaitu visual untuk mengatur Navigasi fragment yang akan ditampilkan pada fragment yang menjadi Navhost.
langsung saja buat file navigation graphich nya dengan cara :
klik kanan (pada folder /res) -> news resource dir -> change main -> Navigation -> give name Navigation dengan bottom_nav_graph.xml
isi bottom_nav_graph.xml :
Note :
“PASTIKAN NAMA ID di MENU HARUS SAMA DENGAN NAME id Fragment di NAVIGATION”
sekarang kita memasuki pada bagian Code Main activity, untuk membuat ketika Item BottomNavigation di Click maka akan melakukan FragmentTransaction pada bagian activity main
Code Mainactivity :
jika diperhatikan pada code mainactivity.kt saya tidak menggunakan findviewbyid untuk memanggil id item layout, karna saya telah menggunakan DataBinding yang merupakan juga bagian dari Feature baru dari Google I/O 2018, kamu dapat menemukan tentang data binding pada halaman
navController = Navigation.findNavController(this, R.id.main_fragment) NavigationUI.setupWithNavController(bottom_nav,navController) NavigationUI.setupActionBarWithNavController(this, navController)
coba perhatikan, dengan menggunakna Navigasi, kita hanya membutuhkan 3 baris code untuk melakukan fragment transaction, berbeda dengan sebelumnya yang sangat ribet, bahkan membutuhkan Fragment adapter :D
Resouce Code dapat dilihat pada Halamna Github saya
Github.com/Yudi Karma ->
sekian tutorial kali ini, saya mohon maaf jika tulisan saya membingungkan, tapi kamu dapat menanyakan segala di kolom komentar dan saya akan sangat senang untuk menjawab.
