Aggiungere un pulsante di azione mobile

Prova la funzionalità Scrivi

Jetpack Compose è il toolkit per l'interfaccia utente consigliato per Android. Scopri come aggiungere componenti in Compose.

Pulsante di azione sovrapposto →

Un pulsante di azione mobile (FAB) è un pulsante circolare che attiva l'azione principale nell'interfaccia utente dell'app. Questo documento mostra come aggiungere un FAB al layout, personalizzare parte del suo aspetto e rispondere ai tocchi del pulsante.

Per scoprire di più su come progettare un FAB per la tua app in base alle linee guida di Material Design, consulta FAB di Material Design.

Figura 1. Un pulsante di azione mobile (FAB).

Aggiungi il pulsante di azione mobile al layout

Il seguente codice mostra come viene visualizzato FloatingActionButton nel file di layout:

<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" />

Per impostazione predefinita, un FAB è colorato dall'attributo colorAccent, che puoi personalizzare con la tavolozza dei colori del tema.

Puoi configurare altre proprietà FAB utilizzando gli attributi XML o i metodi corrispondenti, ad esempio:

• Le dimensioni del pulsante flottante utilizzando l'attributo app:fabSize o il metodo setSize().
• Il colore dell'effetto ripple del pulsante FAB, utilizzando l'attributo app:rippleColor o il metodo setRippleColor().
• L'icona FAB, utilizzando l'attributo android:src o il metodo setImageDrawable().

Rispondere ai tocchi dei pulsanti

Puoi quindi applicare un View.OnClickListener per gestire i tocchi del FAB. Ad esempio, il seguente codice mostra un pulsante Snackbar quando l'utente tocca il pulsante 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();
    }
});

Per ulteriori informazioni sulle funzionalità del FAB, consulta il riferimento all'API per FloatingActionButton.