Bottom Navigation: dasar, BottomNavigationView dan TabView

Apa itu Bottom Navigation?

Bottom Navigation — pola navigasi di mana bagian utama aplikasi dapat diakses melalui panel di bagian bawah layar. Pola ini menjadi standar desain mobile karena kemudahan penggunaan dengan satu tangan. Tidak seperti menu samping (Drawer), Bottom Navigation selalu terlihat dan tidak memerlukan gerakan tambahan untuk membukanya.

Material Design 3 (2026) mendefinisikan Navigation Bar sebagai komponen dengan tiga keadaan: default (ikon + label), labeled (label diperbesar, satu tab aktif) dan unlabeled (hanya ikon). Google merekomendasikan Navigation Bar untuk aplikasi dengan 3–5 bagian setara. Untuk 6+ bagian — Navigation Drawer. Di iOS SwiftUI, TabView secara otomatis menggunakan panel bawah dengan gaya sistem.

Penelitian UX Movement (2025) menunjukkan: Bottom Navigation meningkatkan waktu penyelesaian tugas sebesar 27% dibandingkan menu geser, karena pengguna melihat semua bagian yang tersedia tanpa tindakan tambahan. Jumlah ketukan salah berkurang 34% berkat target sentuh besar (minimal 48x48 dp di Android, 44x44 pt di iOS).

BottomNavigationView di Android (Material 3)

BottomNavigationView di Android — komponen dari Material 3 Library (com.google.android.material.navigation.NavigationBarView). Komponen ini menggantikan BottomNavigationView lama dari Material 2 dan menambahkan dukungan untuk warna dinamis Material You, indikator tab aktif yang dianimasikan, dan lencana bawaan. Komponen dikonfigurasi melalui menu XML dan sepenuhnya kompatibel dengan Navigation Component.

// Aktivitas dengan BottomNavigationView dan NavHostFragment
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navView = findViewById<NavigationBarView>(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        // Sinkronisasi navigasi otomatis
        navView.setupWithNavController(navController)

        // Konfigurasi lencana
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// Menu XML untuk Bottom Navigation (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/navigation_home"
//     android:icon="@drawable/ic_home"
//     android:title="Beranda" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Chat" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Profil" />
// </menu>

Material 3 NavigationBarView mendukung tiga mode labelVisibilityMode: LABEL_VISIBILITY_AUTO (default — label ditampilkan untuk tab aktif), LABEL_VISIBILITY_LABELED (label di semua), LABEL_VISIBILITY_UNLABELED (hanya ikon). Indikator tab aktif yang dianimasikan dikonfigurasi melalui itemActiveIndicatorStyle dengan efek ripple kustom.

TabView di SwiftUI untuk iOS

TabView — kontainer bawaan SwiftUI untuk membuat navigasi bawah. Setiap tab didefinisikan dengan pengubah .tabItem dengan ikon dan teks. TabView secara otomatis membuat UITabBarController di balik layar dan mendukung semua fungsi panel asli: lencana, warna lencana, animasi perpindahan dan adaptasi ke Dynamic Type.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("Beranda", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("Cari", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("Notifikasi", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("Profil", systemImage: "person.circle.fill")
                }
        }
    }
}

TabView mendukung pengubah .badge (iOS 15+), yang menerima Int (lencana numerik) atau String (tekstual). Warna lencana dapat diubah melalui .badgeProminence(.increased) — membuat lencana lebih terang. Animasi perpindahan tab dikonfigurasi melalui .tabViewStyle(.automatic) atau gaya kustom. Untuk kontrol perpindahan terprogram digunakan @State dengan selection.

Kombinasi navigasi bawah dan bertumpuk

Bottom Navigation jarang digunakan sendiri — setiap tab biasanya berisi navigator bertumpuk (NavigationView/NavigationStack di SwiftUI, NavHostFragment di Android). Kombinasi ini memberikan pengguna akses cepat ke bagian (Tab) dan navigasi mendalam di dalam setiap bagian (Stack). Ini adalah arsitektur standar untuk aplikasi produksi.

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("Beranda", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Cari", systemImage: "magnifyingglass")
            }
        }
    }
}

// Di dalam HomeView — navigasi bertumpuk
struct HomeView: View {
    var body: some View {
        List(items) { item in
            NavigationLink("\(item.title)", value: item)
        }
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

Di Android kombinasi yang sama diimplementasikan melalui NavHostFragment untuk setiap tab. Navigation Component mengotomatiskan pembuatan back stack untuk setiap tab: saat berpindah tab, status tumpukan disimpan, saat kembali — dipulihkan. Ini memberikan UX yang mulus, seperti di aplikasi sistem Google (Play Market, YouTube).

Material 3: warna dinamis dan animasi

Material 3 (Material You) membawa perubahan kunci pada Bottom Navigation — warna dinamis yang dihasilkan dari wallpaper pengguna. Sistem mengekstrak warna dominan dari wallpaper dan membuat palet dari 5 nada kunci. NavigationBarView secara otomatis menerapkan warna-warna ini: tab aktif menerima warna primary, yang tidak aktif — onSurface variant.

Animasi indikator tab aktif menjadi halus: saat berpindah, indikator bergerak secara animasi ke tab baru dengan interpolasi. Efek ripple pada sentuhan menggunakan warna secondary. Bottom Navigation di Material 3 juga mendukung animasi kustom melalui itemActiveIndicatorStyle — pengembang dapat mengatur bentuk (oval, persegi panjang), margin, dan warna indikator.

<!-- Gaya indikator aktif NavigationBarView -->
<style name="Widget.MyApp.NavigationBarView.ActiveIndicator"
    parent="Widget.Material3.NavigationBarView.ActiveIndicator">
    <item name="android:height">32dp</item>
    <item name="android:width">64dp</item>
    <item name="android:marginHorizontal">8dp</item>
    <item name="shapeAppearance">
        @style/ShapeAppearance.Material3.Corner.Full
    </item>
    <item name="color">@color/primary_container</item>
</style>

Rekomendasi UX untuk navigasi bawah

Saat merancang Bottom Navigation harus mempertimbangkan penelitian kegunaan. NN Group (2026): panel bawah harus memiliki tinggi minimal 56 dp, target sentuh — setidaknya 48 dp. Teks label — maksimal 12 karakter (Latin) atau 8 karakter (Sirilik). Tab aktif harus berbeda tidak hanya dalam warna, tetapi juga dalam status ikon (filled vs outlined).

Material Design 3 merekomendasikan pola berikut: 4 tab — optimal untuk pemindaian tenang; simbol „+“ di tengah (FloatingActionButton) — untuk tindakan utama; lencana — hanya untuk penghitung tindakan pengguna. Tidak disarankan: menggunakan Bottom Navigation dengan 2 tab (lebih baik Tab Layout), mengubah urutan tab secara dinamis, menyembunyikan panel di layar bersarang.

• Tinggi — minimal 56 dp untuk sentuhan nyaman dengan ibu jari
• Kontras — tab aktif harus dapat dibedakan (warna + pengisian ikon)
• Label — pendek, 1-2 kata, tanpa pemotongan (tidak lebih dari 12 karakter)
• Urutan — tetap, dari yang paling penting ke kurang penting
• Penghitung — hanya untuk notifikasi pengguna, bukan untuk pemasaran