Tab Bar — was ist das, Tab-Panel in mobilen Anwendungen

Was ist ein Tab Bar?

Ein Tab Bar (Registerkartenleiste) ist ein grafisches Oberflächenelement am unteren Bildschirmrand einer mobilen Anwendung. Es bietet schnellen Zugriff auf 3–5 Hauptbereiche der App. Jeder Bereich wird durch ein Symbol und eine Textbeschriftung dargestellt. Der Benutzer tippt auf einen Tab, um zum entsprechenden Bereich zu wechseln. Der Tab Bar bleibt auf allen Bildschirmen innerhalb jedes Bereichs sichtbar und bietet einen konstanten Einstiegspunkt.

Apple empfiehlt die Verwendung eines Tab Bar für Bereiche mit gleicher Bedeutung. Die Human Interface Guidelines (2026) geben an: „Der Tab Bar zeigt 3–5 Tabs an. Wenn mehr benötigt werden, wird der letzte Tab zu einem „Mehr“-Element, das die restlichen enthält.“ Google Material Design (2026) empfiehlt Bottom Navigation für denselben Zweck — 3–5 Elemente, wobei der aktive Tab durch Farbe und Animation hervorgehoben wird.

Im Gegensatz zur oberen Registerkartenleiste ist das untere Panel für die Einhandbedienung bequemer — der Daumen erreicht auf natürliche Weise den unteren Bildschirmrand. Eine Studie der Nielsen Norman Group (2025) zeigte, dass die untere Navigation die Aufgabenerledigungszeit um 22% im Vergleich zur oberen Navigation auf Smartphones mit 6 Zoll oder größerem Bildschirm reduziert.

UITabBarController in iOS

UITabBarController ist ein eingebauter iOS-Controller zur Organisation der Navigation über Tabs. Jeder Tab verwaltet seinen eigenen Satz von Bildschirmen, die normalerweise in einem UINavigationController organisiert sind. UITabBarController erstellt automatisch einen Tab Bar am unteren Bildschirmrand mit einem systemischen halbtransparenten Hintergrund und Wechselanimation.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

        homeVC.tabBarItem = UITabBarItem(
            title: "Startseite",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Suche",
            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]
    }
}

Jeder Tab im Beispiel enthält einen UINavigationController, was eine Stack-Navigation innerhalb des Bereichs ermöglicht. Der tabBarItem konfiguriert das Symbol, den Titel und das Badge. Das System wendet automatisch den SF Symbols-Stil für Symbole an — standard Apple-Symbole mit Unterstützung für dynamischen Typ und Mehrfarbigkeit.

BottomNavigationView in Android

BottomNavigationView ist eine Android-Komponente aus der Material Design Library, die das untere Navigationspanel implementiert. In Android 13+ wird NavigationBarView verwendet — sein Nachfolger mit verbesserter Animation und adaptivem Verhalten. BottomNavigationView folgt der Material Design 3 (Material You) Spezifikation und unterstützt App-Theming, dynamische Farben und Wechselanimationen.

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 an NavController binden
        navView.setupWithNavController(navController)

        // Badge auf dem Benachrichtigungs-Tab einrichten
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

Die BottomNavigationView-Komponente unterstützt Material Design 3 mit drei Stilen: default (Beschriftung + Symbol), labeled (größere Beschriftung) und unlabeled (nur Symbol). Die Methode setupWithNavController bindet das Panel an die Navigation Component und aktualisiert automatisch den aktiven Tab beim Bildschirmwechsel. Badges werden über getOrCreateBadge erstellt und unterstützen numerische und Punkt-Indikatoren.

Badges und Indikatoren auf Tab Bar

Badges sind numerische oder Punkt-Indikatoren auf Tab-Symbolen, die die Anzahl der Benachrichtigungen, neuen Nachrichten oder Aufgaben anzeigen. Auf iOS wird das Badge über die badgeValue-Eigenschaft auf UITabBarItem gesetzt. Auf Android werden Badges über BadgeDrawable (Material 3) oder getOrCreateBadge in NavigationBarView verwaltet.

Badges sind ein leistungsstarkes Engagement-Tool: Untersuchungen von Localytics (2025) zeigten, dass Apps mit Badges am 7. Tag eine um 18% höhere Bindung aufweisen. Übermäßiger Gebrauch von Badges (mehr als 3 gleichzeitig) reduziert jedoch die CTR um 12%. Apple und Google empfehlen, Badges nur für relevante Benachrichtigungen anzuzeigen und sie beim Öffnen des Bereichs zurückzusetzen.

Tab Bar Anpassung: Symbole, Farben, Animationen

Beide Plattformen bieten umfangreiche Anpassungsmöglichkeiten für den Tab Bar. Auf iOS können Sie die Hintergrundfarbe, die Tint-Farbe des aktiven Tabs, die Schriftart der Beschriftung ändern und benutzerdefinierte Symbole über SF Symbols oder eigene Assets hinzufügen. Auf Android umfasst die Anpassung Material 3-Stile, Wechselanimation, Ripple-Effekt und dynamische Farben basierend auf dem Hintergrundbild.

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

Unter Android erfolgt die Anpassung von BottomNavigationView über XML-Attribute oder programmatisch. Material 3 führt das Konzept der dynamischen Farben ein: Die Farbpalette wird aus dem Hintergrundbild des Benutzers generiert und automatisch auf die Komponenten angewendet. Der Entwickler kann Farben über das Thema überschreiben, eine benutzerdefinierte Indikatoranimation festlegen und den Ripple-Effekt konfigurieren.

// BottomNavigationView Anpassung 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"

Bewährte Praktiken für untere Navigation

Beim Entwerfen eines Tab Bar ist es wichtig, die Plattformempfehlungen und Usability-Forschung zu befolgen. Apple HIG: nicht mehr als 5 Tabs, präziser Text, semantische Symbole. Material Design: 3–5 Elemente, aktives Element hervorgehoben, Badge-Zähler nicht mehr als 99. NN Group (2025): Die untere Navigation sollte auf allen Bildschirmen eines Bereichs sichtbar bleiben, sonst verliert der Benutzer den Kontext.

Häufige Fehler: 6+ Tabs (zwingt zur Verwendung von „Mehr“ — reduziert die Auffindbarkeit), Änderung der Tab-Reihenfolge während der Navigation (desorientiert den Benutzer), Ausblenden des Tab Bar auf verschachtelten Bildschirmen (Verlust des Navigationsankers). Bewährte Praktiken umfassen eine feste Reihenfolge, konsistente Symbole und Textbeschriftungen, Badges nur für Benutzeraktionen (nicht für Marketing).

• 3–5 Tabs — optimale Anzahl für schnelle Auswahl ohne Überlastung
• Feste Reihenfolge — Tabs sollten stabil sein, ohne dynamische Neuanordnung
• Symbol + Beschriftung — beide Elemente sind zum Verständnis des Bereichs erforderlich
• Aktiver Tab — sollte sich visuell durch Farbe, Symbol oder Animation unterscheiden
• Badges — für Benachrichtigungen verwenden, beim Öffnen des Bereichs zurücksetzen