Bottom Navigation: základy, BottomNavigationView a TabView

Co je Bottom Navigation?

Bottom Navigation — navigační vzor, při kterém jsou hlavní sekce aplikace přístupné pomocí panelu ve spodní části obrazovky. Tento vzor se stal standardem mobilního designu díky pohodlí ovládání jednou rukou. Na rozdíl od bočního menu (Drawer) je Bottom Navigation vždy viditelná a nevyžaduje další gesta k otevření.

Material Design 3 (2026) definuje Navigation Bar jako komponentu se třemi stavy: default (ikona + štítek), labeled (zvětšený štítek, jedna aktivní karta) a unlabeled (pouze ikony). Google doporučuje Navigation Bar pro aplikace se 3–5 rovnocennými sekcemi. Pro 6+ sekcí — Navigation Drawer. V iOS SwiftUI TabView automaticky používá spodní panel se systémovým stylem.

Výzkum UX Movement (2025) ukázal: Bottom Navigation zlepšuje dobu provádění úkolů o 27% ve srovnání s vysouvacím menu, protože uživatel vidí všechny dostupné sekce bez dalších akcí. Počet chybných klepnutí klesá o 34% díky velkým cílům dotyku (minimálně 48x48 dp na Android, 44x44 pt na iOS).

BottomNavigationView v Android (Material 3)

BottomNavigationView v Android — komponenta z Material 3 Library (com.google.android.material.navigation.NavigationBarView). Nahradila zastaralý BottomNavigationView z Material 2 a přidala podporu pro dynamické barvy Material You, animovaný indikátor aktivní karty a vestavěné odznaky. Komponenta se konfiguruje pomocí XML menu a je plně kompatibilní s Navigation Component.

// Aktivita s BottomNavigationView a 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)

        // Automatická synchronizace navigace
        navView.setupWithNavController(navController)

        // Konfigurace odznaku
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// XML menu pro 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="Domů" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Chaty" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Profil" />
// </menu>

Material 3 NavigationBarView podporuje tři režimy labelVisibilityMode: LABEL_VISIBILITY_AUTO (výchozí — štítek se zobrazuje pro aktivní kartu), LABEL_VISIBILITY_LABELED (štítky u všech), LABEL_VISIBILITY_UNLABELED (pouze ikony). Animovaný indikátor aktivní karty se konfiguruje pomocí itemActiveIndicatorStyle s vlastním ripple efektem.

TabView v SwiftUI pro iOS

TabView — vestavěný kontejner SwiftUI pro vytvoření spodní navigace. Každá karta je definována modifikátorem .tabItem s ikonou a textem. TabView automaticky vytváří UITabBarController pod kapotou a podporuje všechny funkce nativního panelu: odznaky, barvu odznaku, animaci přepínání a přizpůsobení Dynamic Type.

import SwiftUI

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

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

            NotificationsView()
                .tabItem {
                    Label("Oznámení", systemImage: "bell.fill")
                }
                .badge("12")

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

TabView podporuje modifikátor .badge (iOS 15+), který přijímá Int (číselný odznak) nebo String (textový). Barvu odznaku lze změnit pomocí .badgeProminence(.increased) — zesvětlí odznak. Animace přepínání karet se konfiguruje pomocí .tabViewStyle(.automatic) nebo vlastních stylů. Pro programové přepínání se používá @State s selection.

Kombinace spodní a zásobníkové navigace

Bottom Navigation se zřídka používá samostatně — každá karta obvykle obsahuje zásobníkový navigátor (NavigationView/NavigationStack v SwiftUI, NavHostFragment v Android). Tato kombinace poskytuje uživateli jak rychlý přístup k sekcím (Tab), tak hlubokou navigaci uvnitř každé sekce (Stack). Toto je standardní architektura pro produkční aplikace.

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

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

// Uvnitř HomeView — zásobníková navigace
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)
        }
    }
}

V Android je stejná kombinace implementována pomocí NavHostFragment pro každou kartu. Navigation Component automatizuje vytváření back stack pro každou kartu: při přepínání karet se stav zásobníku ukládá, při návratu — obnovuje. To poskytuje plynulé UX jako v systémových aplikacích Google (Play Market, YouTube).

Material 3: dynamické barvy a animace

Material 3 (Material You) přináší klíčovou změnu do Bottom Navigation — dynamické barvy generované z tapety uživatele. Systém extrahuje dominantní barvy z wallpaper a vytváří paletu 5 klíčových tónů. NavigationBarView automaticky aplikuje tyto barvy: aktivní karta získá primary barvu, neaktivní — onSurface variant.

Animace indikátoru aktivní karty se stala plynulou: při přepínání se indikátor animovaně přesouvá k nové kartě s interpolací. Ripple efekt při dotyku používá secondary barvu. Bottom Navigation v Material 3 také podporuje vlastní animace pomocí itemActiveIndicatorStyle — vývojář může nastavit tvar (oválný, obdélníkový), okraje a barvu indikátoru.

<!-- Styl aktivního indikátoru 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 doporučení pro spodní navigaci

Při navrhování Bottom Navigation je třeba zohlednit výzkumy použitelnosti. NN Group (2026): spodní panel by měl mít výšku minimálně 56 dp, cíle dotyku — alespoň 48 dp. Text štítků — maximálně 12 znaků (latinka) nebo 8 znaků (cyrilice). Aktivní karta by se měla lišit nejen barvou, ale také stavem ikony (filled vs outlined).

Material Design 3 doporučuje následující vzory: 4 karty — optimální pro klidné skenování; symbol „+“ uprostřed (FloatingActionButton) — pro hlavní akci; odznaky — pouze pro počítadla akcí uživatele. Nedoporučuje se: používat Bottom Navigation se 2 kartami (lepší Tab Layout), dynamicky měnit pořadí karet, skrývat panel na vnořených obrazovkách.

• Výška — minimálně 56 dp pro pohodlné klepnutí palcem
• Kontrast — aktivní karta musí být rozpoznatelná (barva + výplň ikony)
• Štítky — krátké, 1-2 slova, bez ořezávání (ne více než 12 znaků)
• Pořadí — pevné, od nejdůležitějšího k méně důležitému
• Počítadla — pouze pro uživatelská oznámení, ne pro marketing