Bottom Navigation: basis, BottomNavigationView en TabView

Wat is Bottom Navigation?

Bottom Navigation — navigatiepatroon waarbij de hoofdsecties van de app toegankelijk zijn via een paneel onderaan het scherm. Dit patroon is de standaard geworden in mobiel ontwerp vanwege het gemak van bediening met één hand. In tegenstelling tot het zijmenu (Drawer) is Bottom Navigation altijd zichtbaar en vereist het geen extra gebaren om te openen.

Material Design 3 (2026) definieert Navigation Bar als een component met drie toestanden: default (pictogram + label), labeled (vergroot label, één actief tabblad) en unlabeled (alleen pictogrammen). Google beveelt Navigation Bar aan voor apps met 3–5 gelijkwaardige secties. Voor 6+ secties — Navigation Drawer. In iOS SwiftUI gebruikt TabView automatisch het onderste paneel met systeemstijl.

Onderzoek van UX Movement (2025) toonde aan: Bottom Navigation verbetert de taakuitvoeringstijd met 27% vergeleken met een uitschuifmenu, omdat de gebruiker alle beschikbare secties ziet zonder extra handelingen. Het aantal verkeerde tikken daalt met 34% dankzij grote tikdoelen (minimaal 48x48 dp op Android, 44x44 pt op iOS).

BottomNavigationView in Android (Material 3)

BottomNavigationView in Android — component uit Material 3 Library (com.google.android.material.navigation.NavigationBarView). Het heeft de verouderde BottomNavigationView uit Material 2 vervangen en ondersteuning toegevoegd voor dynamische Material You-kleuren, geanimeerde indicator van het actieve tabblad en ingebouwde badges. De component wordt geconfigureerd via een XML-menu en is volledig compatibel met Navigation Component.

// Activiteit met BottomNavigationView en 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)

        // Automatische navigatiesynchronisatie
        navView.setupWithNavController(navController)

        // Badge-configuratie
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// XML-menu voor 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="Home" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Chats" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Profiel" />
// </menu>

Material 3 NavigationBarView ondersteunt drie modi van labelVisibilityMode: LABEL_VISIBILITY_AUTO (standaard — label getoond voor actief tabblad), LABEL_VISIBILITY_LABELED (labels bij alle), LABEL_VISIBILITY_UNLABELED (alleen pictogrammen). De geanimeerde indicator van het actieve tabblad wordt geconfigureerd via itemActiveIndicatorStyle met een aangepast ripple-effect.

TabView in SwiftUI voor iOS

TabView — ingebouwde SwiftUI-container voor het maken van onderste navigatie. Elk tabblad wordt gedefinieerd door de .tabItem-modifier met pictogram en tekst. TabView maakt automatisch een UITabBarController onder de motorkap en ondersteunt alle functies van het native paneel: badges, badgekleur, schakelanimatie en aanpassing aan Dynamic Type.

import SwiftUI

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

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

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

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

TabView ondersteunt de .badge-modifier (iOS 15+), die Int (numerieke badge) of String (tekstuele) accepteert. De badgekleur kan worden gewijzigd via .badgeProminence(.increased) — maakt de badge helderder. De schakelanimatie van tabbladen wordt geconfigureerd via .tabViewStyle(.automatic) of aangepaste stijlen. Voor programmeerbare schakelbesturing wordt @State met selection gebruikt.

Combinatie van onderste en stacknavigatie

Bottom Navigation wordt zelden alleen gebruikt — elk tabblad bevat meestal een stacknavigator (NavigationView/NavigationStack in SwiftUI, NavHostFragment in Android). Deze combinatie geeft de gebruiker zowel snelle toegang tot secties (Tab) als diepgaande navigatie binnen elke sectie (Stack). Dit is de standaardarchitectuur voor productie-apps.

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

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

// Binnen HomeView — stacknavigatie
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)
        }
    }
}

In Android wordt dezelfde combinatie geïmplementeerd via NavHostFragment voor elk tabblad. Navigation Component automatiseert het aanmaken van een back stack voor elk tabblad: bij het schakelen van tabbladen wordt de stackstatus opgeslagen, bij terugkeer — hersteld. Dit zorgt voor een naadloze UX, zoals in systeemapps van Google (Play Market, YouTube).

Material 3: dynamische kleuren en animaties

Material 3 (Material You) brengt een belangrijke verandering in Bottom Navigation — dynamische kleuren gegenereerd uit de achtergrond van de gebruiker. Het systeem haalt dominante kleuren uit de wallpaper en creëert een palet van 5 belangrijke tinten. NavigationBarView past deze kleuren automatisch toe: het actieve tabblad krijgt de primary-kleur, inactieve — onSurface variant.

De animatie van de actieve tabindicator is vloeiend geworden: bij het schakelen beweegt de indicator geanimeerd naar het nieuwe tabblad met interpolatie. Het ripple-effect bij aanraking gebruikt de secondary-kleur. Bottom Navigation in Material 3 ondersteunt ook aangepaste animaties via itemActiveIndicatorStyle — de ontwikkelaar kan de vorm (ovaal, rechthoek), marges en kleur van de indicator instellen.

<!-- Stijl van actieve indicator 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>

UX-aanbevelingen voor onderste navigatie

Bij het ontwerpen van Bottom Navigation moeten gebruiksonderzoeken worden overwogen. NN Group (2026): het onderste paneel moet minimaal 56 dp hoog zijn, tikdoelen — minstens 48 dp. Labeltekst — maximaal 12 tekens (Latijn) of 8 tekens (Cyrillisch). Het actieve tabblad moet niet alleen verschillen in kleur, maar ook in pictogramstatus (filled vs outlined).

Material Design 3 beveelt de volgende patronen aan: 4 tabbladen — optimaal voor rustig scannen; „+“-teken in het midden (FloatingActionButton) — voor de primaire actie; badges — alleen voor tellers van gebruikersacties. Niet doen: Bottom Navigation gebruiken met 2 tabbladen (beter Tab Layout), de volgorde van tabbladen dynamisch wijzigen, het paneel verbergen op geneste schermen.

• Hoogte — minimaal 56 dp voor comfortabel tikken met de duim
• Contrast — actief tabblad moet herkenbaar zijn (kleur + pictogramvulling)
• Labels — kort, 1-2 woorden, zonder afkappen (niet meer dan 12 tekens)
• Volgorde — vast, van meest belangrijk naar minder belangrijk
• Tellers — alleen voor gebruikersmeldingen, niet voor marketing