Aggiungere un pulsante di azione mobile

Prova il modo di comporre

Jetpack Compose è il toolkit per la UI consigliato per Android. Scopri come aggiungere componenti in Compose.

Pulsante di azione mobile →

Un pulsante di azione sovrapposto (FAB) è un pulsante circolare che attiva l'azione principale nell'interfaccia utente della tua 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.

Aggiungere il pulsante di azione mobile al layout

Il seguente codice mostra come FloatingActionButton viene visualizzato 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à del pulsante di azione rapida utilizzando gli attributi XML o i metodi corrispondenti, ad esempio:

• Le dimensioni del pulsante di azione rapida, utilizzando l'attributo app:fabSize o il metodo setSize()
• Il colore dell'increspatura del 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 pulsante di azione rapida. Ad esempio, il seguente codice mostra un Snackbar quando l'utente tocca il pulsante di azione rapida:

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

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 pulsante di azione rapida, consulta il riferimento API per FloatingActionButton.