Botón de acción flotante

Un botón de acción flotante (BAF) es un botón de alta importancia que 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 tomar un usuario y, 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 rápidamente una nota nueva.
  • Agregar un contacto nuevo: En una app de chat, un BAF podría abrir una interfaz que permita al usuario agregar a alguien a una conversación.
  • Centrar la ubicación: 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: Un botón de acción flotante de tamaño normal.
  • BAF pequeño: Un botón de acción flotante más pequeño.
  • BAF grande: Un botón de acción flotante más grande.
  • BAF extendido: Un botón de acción flotante que contiene más que solo un ícono.
Ejemplo de cada uno de los cuatro componentes del botón de acción flotante.
Figura 1. Los cuatro tipos de botones de acción flotantes

Superficie de la 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 incluyen los siguientes:

  • onClick: Es la función 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 básico FloatingActionButton componible. 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 aparece de la siguiente manera:

Un botón de acción flotante estándar con esquinas redondeadas, una sombra y un ícono de "agregar".
Figura 2. Un botón de acción flotante

Botón pequeño

Para crear un botón de acción flotante pequeño, usa el SmallFloatingActionButton componible. 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 aparece de la siguiente manera:

Implementación de SmallFloatingActionButton que contiene un ícono de "agregar".
Figura 3. Un botón de acción flotante pequeño

Botón grande

Para crear un botón de acción flotante grande, usa el LargeFloatingActionButton componible. Este elemento componible no es muy diferente de los otros ejemplos, excepto por el hecho de que da como resultado un botón más grande.

A continuación, se muestra 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:

Implementación de LargeFloatingActionButton que contiene un ícono de “agregar”.
Figura 4. Un botón de acción flotante grande

Botón extendido

Puedes crear botones de acción flotantes más complejos con el ExtendedFloatingActionButton componible. 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 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") },
    )
}

Esta implementación aparece de la siguiente manera:

Implementación de ExtendedFloatingActionButton que muestra el texto "extended button" y un ícono de edición.
Figura 5. Un botón de acción flotante con texto y un ícono

Recursos adicionales