Belajar Membuat Bottom Navigation dengan Android Jetpack Navigation Component
Pada kesempatan kali ini saya ingin share, bagaimana sih caranya membuat Bottom Navigation yang simple. Karena biasanya untuk membuat sebuah bottom navigation cukup banyak memakan code pada Activity Utama. Nah dengan menggunakan Navigation Component, kita dapat membuat sebuah bottom navigation cukup dengan 1 baris saja pada activity utama. Believe or not? Check this out.
Nah gimana, tertarik bukan?
Ok sebelum kita mencoba membuatnya, kita kenalan dulu sama si doi. Biar di sayang, cie elah. :)
Navigation Component, what is that?
Navigation Component sendiri adalah bagian dari Android Jetpack. Nah Android Jetpack sendiri itu apa?
Android Jetpack
Android Jetpack adalah serangkain library, alat, dan panduan untuk membantu para developer dalam mengembangkan sebuah aplikasi berkualitas tinggi dengan lebih mudah. Jadi intinya, Android Jetpack memudahkan kita dalam membuat app dengan lebih mudah dan cepat, serta best practice yang harus dilakukan juga.
Selengkapnya cek link berikut :
Ok, lanjut tadi, sampai mana? oh yaa…
Jadi, Navigation Component merupakan salah satu component yang menyediakan kerangka kerja navigasi yang kuat untuk pengembangan aplikasi kita. Nah fungsinya apa? Fungsinya yaitu untuk membantu kita sebagai developer dalam mengelola navigation, fragment transaction, backstack, animations, deep linking dan masih banyak lagi
Istilah Penting dalam Navigation Component
NavHostFragment
Sebuah wadah kosong yang bertujuan untuk tempat fragment kita berada, gampangnya seperti Frame Layout jika kalian pernah menggunakannya.
NavGraph/NavigationGraph
Sebuah file xml berisi semua informasi terkait navigasi di satu lokasi terpusat. Ibaratnya pada file ini kita mendesain sebuah alur aplikasi kita.
NavController
Objek yang mengelola navigasi aplikasi kita dalam sebuah NavHostFragment. NavController mengatur pertukaran konten tujuan di NavHost saat pengguna bergerak di seluruh aplikasi Anda. Jadi, objek inilah yang mengatur ketika kita mengklik salah satu navigasi pada bottom navigation maka yang muncul fragment apa.
Let’s Do It
Okay, langsung saja kita menuju TKP.
Dependency
Sebelum menggunakan fitur navigation component, kita harus mengimplementasikan dependency nya terlebih dahulu.
Note: Pastikan android studio kalian versinya, Android Studio 3.3 or higher.
def nav_version = “2.2.2”
// Navigation Components
implementation “androidx.navigation:navigation-fragment-ktx:$nav_version”
implementation “androidx.navigation:navigation-ui-ktx:$nav_version”navigation-fragment : library untuk navigation fragment
navigation-ui : digunakan untuk mengatur konfigurasi appbar, toolbar dan komponen lainnya (material design) dengan nav controller.
Fragment
Setelah implementasi dependency, kita tambahkan sebuah fragment. Kali ini saya akan menambahkan tiga buah fragment.
NavGraph
Langkah selanjutnya adalah kita membuat sebuah navigation-graph yang mana berupa file xml.
How to make it?
Klik kanan pada package res → New → Android Resource File. Konfigurasikan seperti gambar di atas.
Setelah kita klik OK, kita akan mempunyai sebuah package bernama navigation dan file xml bernama navigation_graph.xml .
Setelah itu ketikkan, code berikut :
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/navigation_graph"
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name="com.abdhilabs.mymovie.HomeFragment"
android:label="fragment_home"
tools:layout="@layout/fragment_home" />
<fragment
android:id="@+id/favoriteFragment"
android:name="com.abdhilabs.mymovie.FavoriteFragment"
android:label="fragment_favorite"
tools:layout="@layout/fragment_favorite" />
<fragment
android:id="@+id/settingFragment"
android:name="com.abdhilabs.mymovie.SettingFragment"
android:label="fragment_setting"
tools:layout="@layout/fragment_setting" />
</navigation>Code tersebut akan membuat menjadi seperti ini
Atau cara cepatnya, kalian bisa membuatnya dengan meng-klik add seperti di bawah ini. Nanti akan secara otomatis men-generate code seperti sebelumnya. :)
Layouting
Setelah selesai bagian navigation_graph , kita lanjut layouting bagian main_activity.xml . Pada main_activity.xml , kita tambahkan sebuah bottom_navigation_view dan sebuah nav_host_fragment yang berupa tag fragment seperti gambar di bawah.
Kali ini kalian ketik sendiri. :)
Setelah code di atas selesai, kita buat sebuah menu untuk si bottom_navigationnya.
How to make it?
Klik kanan pada package res → New → Android Resource File → Konfigurasikan seperti gambar di atas.
Setelah kita klik OK, kita akan mempunyai sebuah package baru bernama menu dan sebuah file xml baru bernama bottom_navigation_menu . Kemudian beri code pada file xml tersebut seperti di bawah.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/homeFragment"
android:icon="@drawable/ic_home"
android:title="Home Page" />
<item
android:id="@+id/favoriteFragment"
android:icon="@drawable/ic_favorite"
android:title="Favorite Page" />
<item
android:id="@+id/settingFragment"
android:icon="@drawable/ic_settings"
android:title="Setting Page" />
</menu>Pada code tersebut saya membuat 3 item menu untuk di implementasikan pada bottom_navigation_view nanti. Jika android:icon nya terdapat error atau berwarna merah, maka tambahkan terlebih dahulu iconnya.
How to make it?
Klik kanan pada package drawable → New → Vector Asset.
Kemudian kembali lagi ke main_activity.xml, kita tambahkan attribut app:menu=”@menu/bottom_navigation_menu” pada bagian tag bottom_navigation_view untuk mengimplementasikan menu yang sudah kita buat tadi.
Java
Setelah kita selesai semua step di atas, kita implementasikan code yang hanya 1 baris untuk mengontroll semua fragment yang sudah kita buat sebelumnya.
Tambahkan code seperti di bawah ini, pada MainActivity.ktbottomNavigationView.setupWithNavController(navHostFragment.findNavController())
Setelah selesai, coba jalankan aplikasinya.
Taraaaa… :)
Sekian sharing kali ini, kedepannya mungkin saya akan kembangkan menjadi sebuah serial, yang mana akan menjadi real project di akhir serial nanti. So, stay tuned.
Terimakasih telah membaca, jika anda menyukainya jangan lupa beri 👏 👏 👏 and share bila bermanfaat. :)
