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](https://developer.android.google.cn/static/training/material/images/fab.png?authuser=7&hl=es-419)
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 elsetSize()
método - El color de ondas del BAF, mediante el atributo
app:rippleColor
o elsetRippleColor()
método - El ícono de BAF con el atributo
android:src
o elsetImageDrawable()
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