Bottom Navigation dengan Navigation Component

Bottom Navigation Bar Android

Sumber: Material Design

Bottom Navigation Android Tutorial – Dalam pembuatan aplikasi yang memiliki cukup banyak menu tentu akan sangat membantu pengguna jika ada sebuah tombol yang mudah diakses untuk menuju sebuah halaman tertentu, yap menu dengan icon yang berada dibagian bawah aplikasi merupakan bottom navigation. Contoh aplikasi yang menggunakannya adalah youtube, instagram, dan twitter, syarat penggunaan Bottom Navigation ialah memiliki lebih dari 2 dan tidak lebih dari 5 menu yang akan di tampilkan untuk menjaga agar lebih rapih dipandang oleh pengguna.

Untuk latihan kali ini akan sedikit berbeda, disini kita tidak akan menuliskan kode secara manual, semenjak Android Studio 3.5 keatas memiliki fitur Navigation Component.
Dikutip dari Developer Android Navigation Component merupakan fitur yang membantu Anda menerapkan navigasi, mulai dari klik tombol sederhana hingga pola yang lebih kompleks, seperti bilah aplikasi dan panel samping navigasi. Komponen Navigasi juga memastikan pengalaman pengguna yang konsisten dan dapat diprediksi dengan mendasarkan pada serangkaian prinsip-prinsip yang telah ditetapkan. Untuk memahami lebih jauh tentang Navigation Component bisa melalui tautan berikut Ringkasan Komponen Navigasi.

navigation component android

Sumber: developer.android.com

Latihan

bottom navigation

Seperti biasa kita buat project baru namun kali ini bukan Empty Activity melainkan kita pilih Bottom Navigation Activity kemudian beri nama Projectnya dengan nama Buttom Navigation, minimum SDK 21 dan language Kotlin. Jika sudah selesai maka akan berbeda hasilnya jika kita memilih Empty Activity, dengan memilih Bottom Navigation Activity kita seperti menggunakan template siap pakai yang bisa diubah sesuai keinginaan, coba jalankan aplikasi dan lakukan percobaan aksi pada bottom navigationnya, seharusnya sudah bekerja sebagai mana mestinya.

Latihan 2

Jika latihan kita tutorial android studio kali ini hanya seperti ini kurang menarik bukan? bagaimana jika kita menambahkan Buttom Navigation pada Project sebelumnya yaitu Custom ToolBar dan SearchView, silahkan kunjungi tutorial sebelumnya jika Anda belum mengikutinya.

Bottom Navigation bar Android Kotlin dengan Navigation Component

Silahkan buka kembali Projectnya, sebagai tambah disini kita akan melakukan perubahan Package Name untuk membedakan dengan Project sebelumnya.

Klik kanan pada folder packageName.namaLatihan disini contohnya adalah com.surgatutorial.latihanrecyclerview yang ada didalam folder java kemudian > Refactor > Rename > Rename Package dan isikan dengan nama baru seperti latihanbottomnav dan klik Refactor maka dibagian bawah sebelah kanan Project akan muncul Refactor Preview cukup klik Do Refactor maka prosess penggantian nama akan berjalan.

Belum selesai sampai disini kita akan mendapati error pada setiap class yang menggunakan View Binding seperti MainActivity dan FoodAdapter untuk memperbaikinya cukup mudah buka build.grade (module) pada bagian kiri bawah Project dan sesuaikan applicationId seperti yang kita ubah tadi yaitu com.surgatutorial.latihanbottomnav dan Sync Now.

Kemudian kita akan membuat folder ui untuk mengelompokkan class agar lebih terlihat rapih, klik kanan pada com.surgatutorial.latihanbottomnav > Package > dan tuliskan ui, setelah itu klik kanan kembali folder ui dan tambahkan 3 Blank Fragment baru dengan nama HomeFragment, FavFragment, dan ProfileFragment.

Selanjutnya tambahkan 3 Vector Asset ke dalam drawable sebagai icon pada Buttom Navigation, lalu kita akan menyesuaikan kode dalam Fragment tersebut, ubahlah kode dari fragment_home.xml, fragment_fav.xml, dan fragment_profile.xml menjadi seperti berikut:

Kemudian buat 2 file drawable sebagai background SearchView dengan cara klik kanan pada folder drawable > New > Drawable Resource File >  File Name bg_round.xml dan bg_white_rounded.xml, Ubah juga kode pada class HomeFragment, FavFragment, dan ProfileFragment. Untuk jika ada error pada color tambah kode warna berikut ke colors.xml <color name=”grey_300″>#d3d3d3</color>

Sekarang tambahkan folder navigation dengan cara klik kanan pada folder res > Android Resource Directory > ubah Resource Type menjadi navigation lalu OK dan tambahkan Navigation Resource File dengan nama bot_nav.xml, tambahkan juga bottom_nav_menu.xml pada folder menu dengan cara klik kanan pada folder menu > Menu Resource File > dan File name bottom_nav_menu.xml.

Terakhir untuk menerapkan Bottom Navigationnya kita ubah kode dalam MainActivity.kt, main_activity.xml dan strings.xml untuk mengatasi error pada fragment_home.xml

Bottom Navigation bar Android Kotlin dengan Navigation Component

Penjelasan

Saat menggunakan Bottom Navigation kita menampilkan tiap halamannya menggunakan Fragment, itulah sebabnya kita memindahkan dan memodifikasi tampilan pada main_activity.xml ke fragment_main.xml. Untuk membuat Bottom Navigation juga ada beberapa cara, namun disini saya menggunakan Navigation Component yang merupakan cara terbaru dan simple.

setSupportActionBar(bind.toolbar)
val toolbar: androidx.appcompat.widget.Toolbar = bind.toolbar

Perhatikan class MainActivity, disini terdapat perubahan penerapan ToolBar yang menyesuaikan dengan Navigation Component juga, kode dibawah dimaksudnya untuk menghilangkan icon back pada toolbar pada halaman tertentu.

navController.addOnDestinationChangedListener { _, destination, _ ->
if (destination.id in arrayOf(
R.id.navigation_home,
R.id.navigation_fav,
R.id.navigation_profile
)
) {
toolbar.navigationIcon = null
}
}

Kemudian untuk menginisialisasi Bottom Navigation menggunakan kode berikut, kita juga mengurutkan halamannya pada variable bottomNavConfiguration.

val bottomNav: BottomNavigationView = bind.bottomNav
val navController = findNavController(R.id.nav_host)
val bottomNavConfiguration = AppBarConfiguration(
setOf(
R.id.navigation_home, R.id.navigation_fav, R.id.navigation_profile
)
)
setupActionBarWithNavController(navController, bottomNavConfiguration)
bottomNav.setupWithNavController(navController)

Pada class HomeFragment kita hanya memindahkan beberapa kode yang sebelumnya ada di MainActivity dan menyesuaikannya pada Fragment, sedangkan pada FavFragment dan ProfileFragment hanya menghapus beberapa kode yang tidak terpakai.

Download Source Code Bottom navigation example android