Tab Bar — wat is het, tabbalk in mobiele apps

Wat is Tab Bar?

Tab Bar (tabbalk) — grafisch interface-element onderaan het scherm van een mobiele app. Het biedt snelle toegang tot 3–5 hoofdsecties van de app. Elke sectie wordt weergegeven door een pictogram en een tekstlabel. De gebruiker tikt op een tab om naar de betreffende sectie te schakelen. Tab Bar blijft zichtbaar op alle schermen binnen elke sectie en biedt een vast toegangspunt.

Apple adviseert Tab Bar te gebruiken voor appsecties van gelijk belang. Human Interface Guidelines (2026) stelt: «Tab Bar toont 3–5 tabs. Als er meer nodig zijn — wordt de laatste tab het punt «Meer» met de rest erin». Google Material Design (2026) beveelt Bottom Navigation aan voor dezelfde doeleinden — 3–5 punten, actieve tab gemarkeerd met kleur en animatie.

In tegenstelling tot bovenste tabs (Top Tab Bar) is de onderste balk handiger voor eenhandig gebruik — de duim bereikt op natuurlijke wijze de onderkant van het scherm. Onderzoek van Nielsen Norman Group (2025) toonde aan dat onderste navigatie de taakvoltooiingstijd met 22% verkort vergeleken met bovenste navigatie op smartphones met een diagonaal van 6 inch.

UITabBarController in iOS

UITabBarController — ingebouwde iOS-controller voor het organiseren van navigatie via tabs. Elke tab beheert zijn eigen set schermen, meestal georganiseerd in een UINavigationController. UITabBarController maakt automatisch een Tab Bar onderaan het scherm met systeem halfdoorzichtige achtergrond en animatie bij schakelen.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

        homeVC.tabBarItem = UITabBarItem(
            title: "Home",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Zoeken",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "Profiel",
            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]
    }
}

Elke tab in het voorbeeld bevat een UINavigationController, wat stacknavigatie binnen de sectie mogelijk maakt. tabBarItem configureert het pictogram, de titel en de badge. Het systeem past automatisch de SF Symbols-stijl toe voor pictogrammen — standaard Apple-symbolen met ondersteuning voor dynamisch type en meerkleurigheid.

BottomNavigationView in Android

BottomNavigationView — Android-component uit Material Design Library die de onderste navigatiebalk implementeert. In Android 13+ wordt NavigationBarView gebruikt — de opvolger met verbeterde animatie en adaptief gedrag. BottomNavigationView volgt de Material Design 3 (Material You) specificatie en ondersteunt app-thema, dynamische kleuren en animatie bij schakelen.

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)

        // BottomNavigation koppelen aan NavController
        navView.setupWithNavController(navController)

        // Badge configureren op meldingentab
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

Het BottomNavigationView-component ondersteunt Material Design 3 met drie stijlen: default (label + pictogram), labeled (vergroot label) en unlabeled (alleen pictogram). De methode setupWithNavController koppelt de balk aan Navigation Component en werkt automatisch de actieve tab bij bij schermwijziging. Badges worden gemaakt via getOrCreateBadge en ondersteunen numerieke en puntindicatoren.

Badges en indicatoren op Tab Bar

Badges — numerieke of puntindicatoren op tabpictogrammen die het aantal meldingen, nieuwe berichten of taken weergeven. Op iOS wordt een badge ingesteld via de eigenschap badgeValue op UITabBarItem. Op Android worden badges beheerd via BadgeDrawable (Material 3) of getOrCreateBadge in NavigationBarView.

Badges zijn een krachtig betrokkenheidsinstrument: onderzoek van Localytics (2025) toonde aan dat apps met badges een 18% hogere retention op dag 7 hebben. Overmatig gebruik van badges (meer dan 3 tegelijk) verlaagt echter de CTR met 12%. Apple en Google adviseren badges alleen voor relevante meldingen te tonen en te resetten bij het openen van de sectie.

Tab Bar aanpassen: pictogrammen, kleuren, animaties

Beide platforms bieden uitgebreide aanpassingsmogelijkheden voor Tab Bar. Op iOS kan de achtergrondkleur, tintkleur van de actieve tab, lettertype van het label worden gewijzigd en kunnen aangepaste pictogrammen worden toegevoegd via SF Symbols of eigen middelen. Op Android omvat aanpassing Material 3-stijlen, schakelanimatie, ripple-effect en dynamische kleuren op basis van achtergrond.

// Tab Bar aanpassen in 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.

Op Android wordt aanpassing van BottomNavigationView uitgevoerd via XML-attributen of programmatisch. Material 3 introduceert het concept van dynamische kleuren: het palet wordt gegenereerd uit de achtergrond van de gebruiker en automatisch toegepast op componenten. De ontwikkelaar kan kleuren overschrijven via thema, een aangepaste onderstrepingsanimatie (indicator) instellen en het ripple-effect configureren.

// BottomNavigationView aanpassen in 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")
    )
}

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

Beste praktijken voor onderste navigatie

Bij het ontwerpen van Tab Bar is het belangrijk de platformaanbevelingen en bruikbaarheidsonderzoeken te volgen. Apple HIG: niet meer dan 5 tabs, beknopte tekst, semantische pictogrammen. Material Design: 3–5 punten, actief punt gemarkeerd, badgeteller niet meer dan 99. NN Group (2025): onderste navigatie moet zichtbaar blijven op alle schermen van de sectie, anders verliest de gebruiker de context.

Belangrijkste fouten: 6+ tabs (dwingt gebruik van «Meer» — vermindert vindbaarheid), wijziging van tabvolgorde tijdens navigatie (desoriënteert), verbergen van Tab Bar op geneste schermen (verlies van navigatieanker). Beste praktijk — vaste volgorde, uniforme pictogrammen en tekstlabels, badges alleen voor gebruikersacties (niet voor marketing).

• 3–5 tabs — optimaal aantal voor snelle selectie zonder overbelasting
• Vaste volgorde — tabs moeten stabiel zijn, zonder dynamische herschikking
• Pictogram + label — beide elementen zijn verplicht voor begrip van de sectie
• Actieve tab — moet visueel verschillen in kleur, pictogram of animatie
• Badges — gebruik voor meldingen, reset bij openen van de sectie