Bottom Navigation: Grundlagen, BottomNavigationView und TabView

Was ist Bottom Navigation?

Bottom Navigation ist ein Navigationsmuster, bei dem die Hauptapp-Abschnitte über ein Bedienfeld am unteren Bildschirmrand zugänglich sind. Dieses Muster ist aufgrund seiner Einhandbedienung zum Mobilstandard geworden. Im Gegensatz zu einem seitlichen Menü (Drawer) ist Bottom Navigation immer sichtbar und erfordert keine zusätzlichen Gesten zum Öffnen.

Material Design 3 (2026) definiert die Navigation Bar als eine Komponente mit drei Zuständen: default (Symbol + Beschriftung), labeled (vergrößerte Beschriftung, eine aktive Registerkarte) und unlabeled (nur Symbole). Google empfiehlt die Navigation Bar für Apps mit 3–5 gleichwertigen Abschnitten. Für 6+ Abschnitte — Navigation Drawer. In iOS SwiftUI verwendet TabView automatisch ein unteres Bedienfeld mit Systemstil.

Eine Studie von UX Movement (2025) zeigte, dass Bottom Navigation die Aufgabenerledigungszeit um 27% im Vergleich zu einem seitlichen Menü verbessert, da der Benutzer alle verfügbaren Abschnitte ohne zusätzliche Aktionen sieht. Die Anzahl der Fehltipps sinkt um 34% dank großer Berührungsziele (mindestens 48x48 dp auf Android, 44x44 pt auf iOS).

BottomNavigationView in Android (Material 3)

BottomNavigationView in Android ist eine Komponente aus der Material 3 Library (com.google.android.material.navigation.NavigationBarView). Sie ersetzte die veraltete BottomNavigationView aus Material 2 und fügte Unterstützung für Material You dynamische Farben, animierten Indikator der aktiven Registerkarte und integrierte Badges hinzu. Die Komponente wird über ein XML-Menü konfiguriert und ist vollständig mit dem Navigation Component kompatibel.

// Aktivität mit BottomNavigationView und 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 Navigationssynchronisation
        navView.setupWithNavController(navController)

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

// XML-Menü für 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="Start" />
//   <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="Profil" />
// </menu>

Material 3 NavigationBarView unterstützt drei labelVisibilityMode-Modi: LABEL_VISIBILITY_AUTO (Standard — Beschriftung wird für die aktive Registerkarte angezeigt), LABEL_VISIBILITY_LABELED (Beschriftungen für alle), LABEL_VISIBILITY_UNLABELED (nur Symbole). Der animierte Indikator der aktiven Registerkarte wird über itemActiveIndicatorStyle mit einem benutzerdefinierten Ripple-Effekt konfiguriert.

TabView in SwiftUI für iOS

TabView ist ein integrierter SwiftUI-Container zum Erstellen einer unteren Navigation. Jede Registerkarte wird mit dem .tabItem-Modifikator mit einem Symbol und Text definiert. TabView erstellt automatisch einen UITabBarController unter der Haube und unterstützt alle nativen Bedienfeldfunktionen: Badges, Badge-Farbe, Wechselanimation und Dynamic Type-Anpassung.

import SwiftUI

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

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

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

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

TabView unterstützt den .badge-Modifikator (iOS 15+), der Int (numerisches Badge) oder String (Text-Badge) akzeptiert. Die Badge-Farbe kann über .badgeProminence(.increased) geändert werden — macht das Badge heller. Die Registerkarten-Wechselanimation wird über .tabViewStyle(.automatic) oder benutzerdefinierte Stile konfiguriert. Für die programmgesteuerte Wechselsteuerung wird @State mit selection verwendet.

Kombination von unterer und Stapelnavigation

Bottom Navigation wird selten allein verwendet — jede Registerkarte enthält normalerweise einen Stapelnavigator (NavigationView/NavigationStack in SwiftUI, NavHostFragment in Android). Diese Kombination bietet dem Benutzer sowohl schnellen Zugriff auf Abschnitte (Tab) als auch tiefgehende Navigation innerhalb jedes Abschnitts (Stack). Dies ist die Standardarchitektur für Produktions-Apps.

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

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

// Innerhalb von HomeView — Stapelnavigation
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 wird dieselbe Kombination über NavHostFragment für jede Registerkarte implementiert. Das Navigation Component automatisiert die Erstellung des Rückwärtsstapels für jede Registerkarte: beim Wechseln der Registerkarten bleibt der Stapelzustand erhalten, beim Zurückkehren wird er wiederhergestellt. Dies bietet eine nahtlose UX, wie bei Google-System-Apps (Play Market, YouTube).

Material 3: dynamische Farben und Animationen

Material 3 (Material You) führt eine wichtige Änderung bei Bottom Navigation ein — dynamische Farben, die aus dem Hintergrundbild des Benutzers generiert werden. Das System extrahiert dominierende Farben aus dem Hintergrundbild und erstellt eine Palette von 5 Schlüsseltönen. NavigationBarView wendet diese Farben automatisch an: die aktive Registerkarte erhält die Primärfarbe, inaktive — die onSurface-Variante.

Die Animation des Indikators der aktiven Registerkarte ist fließend geworden: beim Wechseln animiert der Indikator mit Interpolation zur neuen Registerkarte. Der Berührungs-Ripple-Effekt verwendet die Sekundärfarbe. Bottom Navigation in Material 3 unterstützt auch benutzerdefinierte Animationen über itemActiveIndicatorStyle — der Entwickler kann die Form (oval, rechteckig), Abstände und die Indikatorfarbe festlegen.

<!-- Stil des aktiven Indikators von 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-Empfehlungen für Bottom Navigation

Beim Entwerfen von Bottom Navigation sollte die Benutzerfreundlichkeitsforschung berücksichtigt werden. NN Group (2026): das untere Bedienfeld sollte mindestens 56 dp hoch sein, Berührungsziele — mindestens 48 dp. Beschriftungstext — maximal 12 Zeichen (Lateinisch) oder 8 Zeichen (Kyrillisch). Die aktive Registerkarte sollte sich nicht nur in der Farbe, sondern auch im Symbolzustand (gefüllt vs. umrissen) unterscheiden.

Material Design 3 empfiehlt die folgenden Muster: 4 Registerkarten — optimal für einfaches Scannen; ein "+"-Symbol in der Mitte (FloatingActionButton) — für die Hauptaktion; Badges — nur für Benutzeraktionszähler. Vermeiden: Bottom Navigation mit 2 Registerkarten (verwenden Sie stattdessen Tab Layout), dynamisches Ändern der Registerkartenreihenfolge, Ausblenden des Bedienfelds auf verschachtelten Bildschirmen.

• Höhe — mindestens 56 dp für bequemen Daumenreichweite
• Kontrast — aktive Registerkarte sollte unterscheidbar sein (Farbe + Symbolfüllung)
• Beschriftungen — kurz, 1-2 Wörter, ohne Abschneiden (nicht mehr als 12 Zeichen)
• Reihenfolge — fest, von am wichtigsten zu am wenigsten wichtig
• Zähler — nur für Benutzerbenachrichtigungen, nicht für Marketing