Barras inferiores y Floating Action Buttons
Fije la navegación y las acciones principales.
Barras inferiores y Floating Action Buttons es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 3 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.
Anchoring the Bottom
The thumb-friendly zone of a phone is the bottom. Scaffold's bottomBar and floatingActionButton slots put your key controls right where fingers reach. 👍
The bottomBar Slot
Whatever you place in the bottomBar slot is pinned to the bottom, and Scaffold shrinks the content area so nothing slides behind it.
Scaffold(
bottomBar = { BottomAppBar { Text("Tools") } }
) { p -> }BottomAppBar
BottomAppBar is a Material container for actions tied to the current screen, like edit or share buttons. It is a RowScope, so children flow left to right.
Meet the FAB
A FloatingActionButton is the round, raised button for the single most important action on a screen, like Add or Compose. ➕
FloatingActionButton(onClick = { }) {
Icon(Icons.Default.Add, "Add")
}The FAB Slot
Put your FAB in Scaffold's floatingActionButton slot, not in your content. Scaffold then floats it correctly above the bottom edge.
Scaffold(
floatingActionButton = { FloatingActionButton(onClick = {}) {} }
) { p -> }One FAB Per Screen
A FAB signals the primary action, so use just one per screen. Two competing FABs leave users unsure which one really matters.
FAB Position
Control where the FAB sits with floatingActionButtonPosition. The default is the bottom-right corner, but Center pairs nicely with a bottom bar.
floatingActionButtonPosition = FabPosition.CenterFAB Sizes
Beyond the standard FAB, Material 3 adds SmallFloatingActionButton and LargeFloatingActionButton so you can match the button to the screen's weight.
The ExtendedFAB
An ExtendedFloatingActionButton shows an icon plus a text label. It works well when the action's name is not obvious from an icon alone.
ExtendedFloatingActionButton(
onClick = { },
icon = { Icon(Icons.Default.Add, "Add") },
text = { Text("New") }
)Bars and FAB Together
Scaffold understands when a bottomBar and a FAB coexist, lifting the FAB so it never overlaps the bar. You just fill both slots.
Describe the FAB
Like any icon button, give the FAB's Icon a contentDescription. A bare plus sign means nothing to a screen reader without it.
Quick Check
How many FloatingActionButtons should a single screen normally show?
Recap
Use the bottomBar slot for screen actions and the floatingActionButton slot for one primary action. Scaffold spaces them so they never collide. ✨
Preguntas frecuentes
¿La lección «Barras inferiores y Floating Action Buttons» es gratis?
Sí — el texto completo de «Barras inferiores y Floating Action Buttons» 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 «Barras inferiores y Floating Action Buttons»?
Fije la navegación y las acciones principales. 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 3 de 4.
¿Cuánto tiempo toma la lección «Barras inferiores y Floating Action Buttons»?
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
- Scaffold: el esqueleto de la pantalla
- TopAppBar e iconos de acción
- Barras inferiores y Floating Action Buttons
- Snackbars y SnackbarHostState