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 un diseño, personalizar parte de su apariencia y responder cuando se presionan los botones.
Para obtener más información sobre cómo diseñar un BAF para tu app de acuerdo con los lineamientos de Material Design, consulta BAF de Material Design.
![Imagen que muestra la pantalla de una app que contiene un FloatingActionButton rojo](https://developer.android.com/static/training/material/images/fab.png?authuser=5&hl=es)
Cómo agregar el botón de acción flotante a tu diseño
En el siguiente código, se muestra cómo aparece 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 la paleta de colores del tema.
Puedes configurar otras propiedades de BAF utilizando atributos XML o métodos correspondientes, como los siguientes:
- El tamaño del BAF con el atributo
app:fabSize
o el métodosetSize()
- El color de ondas del BAF con el atributo
app:rippleColor
o el métodosetRippleColor()
- El ícono de BAF con el atributo
android:src
o el métodosetImageDrawable()
Cómo responder a presiones de botones
Luego, puedes aplicar un View.OnClickListener
para controlar los toques del BAF. Por ejemplo, el siguiente código muestra un Snackbar
cuando el usuario presiona 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 FloatingActionButton
.