Tab Bar — apa itu, panel tab di aplikasi seluler

Apa itu Tab Bar?

Tab Bar (panel tab) — elemen antarmuka grafis yang terletak di bagian bawah layar aplikasi seluler. Ini menyediakan akses cepat ke 3–5 bagian utama aplikasi. Setiap bagian diwakili oleh ikon dan label teks. Pengguna mengetuk tab untuk beralih ke bagian yang sesuai. Tab Bar tetap terlihat di semua layar dalam setiap bagian, menyediakan titik masuk yang konstan.

Apple merekomendasikan penggunaan Tab Bar untuk bagian aplikasi dengan tingkat kepentingan yang sama. Human Interface Guidelines (2026) menyatakan: «Tab Bar menampilkan 3–5 tab. Jika diperlukan lebih — tab terakhir menjadi titik «Lainnya» dengan sisanya di dalam». Material Design Google (2026) merekomendasikan Bottom Navigation untuk tujuan yang sama — 3–5 titik, tab aktif ditandai dengan warna dan animasi.

Tidak seperti tab atas (Top Tab Bar), panel bawah lebih nyaman untuk dioperasikan dengan satu tangan — ibu jari secara alami mencapai bagian bawah layar. Penelitian Nielsen Norman Group (2025) menunjukkan bahwa navigasi bawah mengurangi waktu penyelesaian tugas sebesar 22% dibandingkan dengan navigasi atas pada ponsel cerdas dengan diagonal mulai dari 6 inci.

UITabBarController di iOS

UITabBarController — pengontrol bawaan iOS untuk mengatur navigasi melalui tab. Setiap tab mengelola set layarnya sendiri, biasanya diatur dalam UINavigationController. UITabBarController secara otomatis membuat Tab Bar di bagian bawah layar dengan latar belakang semi-transparan sistem dan animasi saat peralihan.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeViewController()
        let searchVC = SearchViewController()
        let profileVC = ProfileViewController()

        homeVC.tabBarItem = UITabBarItem(
            title: "Beranda",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Cari",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "Profil",
            image: UIImage(systemName: "person.circle.fill"),
            tag: 2
        )

        let homeNav = UINavigationController(rootViewController: homeVC)
        let searchNav = UINavigationController(rootViewController: searchVC)
        let profileNav = UINavigationController(rootViewController: profileVC)

        viewControllers = [homeNav, searchNav, profileNav]
    }
}

Setiap tab dalam contoh berisi UINavigationController, yang memungkinkan penggunaan navigasi bertumpuk di dalam bagian. tabBarItem mengonfigurasi ikon, judul, dan lencana. Sistem secara otomatis menerapkan gaya SF Symbols untuk ikon — simbol standar Apple dengan dukungan tipe dinamis dan multiwarna.

BottomNavigationView di Android

BottomNavigationView — komponen Android dari Material Design Library yang mengimplementasikan panel navigasi bawah. Di Android 13+ digunakan NavigationBarView — penerusnya dengan animasi yang ditingkatkan dan perilaku adaptif. BottomNavigationView mengikuti spesifikasi Material Design 3 (Material You) dan mendukung tema aplikasi, warna dinamis, dan animasi saat peralihan.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navView: NavigationBarView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // Menghubungkan BottomNavigation ke NavController
        navView.setupWithNavController(navController)

        // Konfigurasi lencana pada tab notifikasi
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

Komponen BottomNavigationView mendukung Material Design 3 dengan tiga gaya: default (label + ikon), labeled (label diperbesar), dan unlabeled (hanya ikon). Metode setupWithNavController menghubungkan panel ke Navigation Component, secara otomatis memperbarui tab aktif saat layar berubah. Lencana dibuat melalui getOrCreateBadge dan mendukung indikator numerik dan titik.

Lencana dan indikator pada Tab Bar

Lencana — indikator numerik atau titik pada ikon tab yang menampilkan jumlah notifikasi, pesan baru, atau tugas. Di iOS lencana diatur melalui properti badgeValue pada UITabBarItem. Di Android lencana dikelola melalui BadgeDrawable (Material 3) atau getOrCreateBadge di NavigationBarView.

Lencana adalah alat keterlibatan yang kuat: penelitian Localytics (2025) menunjukkan bahwa aplikasi dengan lencana memiliki retention 18% lebih tinggi pada hari ke-7. Namun, penyalahgunaan lencana (lebih dari 3 sekaligus) menurunkan CTR sebesar 12%. Apple dan Google merekomendasikan menampilkan lencana hanya untuk notifikasi yang relevan dan meresetnya saat membuka bagian.

Kustomisasi Tab Bar: ikon, warna, animasi

Kedua platform menawarkan kemungkinan kustomisasi yang luas untuk Tab Bar. Di iOS Anda dapat mengubah warna latar belakang, warna tint tab aktif, font label, dan menambahkan ikon kustom melalui SF Symbols atau aset sendiri. Di Android kustomisasi mencakup gaya Material 3, animasi peralihan, efek ripple, dan warna dinamis berdasarkan wallpaper.

// Kustomisasi Tab Bar di iOS
let appearance = UITabBarAppearance()
appearance.backgroundColor = .systemBackground
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    .foregroundColor: UIColor.secondaryLabel,
    .font: UIFont.systemFont(ofSize: 11)
]
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
    .foregroundColor: UIColor.systemBlue,
    .font: UIFont.boldSystemFont(ofSize: 12)
]
tabBar.standardAppearance = appearance.

Di Android kustomisasi BottomNavigationView dilakukan melalui atribut XML atau secara terprogram. Material 3 memperkenalkan konsep warna dinamis: palet dihasilkan dari wallpaper pengguna dan diterapkan secara otomatis ke komponen. Pengembang dapat menimpa warna melalui tema, mengatur animasi garis bawah kustom (indicator), dan mengonfigurasi efek ripple.

// Kustomisasi BottomNavigationView di Android
val navView = findViewById<NavigationBarView>(R.id.nav_view)

with (navView) {
    labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
    itemActiveIndicatorStyle = R.style.CustomIndicator
    itemRippleColor = ColorStateList.valueOf(
        Color.valueOf("#FFE0B2")
    )
}

// Di XML: app:menu="@menu/bottom_nav_menu"
// Di XML: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

Praktik terbaik navigasi bawah

Saat mendesain Tab Bar penting untuk mengikuti rekomendasi platform dan penelitian kegunaan. Apple HIG: tidak lebih dari 5 tab, teks ringkas, ikon semantik. Material Design: 3–5 titik, titik aktif ditandai, penghitung lencana tidak lebih dari 99. NN Group (2025): navigasi bawah harus tetap terlihat di semua layar bagian, jika tidak pengguna kehilangan konteks.

Kesalahan utama: 6+ tab (memaksa penggunaan «Lainnya» — mengurangi discoverability), perubahan urutan tab saat navigasi (membingungkan), menyembunyikan Tab Bar di layar bersarang (kehilangan jangkar navigasi). Praktik terbaik — urutan tetap, ikon seragam dan label teks, lencana hanya untuk tindakan pengguna (bukan untuk pemasaran).

• 3–5 tab — jumlah optimal untuk pemilihan cepat tanpa kelebihan beban
• Urutan tetap — tab harus stabil, tanpa penataan ulang dinamis
• Ikon + label — kedua elemen wajib untuk memahami bagian
• Tab aktif — harus berbeda secara visual dalam warna, ikon, atau animasi
• Lencana — gunakan untuk notifikasi, reset saat membuka bagian