Cómo agregar un botón de acción flotante

Prueba el método de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Aprende a agregar componentes en Compose.

Un botón de acción flotante (BAF) es un botón circular que activa la acción principal en la IU de tu app. En este documento, se muestra cómo agregar un BAF a tu diseño personalizar parte de su apariencia y responder a la presión de botones.

Para obtener más información sobre cómo diseñar un BAF para tu app de acuerdo con el material de Material pautas de Design, consulta Material Design BAF de Google Cloud.

Imagen que muestra la pantalla de una app que contiene un FloatingActionButton rojo
Figura 1: Un botón de acción flotante (BAF).

Cómo agregar el botón de acción flotante a tu diseño

En el siguiente código, se muestra cómo FloatingActionButton en tu archivo de diseño:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

De forma predeterminada, un BAF se colorea con el atributo colorAccent, que puedes personalizar con el color del tema paleta.

Puedes configurar otras propiedades de BAF utilizando atributos XML o sus métodos como los siguientes:

  • El tamaño del BAF mediante el atributo app:fabSize o el setSize() método
  • El color de ondas del BAF, mediante el atributo app:rippleColor o el setRippleColor() método
  • El ícono de BAF con el atributo android:src o el setImageDrawable() método

Cómo responder a presiones de botones

Luego, puedes aplicar View.OnClickListener a controlar los toques del BAF Por ejemplo, el siguiente código muestra un Snackbar cuando el usuario toca el BAF:

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

Para obtener más información sobre las funciones del BAF, consulta la referencia de la API. para el FloatingActionButton