Jetpack Compose Academy · Lektion

NavigationBar mit mehreren Tabs

Wechseln Sie unten zwischen übergeordneten Bereichen.

NavigationBar mit mehreren Tabs ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Meet NavigationBar

Material 3 gives you NavigationBar, a bar pinned to the bottom that lets people jump between the top-level sections of your app. 📱

When to Use It

Reach for a NavigationBar when your app has three to five equally important destinations, like Home, Search, and Profile.

It Lives in the Scaffold

You usually drop the bar into a Scaffold bottomBar slot, so it stays fixed while the screen content scrolls above it.

Scaffold(
  bottomBar = { NavigationBar { /* items */ } }
) { padding -> Content(padding) }

Each Tab Is an Item

Inside the bar you add one NavigationBarItem per destination. Each item is a clickable tab with its own icon and label.

NavigationBar {
  NavigationBarItem(/* ... */)
  NavigationBarItem(/* ... */)
}

The selected Flag

Every item needs a selected boolean. Exactly one item should be true at a time so the bar shows where the user is.

NavigationBarItem(
  selected = current == "home",
  onClick = { go("home") }
)

Handle the Tap

The onClick lambda runs when the tab is pressed. This is where you tell your navigation to switch to that section.

Give It an Icon

The icon slot takes a Composable, usually an Icon from the Material set, so each tab is instantly recognizable.

icon = { Icon(Icons.Default.Home, contentDescription = "Home") }

Add a Label

The label slot shows short text under the icon. Keep it to one clear word so it fits and reads fast.

label = { Text("Home") }

A Model for Tabs

It helps to keep your tabs in a simple data class list, so the bar can loop over them instead of hard-coding each item.

data class Tab(val route: String, val icon: ImageVector, val label: String)

Loop to Build the Bar

With a tab list you can forEach over it and emit one NavigationBarItem per entry, keeping the bar tidy and easy to extend.

tabs.forEach { tab ->
  NavigationBarItem(/* uses tab fields */)
}

Pair It with Content

The bar only switches the active section. You still pair it with a NavHost or a when block that actually swaps the screen content.

Quick Check

You added three tabs to your NavigationBar. Quick check on the basics.

Recap

You met NavigationBar: drop it in the Scaffold, add a NavigationBarItem per section with an icon, label, selected flag, and onClick. Nice work! 🎉

Häufig gestellte Fragen

Ist die Lektion „NavigationBar mit mehreren Tabs“ kostenlos?

Ja — der vollständige Text von „NavigationBar mit mehreren Tabs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „NavigationBar mit mehreren Tabs“?

Wechseln Sie unten zwischen übergeordneten Bereichen. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „NavigationBar mit mehreren Tabs“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Jetpack Compose Academy