Crea un botón de acción flotante (BAF)

Un botón de acción flotante (BAF) es un botón de gran énfasis 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 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 FAB:

  • Crear elemento nuevo: En una app para tomar notas, se puede usar un FAB para crear rápidamente una nota nueva.
  • 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 valor de minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.05.00"))

Groovy

  implementation platform('androidx.compose:compose-bom:2025.05.00')

Crea un botón de acción flotante básico

Para crear un botón de acción flotante general, usa el elemento FloatingActionButton básico que admite composición:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

Resultado

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

Crea un botón de acción flotante pequeño

Para crear un botón de acción flotante pequeño, usa el elemento 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.")
    }
}
FloatingActionButton.kt

Resultado

Implementación de SmallFloatingActionButton que contiene un ícono de “agregar”.
Figura 2: Es un botón de acción flotante pequeño.

Crea un botón de acción flotante grande

Para crear un botón de acción flotante grande, usa el elemento LargeFloatingActionButton componible. Este elemento componible no es significativamente diferente de los otros ejemplos, excepto por el 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")
    }
}
FloatingActionButton.kt

Resultado

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

Crea un botón de acción flotante extendido

Puedes crear botones de acción flotante más complejos con el elemento ExtendedFloatingActionButton componible. La diferencia clave entre esta y FloatingActionButton es que tiene parámetros icon y text dedicados. Te permiten crear un botón con contenido más complejo que se adapta 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") },
    )
}
FloatingActionButton.kt

Resultado

Implementación de ExtendedFloatingActionButton que muestra el texto "Botón extendido" y un ícono de edición.
Figura 4: Un botón de acción flotante con texto y un ícono.

Puntos clave

Si bien hay varios elementos componibles que puedes usar para crear botones de acción flotante coherentes con Material Design, sus parámetros no difieren demasiado. 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: Color del botón.
  • contentColor: Color del ícono.

z## Colecciones que contienen esta guía

Esta guía forma parte de las colecciones seleccionadas de Guías rápidas que abarcan objetivos más amplios de desarrollo para Android:

Aprende cómo las funciones de componibilidad te permiten crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
Colección de guías rápidas

Tienes preguntas o comentarios

Visita nuestra página de preguntas frecuentes y consulta las guías rápidas, o bien comunícate con nosotros para contarnos tu opinión.
Ir a las preguntas frecuentes Enviar comentarios