Aggiungere un pulsante di azione mobile

Prova la modalità Scrivi
Jetpack Compose è il toolkit dell'interfaccia utente consigliato per Android. Scopri come aggiungere componenti in Compose.

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, personalizzarne l'aspetto e rispondere al tocco dei pulsanti.

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

Un'immagine che mostra la schermata di un'app contenente un pulsante FloatingActionButton rosso
Figura 1. Un pulsante di azione mobile (FAB).

Aggiungere il pulsante di azione mobile al layout

Il seguente codice mostra come viene visualizzato l'elemento 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 viene colorato dall'attributo colorAccent, che puoi personalizzare con la tavolozza dei colori del tema.

Puoi configurare altre proprietà FAB utilizzando attributi XML o metodi corrispondenti, come i seguenti:

  • La dimensione del FAB, utilizzando l'attributo app:fabSize o il metodo setSize()
  • Il colore dell'onda 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 sui pulsanti

Puoi quindi applicare un elemento View.OnClickListener per gestire i tocchi FAB. Ad esempio, il seguente codice mostra un Snackbar quando l'utente tocca il 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 saperne di più sulle funzionalità del FAB, consulta il riferimento dell'API per il FloatingActionButton.