Únete a ⁠ #Android11: The Beta Launch Show el 3 de junio.

Agrega un botón de acción flotante

Un botón de acción flotante (FAB) es un botón circular que activa la acción principal en la IU de tu app. En esta página, se muestra cómo agregar el FAB al diseño, personalizar parte de su aspecto y responder cuando se presionan los botones.

Para obtener más información sobre cómo diseñar un botón de acción flotante en tu app de acuerdo con los lineamientos de material design, consulta también Botones: botón de acción flotante.

Figura 1: Un botón de acción flotante

Agrega el botón de acción flotante a tu diseño

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

    <android.support.design.widget.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 manera predeterminada, el FAB está coloreado por el atributo colorAccent, que puedes personalizar con la paleta de colores del tema.

Puede configurar otras propiedades de FAB utilizando atributos XML o métodos correspondientes, como los siguientes:

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

Responde a toques de botones

Puedes aplicar un View.OnClickListener para manejar los toques del FAB. Por ejemplo, en el siguiente código, se muestra un Snackbar cuando el usuario presiona el FAB:

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();
        }
    });
    

A fin de obtener más información sobre las funciones del FAB, consulta la referencia de la API para FloatingActionButton.