Cara Membuat Bottom Navigation di Android dengan Kotlin: Panduan Lengkap & Praktis

Dalam pengembangan aplikasi Android modern, navigasi yang intuitif adalah kunci untuk pengalaman pengguna yang baik. Salah satu komponen navigasi yang paling umum dan efektif adalah Bottom Navigation Bar. Komponen ini memungkinkan pengguna untuk berpindah antar bagian utama aplikasi dengan cepat, tanpa harus membuka menu hamburger atau menelusuri hierarki yang kompleks.

Sebagai developer, menguasai cara membuat Bottom Navigation yang responsif dan sesuai standar Material Design adalah skill fundamental. Apalagi dengan Kotlin sebagai bahasa utama Android, kita bisa mengimplementasikannya dengan lebih ringkas dan aman. Artikel ini akan memandu Anda secara langkah demi langkah untuk membangun Bottom Navigation di aplikasi Android menggunakan Kotlin dan Android Jetpack Navigation Component yang modern.

Kita akan membahas mulai dari setup proyek, mendesain menu, hingga mengelola perpindahan antar fragment secara dinamis. Jika Anda sering merasa kesulitan mengelola fragment dan navigasi yang kompleks, panduan ini akan memberikan solusi yang bersih dan efisien.

Prasyarat

Sebelum kita mulai, pastikan Anda memiliki:

• Android Studio versi terbaru terinstal di komputer Anda.
• Pengetahuan dasar tentang Kotlin dan pengembangan Android.
• Koneksi internet untuk mengunduh dependencies.

Langkah 1: Setup Proyek Android Studio Baru

Mari kita mulai dengan membuat proyek Android Studio yang bersih.

1. Buka Android Studio.
2. Pilih “New Project”.
3. Pilih template “Empty Activity” dan klik “Next”.
4. Konfigurasi proyek Anda:

• Name: BottomNavDemoApp (atau nama lain sesuai keinginan)
• Package name: com.example.bottomnavdemoapp (sesuaikan)
• Save location: Pilih lokasi penyimpanan proyek.
• Language: Kotlin
• Minimum SDK: Pilih API 21 atau yang lebih tinggi (disarankan).

Klik “Finish”. Tunggu Android Studio selesai menyiapkan proyek.

Langkah 2: Tambahkan Dependencies yang Dibutuhkan

Kita memerlukan beberapa library untuk Bottom Navigation dan Navigation Component.

Buka file build.gradle (Module :app) dan tambahkan baris-baris berikut di dalam blok dependencies:

dependencies {

// Kotlin

implementation(“androidx.core:core-ktx:1.12.0”)

implementation(“androidx.appcompat:appcompat:1.6.1”)

implementation(“com.google.android.material:material:1.11.0”)

implementation(“androidx.constraintlayout:constraintlayout:2.1.4”)

implementation(“androidx.navigation:navigation-fragment-ktx:2.7.7”)

implementation(“androidx.navigation:navigation-ui-ktx:2.7.7”)

// UI & Testing (default)

testImplementation(“junit:junit:4.13.2”)

androidTestImplementation(“androidx.test.ext:junit:1.1.5”)

androidTestImplementation(“androidx.test.espresso:espresso-core:3.5.1”)

}

Setelah menambahkan dependencies, klik “Sync Now” yang muncul di bagian atas file Gradle Anda.

Langkah 3: Desain Menu Bottom Navigation

Bottom Navigation menggunakan file XML menu untuk menentukan item-item yang akan ditampilkan. Mari buat file menu baru.

1. Klik kanan pada folder res.
2. Pilih “New” -> “Android Resource File”.
3. Isi detail berikut:

• File name: bottom_nav_menu
• Resource type: Menu
• Root element: menu

Klik “OK”.

Sekarang, edit file bottom_nav_menu.xml dengan kode berikut:

res/menu/bottom_nav_menu.xml

<?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_black_24dp”

android:title=”Home” />

<item

android:id=”@+id/dashboardFragment”

android:icon=”@drawable/ic_dashboard_black_24dp”

android:title=”Dashboard” />

<item

android:id=”@+id/notificationsFragment”

android:icon=”@drawable/ic_notifications_black_24dp”

android:title=”Notifications” />

</menu>

Penting: Anda perlu membuat drawable icon (ic_home_black_24dp, ic_dashboard_black_24dp, ic_notifications_black_24dp). Android Studio memiliki tool untuk ini:

1. Klik kanan pada folder res/drawable.
2. Pilih “New” -> “Vector Asset”.
3. Klik pada “Clip Art” dan cari icon yang relevan (misalnya “home”, “dashboard”, “notifications”).
4. Pilih icon, atur namanya, dan klik “Next” -> “Finish”. Ulangi untuk setiap icon.

Langkah 4: Implementasi Layout di MainActivity

Selanjutnya, kita akan menambahkan BottomNavigationView ke layout utama aplikasi (activity_main.xml) dan juga FragmentContainerView yang akan menampung fragment-fragment yang berbeda.

Buka file res/layout/activity_main.xml dan ganti isinya dengan kode berikut:

res/layout/activity_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>

<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width=”match_parent”

android:layout_height=”match_parent”

tools:context=”.MainActivity”>

<androidx.fragment.app.FragmentContainerView

android:id=”@+id/nav_host_fragment”

android:name=”androidx.navigation.fragment.NavHostFragment”

android:layout_width=”0dp”

android:layout_height=”0dp”

app:defaultNavHost=”true”

app:layout_constraintBottom_toTopOf=”@+id/bottom_navigation”

app:layout_constraintEnd_toEndOf=”parent”

app:layout_constraintStart_toStartOf=”parent”

app:layout_constraintTop_toTopOf=”parent”

app:navGraph=”@navigation/nav_graph” />

<com.google.android.material.bottomnavigation.BottomNavigationView

android:id=”@+id/bottom_navigation”

android:layout_width=”0dp”

android:layout_height=”wrap_content”

android:background=”?android:attr/windowBackground”

app:layout_constraintBottom_toBottomOf=”parent”

app:layout_constraintLeft_toLeftOf=”parent”

app:layout_constraintRight_toRightOf=”parent”

app:menu=”@menu/bottom_nav_menu” />

</androidx.constraintlayout.widget.ConstraintLayout>

Perhatikan atribut app:navGraph="@navigation/nav_graph" pada FragmentContainerView. Kita akan membuat file nav_graph.xml di langkah selanjutnya.

Langkah 5: Membuat Fragment-Fragment Dummy

Untuk setiap item di Bottom Navigation, kita memerlukan fragment yang berbeda. Mari buat tiga fragment dummy sederhana.

1. Klik kanan pada package aplikasi Anda (misalnya com.example.bottomnavdemoapp).
2. Pilih “New” -> “Fragment” -> “Fragment (Blank)”.
3. Buat fragment pertama:

• Fragment Name: HomeFragment
• Layout File Name: fragment_home
• Biarkan lainnya default. Klik “Finish”.

Ulangi proses ini untuk DashboardFragment dan NotificationsFragment.

Sekarang, kita bisa sedikit memodifikasi layout masing-masing fragment agar ada teks yang jelas.

res/layout/fragment_home.xml

<?xml version=”1.0″ encoding=”utf-8″?>

<FrameLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

tools:context=”.HomeFragment”>

<TextView

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_gravity=”center”

android:text=”Home Fragment”

android:textSize=”24sp” />

</FrameLayout>

Lakukan hal yang sama untuk fragment_dashboard.xml dan fragment_notifications.xml, ganti teks “Home Fragment” menjadi “Dashboard Fragment” dan “Notifications Fragment” masing-masing.

Langkah 6: Membuat Navigasi Graf

Android Navigation Component memungkinkan kita mendefinisikan semua tujuan navigasi (fragment) dan jalur antar mereka dalam satu file XML, yaitu navigasi graf.

1. Klik kanan pada folder res.
2. Pilih “New” -> “Android Resource File”.
3. Isi detail berikut:

• File name: nav_graph
• Resource type: Navigation
• Root element: navigation

Klik “OK”.

Sekarang, tambahkan fragment-fragment yang sudah kita buat ke dalam nav_graph.xml. Anda bisa menggunakan Design Editor atau langsung mengedit XML.

res/navigation/nav_graph.xml

<?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/nav_graph”

app:startDestination=”@id/homeFragment”>

<fragment

android:id=”@+id/homeFragment”

android:name=”com.example.bottomnavdemoapp.HomeFragment”

android:label=”fragment_home” tools:layout=”@layout/fragment_home” />

<fragment

android:id=”@+id/dashboardFragment”

android:name=”com.example.bottomnavdemoapp.DashboardFragment”

android:label=”fragment_dashboard” tools:layout=”@layout/fragment_dashboard” />

<fragment

android:id=”@+id/notificationsFragment”

android:name=”com.example.bottomnavdemoapp.NotificationsFragment”

android:label=”fragment_notifications” tools:layout=”@layout/fragment_notifications” />

</navigation>

Penting: Pastikan android:id untuk setiap fragment di nav_graph.xml sama persis dengan android:id dari item menu di bottom_nav_menu.xml. Ini adalah cara Navigation Component menghubungkan Bottom Navigation dengan fragment yang sesuai.

Langkah 7: Menghubungkan Navigasi Graf dengan Bottom Navigation di MainActivity

Sekarang, kita akan menulis kode Kotlin di MainActivity.kt untuk menghubungkan BottomNavigationView dengan NavController dari Navigation Component.

Buka file app/java/com.example.bottomnavdemoapp/MainActivity.kt dan ganti isinya dengan kode berikut:

app/java/com.example.bottomnavdemoapp/MainActivity.kt

package com.example.bottomnavdemoapp

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import androidx.navigation.NavController

import androidx.navigation.fragment.NavHostFragment

import androidx.navigation.ui.setupWithNavController

import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {

private lateinit var navController: NavController

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val navHostFragment = supportFragmentManager

.findFragmentById(R.id.nav_host_fragment) as NavHostFragment

navController = navHostFragment.navController

val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom_navigation)

bottomNavigationView.setupWithNavController(navController)

}

}

Penjelasan Kode:

• Kita mendapatkan referensi ke NavHostFragment (yang menampung navigasi graf kita) dan mengekstrak NavController darinya.
• Kemudian, kita mendapatkan referensi ke BottomNavigationView.
• Yang paling penting adalah baris bottomNavigationView.setupWithNavController(navController). Ini adalah metode ekstensi dari Navigation Component yang secara otomatis menghubungkan item-item di Bottom Navigation dengan tujuan fragment yang sesuai di navigasi graf. Ini sangat mempermudah pengelolaan navigasi, karena kita tidak perlu menulis listener klik manual untuk setiap item.

Jalankan Aplikasi Anda!

Sekarang, Anda bisa menjalankan aplikasi di emulator atau perangkat fisik. Anda akan melihat Bottom Navigation Bar di bagian bawah layar. Ketika Anda mengklik setiap item menu, fragment di bagian atas akan berubah sesuai dengan pilihan Anda. Selamat, Bottom Navigation Anda sudah berfungsi!

Pengalaman dan Pertimbangan Praktis

Setelah berhasil mengimplementasikan Bottom Navigation, ada beberapa hal penting yang perlu developer pertimbangkan dalam konteks dunia nyata:

• Jumlah Item: Hindari terlalu banyak item di Bottom Navigation. Material Design menyarankan 3 hingga 5 item. Lebih dari itu bisa membuat navigasi terlalu ramai dan sulit dibaca. Jika Anda punya lebih banyak tujuan, pertimbangkan menggunakan Navigation Drawer atau tab.
• Konsistensi: Pastikan ikon dan judul item konsisten dengan fungsi fragment yang dituju. Pengguna harus bisa mengerti apa yang akan terjadi saat mereka mengetuk item tertentu.
• Persistensi State Fragment: Secara default, Navigation Component akan mengganti fragment saat Anda berpindah. Jika Anda ingin menjaga state fragment saat kembali (misalnya, posisi scroll daftar atau input teks), Anda mungkin perlu menggunakan strategi navigasi khusus atau mengelola state secara manual, seperti menggunakan ViewModel. Untuk sebagian besar kasus, Navigation Component sudah cukup baik.
• Penggunaan View Binding: Untuk kode yang lebih bersih dan aman dari NullPointerException, sangat disarankan menggunakan View Binding daripada findViewById. Caranya, tambahkan buildFeatures { viewBinding true } di blok android file build.gradle (Module :app), lalu Anda bisa mengakses view seperti binding.bottomNavigation setelah menginisialisasi binding.
• Deep Linking: Navigation Component juga mendukung deep linking, memungkinkan Anda mengarahkan pengguna langsung ke fragment tertentu dari tautan eksternal atau notifikasi. Ini adalah fitur yang sangat powerful untuk meningkatkan UX.
• Performance: Dengan penggunaan fragment, pastikan Anda mengelola siklus hidup fragment dengan benar. Hindari operasi berat di onCreateView atau onViewCreated yang bisa memperlambat transisi.
• Accessibility: Pastikan setiap item memiliki contentDescription yang sesuai agar aplikasi lebih mudah diakses oleh pengguna dengan kebutuhan khusus.

Masalah yang Sering Terjadi

Berikut adalah beberapa masalah umum yang mungkin Anda temui saat mengimplementasikan Bottom Navigation dan cara mengatasinya:

1. Bottom Navigation Tidak Muncul atau Kosong

Gejala: Bar navigasi di bawah layar tidak terlihat sama sekali atau terlihat, tetapi tanpa ikon dan teks.

Penyebab:

• Dependencies Hilang: Anda lupa menambahkan implementation("com.google.android.material:material:...") atau tidak sync Gradle setelah menambahkannya.
• Layout XML Salah: Ada kesalahan pada file activity_main.xml (misalnya, ID salah, constraint layout salah, atau atribut app:menu tidak mengarah ke menu yang benar).

Solusi:

• Periksa kembali file build.gradle (Module :app) dan pastikan semua dependencies Material Design dan Navigation Component sudah ada dan versi terbaru. Lakukan “Sync Project with Gradle Files”.
• Verifikasi activity_main.xml, pastikan BottomNavigationView memiliki ID yang benar (@+id/bottom_navigation) dan atribut app:menu="@menu/bottom_nav_menu" mengarah ke file menu yang sudah Anda buat.

2. Fragment Tidak Berpindah Saat Item Diklik

Gejala: Anda mengklik item di Bottom Navigation, tetapi fragment di atas tidak berubah atau tetap menampilkan fragment awal.

Penyebab:

• ID Menu dan Nav Graph Tidak Cocok: ID item di bottom_nav_menu.xml tidak sama dengan ID fragment di nav_graph.xml.
• NavController Tidak Terhubung: Baris bottomNavigationView.setupWithNavController(navController) tidak terpanggil atau navController salah diinisialisasi.
• app:navGraph Salah: Atribut app:navGraph pada FragmentContainerView di activity_main.xml mengarah ke navigasi graf yang salah atau tidak ada.

Solusi:

• Cek ID: Pastikan android:id di setiap <item> di bottom_nav_menu.xml sama persis dengan android:id di setiap <fragment> di nav_graph.xml.
• Debug MainActivity: Pastikan navHostFragment dan navController berhasil diinisialisasi dan setupWithNavController terpanggil tanpa error.
• Verifikasi navGraph: Pastikan FragmentContainerView di activity_main.xml memiliki app:navGraph="@navigation/nav_graph" yang benar.

3. Crash Karena NullPointerException Saat Akses View

Gejala: Aplikasi crash dengan NullPointerException ketika mencoba mengakses view seperti bottomNavigationView atau navHostFragment.

Penyebab:

• View Belum Diinflate: Anda mencoba mengakses view sebelum setContentView(R.layout.activity_main) dipanggil.
• ID View Salah: ID yang digunakan di findViewById() tidak cocok dengan ID view di layout XML.
• Casting Salah: Hasil dari findFragmentById tidak bisa dicasting ke NavHostFragment.

Solusi:

• Pastikan semua inisialisasi view dilakukan setelah setContentView.
• Periksa kembali ID view di XML dan di kode Kotlin Anda. Gunakan ID yang sama persis.
• Pastikan FragmentContainerView di activity_main.xml memiliki android:name="androidx.navigation.fragment.NavHostFragment".

4. Back Stack Tidak Berfungsi Sesuai Harapan

Gejala: Saat menekan tombol Back, aplikasi keluar bukan kembali ke fragment sebelumnya di Bottom Navigation, atau urutan navigasi terasa aneh.

Penyebab: Defaultnya, setupWithNavController akan menangani back stack untuk setiap tab. Namun, terkadang interaksi dengan navigasi lain (misalnya dari fragment di dalam tab) bisa mengubah perilaku.

Solusi:

• Secara default, Navigation Component dan Bottom Navigation sudah menangani back stack per tab dengan cukup baik. Pastikan Anda tidak secara manual mengintervensi back stack dengan popBackStack() atau navigateUp() tanpa memahami implikasinya.
• Jika Anda membutuhkan perilaku yang sangat spesifik, Anda mungkin perlu mengimplementasikan listener navigasi kustom atau secara manual mengelola onBackPressedDispatcher.

FAQ

Apa itu Bottom Navigation Bar di Android?

Bottom Navigation Bar adalah komponen UI di aplikasi Android yang menampilkan antara tiga hingga lima tujuan level atas di bagian bawah layar. Ini memungkinkan pengguna untuk dengan mudah beralih antar bagian utama aplikasi dengan satu ketukan.

Kapan sebaiknya menggunakan Bottom Navigation daripada Navigation Drawer?

Gunakan Bottom Navigation jika aplikasi Anda memiliki 3-5 tujuan level atas yang penting dan sering diakses. Gunakan Navigation Drawer jika Anda memiliki lebih dari 5 tujuan, atau jika tujuan-tujuan tersebut tidak memiliki prioritas yang sama tingginya, atau jika ada hierarki navigasi yang lebih dalam.

Bisakah saya menyesuaikan tampilan Bottom Navigation Bar?

Ya, Anda bisa menyesuaikan warna latar belakang, warna ikon, warna teks, dan bahkan font menggunakan tema aplikasi (styles.xml) dan atribut Material Design di XML atau secara terprogram di Kotlin. Anda juga bisa membuat custom selector drawable untuk ikon yang berubah saat dipilih.

Apakah Navigation Component adalah satu-satunya cara untuk mengimplementasikan Bottom Navigation?

Tidak, Anda bisa mengimplementasikannya secara manual dengan FragmentManager dan FragmentTransaction. Namun, Navigation Component sangat direkomendasikan karena menyederhanakan pengelolaan navigasi, back stack, transisi, deep linking, dan integrasi dengan Bottom Navigation secara signifikan, mengurangi boilerplate code, dan mencegah banyak error umum.

Bagaimana cara menangani badge notifikasi pada item Bottom Navigation?

BottomNavigationView memiliki fitur badge bawaan. Anda bisa mendapatkan objek BadgeDrawable dari bottomNavigationView.getOrCreateBadge(R.id.your_menu_item_id) dan kemudian mengaturnya agar terlihat, menyembunyikannya, atau menampilkan angka di dalamnya sesuai kebutuhan aplikasi Anda.

Kesimpulan

Membangun Bottom Navigation Bar dengan Kotlin dan Android Jetpack Navigation Component adalah cara yang modern dan efisien untuk menyediakan navigasi intuitif di aplikasi Android Anda. Dengan mengikuti panduan langkah demi langkah ini, Anda tidak hanya belajar cara mengimplementasikan komponen ini, tetapi juga memahami praktik terbaik dan potensi masalah yang mungkin muncul.

Kini Anda memiliki dasar yang kuat untuk menciptakan pengalaman pengguna yang mulus dan profesional. Teruslah bereksperimen, sesuaikan tampilan, dan integrasikan Bottom Navigation ke dalam proyek-proyek Anda untuk meningkatkan fungsionalitas dan estetika aplikasi.

TAGS: Android, Kotlin, Bottom Navigation, Android Development, UI/UX, Navigation Component, Mobile Development, Tutorial

---

Baca Juga

• Panduan Lengkap Belajar Coding untuk Pemula hingga Profesional