Un botón de acción flotante (BAF) es un botón de alto énfasis 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 un usuario puede tomar y que, por lo general, se encuentra anclada en la parte inferior derecha de la pantalla.
Considera estos tres casos de uso en los que podrías usar un BAF:
- Crear un elemento nuevo: En una app para tomar notas, se podría usar un BAF para crear una nota nueva con rapidez.
- Agregar contacto nuevo: En una app de chat, un BAF podría abrir una interfaz que le permita al usuario agregar a alguien a una conversación.
- Ubicación central: En una interfaz de mapa, un BAF 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 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 un ícono.
Plataforma de API
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 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 componible FloatingActionButton
básico. En el siguiente ejemplo, se muestra una 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 se muestra de la siguiente manera:
Botón 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.") } }
Esta implementación se muestra de la siguiente manera:
Botón 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, excepto por el 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 se muestra de la siguiente manera:
Botón ampliado
Puedes crear botones de acción flotantes más complejos con el elemento componible ExtendedFloatingActionButton
. La diferencia clave entre este y FloatingActionButton
es que tiene parámetros icon
y text
dedicados. Te permiten crear un botón con contenido más complejo que se escala para que se ajuste a su contenido de manera 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 se muestra de la siguiente manera: