NavigationBar con varias pestañas
Cambie entre secciones principales desde la parte inferior.
NavigationBar con varias pestañas es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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! 🎉
Preguntas frecuentes
¿La lección «NavigationBar con varias pestañas» es gratis?
Sí — el texto completo de «NavigationBar con varias pestañas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «NavigationBar con varias pestañas»?
Cambie entre secciones principales desde la parte inferior. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «NavigationBar con varias pestañas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- NavigationBar con varias pestañas
- Resaltar la ruta seleccionada
- Conservar el estado de las pestañas al cambiar
- TabRow y páginas deslizables