Un botón de acción flotante (BAF) es un botón de gran énfasis que le permite al usuario realizar una acción principal en una aplicación. Promueve una sola acción enfocada que es la ruta más común que puede seguir un usuario y, por lo general, se encuentra fijada en la parte inferior derecha de la pantalla.
Considera estos tres casos de uso en los que podrías usar un FAB:
- Crear elemento nuevo: En una app para tomar notas, se puede usar un FAB para crear una nota nueva con rapidez.
- Agregar contacto nuevo: En una app de chat, un FAB podría abrir una interfaz que le permita al usuario agregar a alguien a una conversación.
- Centrar la ubicación: En una interfaz de mapa, un FAB podría centrar el mapa en la ubicación actual del usuario.
En Material Design, hay cuatro tipos de BAF:
- BAF: Es un botón de acción flotante de tamaño normal.
- BAF pequeño: Es un botón de acción flotante más pequeño.
- BAF grande: Es un botón de acción flotante más grande.
- BAF extendido: Es un botón de acción flotante que contiene más que un ícono.
Compatibilidad de versiones
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.
Dependencias
Kotlin
implementation(platform("androidx.compose:compose-bom:2025.01.01"))
Groovy
implementation platform('androidx.compose:compose-bom:2025.01.01')
Cómo crear un botón de acción flotante básico
Para crear un botón de acción flotante general, usa el elemento que admite composición básico FloatingActionButton
:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
Resultado
![Un botón de acción flotante estándar con esquinas redondeadas, una sombra y un ícono de "agregar".](https://developer.android.com/static/develop/ui/compose/images/components/fab.png?hl=es-419)
Crea un botón de acción flotante pequeño
Para crear un botón de acción flotante pequeño, usa el elemento componible SmallFloatingActionButton
. En el siguiente ejemplo, se muestra cómo hacerlo, con la adición de colores personalizados.
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
Resultado
![Una implementación de SmallFloatingActionButton que contiene un ícono de “agregar”.](https://developer.android.com/static/develop/ui/compose/images/components/fab-small.png?hl=es-419)
Cómo crear un botón de acción flotante grande
Para crear un botón de acción flotante grande, usa el elemento componible LargeFloatingActionButton
. Este elemento componible no es muy diferente de los otros ejemplos, aparte del hecho de que genera un botón más grande.
A continuación, se muestra una implementación sencilla de un BAF grande.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
Resultado
![Una implementación de LargeFloatingActionButton que contiene un ícono de “agregar”.](https://developer.android.com/static/develop/ui/compose/images/components/fab-large.png?hl=es-419)
Crea un botón de acción flotante extendido
Puedes crear botones de acción flotantes más complejos con el elemento componible ExtendedFloatingActionButton
. La diferencia clave entre esta función y FloatingActionButton
es que tiene parámetros icon
y text
dedicados. Te permiten crear un botón con contenido más complejo que se ajusta para adaptarse a su contenido de forma adecuada.
En el siguiente fragmento, se muestra cómo implementar ExtendedFloatingActionButton
, con valores de ejemplo pasados para icon
y text
.
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
Resultado
![Una implementación de ExtendedFloatingActionButton que muestra el texto "botón extendido" y un ícono de edición.](https://developer.android.com/static/develop/ui/compose/images/components/fab-extended.png?hl=es-419)
Puntos clave
Aunque hay varios elementos componibles que puedes usar para crear botones de acción flotantes coherentes con Material Design, sus parámetros no difieren mucho. Entre los parámetros clave que debes tener en cuenta, se incluyen los siguientes:
onClick
: Es la función a la que se llama cuando el usuario presiona el botón.containerColor
: Es el color del botón.contentColor
: Es el color del ícono.
z## Colecciones que contienen esta guía
Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=es-419)