Un botón de acción flotante (BAF) es un botón de énfasis alto que le permite al usuario realizar una acción principal en una aplicación. Promueve una única acción enfocada que es la ruta más común que puede tomar un usuario y que suele encontrarse anclado en la parte inferior derecha de la pantalla.
Ten en cuenta estos tres casos de uso en los que podrías utilizar un BAF:
- Crear un elemento nuevo: En una app para tomar notas, se puede usar un BAF para crear una nueva nota.
- Agregar un contacto nuevo: En una app de chat, un BAF podría abrir una interfaz que permita a agregar a alguien a una conversación.
- Ubicación central: En una interfaz de mapa, un BAF podría centrar el mapa en el 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 común.
- 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 solo un ícono.
Plataforma de API
Aunque hay varios elementos componibles, puedes usar para crear acciones flotantes botones compatibles con Material Design, sus parámetros no difieren mucho. Entre los parámetros clave que debes tener en cuenta, se encuentran 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.
Botón de acción flotante
Para crear un botón de acción flotante general, usa el
Elemento FloatingActionButton
componible. En el siguiente ejemplo, se muestra un
Implementación básica de un BAF:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
Esta implementación aparece de la siguiente manera:
![Un botón de acción flotante estándar con esquinas redondeadas, una sombra y una opción para agregar ícono.](https://developer.android.com/static/develop/ui/compose/images/components/fab.png?authuser=19&hl=es)
Botón pequeño
Para crear un pequeño botón de acción flotante, usa el
Elemento SmallFloatingActionButton
componible. El siguiente ejemplo demuestra
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.") } }
Esta implementación aparece de la siguiente manera:
![Una implementación de SmallFloatingActionButton que contiene un elemento "add". ícono.](https://developer.android.com/static/develop/ui/compose/images/components/fab-small.png?authuser=19&hl=es)
Botón grande
Para crear un botón de acción flotante grande, usa el
Elemento LargeFloatingActionButton
componible. Este elemento componible no es
muy diferente de los otros ejemplos, además del hecho de que
genera un botón más grande.
La siguiente es una implementación directa de un BAF grande.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
Esta implementación aparece de la siguiente manera:
![Una implementación de LargeFloatingActionButton que contiene un elemento "add" ícono.](https://developer.android.com/static/develop/ui/compose/images/components/fab-large.png?authuser=19&hl=es)
Botón extendido
Puedes crear botones de acción flotante más complejos con el
Elemento ExtendedFloatingActionButton
componible. La diferencia clave entre ellos
y FloatingActionButton
es que dedicó icon
y text
parámetros. Te permiten crear un botón con contenido más complejo que se ajuste
para adaptar el 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") }, ) }
Esta implementación aparece de la siguiente manera:
![Una implementación de ExtendedFloatingActionButton que muestra texto que dice "Botón extendido". y un ícono de edición.](https://developer.android.com/static/develop/ui/compose/images/components/fab-extended.png?authuser=19&hl=es)