Un pulsante FAB (azione mobile) è un pulsante circolare che attiva l'azione principale nell'interfaccia utente dell'app. Questa pagina mostra come aggiungere il FAB al layout, personalizzarne l'aspetto e rispondere al tocco dei pulsanti.
Per scoprire di più su come progettare un pulsante di azione mobile nella tua app in base alle linee guida di Material Design, consulta anche la sezione Pulsanti: pulsante di azione mobile.
Aggiungi il pulsante di azione mobile al layout
Il seguente codice mostra come dovrebbe apparire 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, il FAB viene colorato in base all'attributo colorAccent
,
che puoi personalizzare
con la tavolozza dei colori del tema.
Puoi configurare altre proprietà FAB utilizzando attributi XML o metodi corrispondenti, ad esempio:
- Le dimensioni del FAB, utilizzando l'attributo
app:fabSize
o il metodosetSize()
. - Il colore dell'onda del FAB, utilizzando l'attributo
app:rippleColor
o il metodosetRippleColor()
. - L'icona FAB, utilizzando l'attributo
android:src
o il metodosetImageDrawable()
.
Rispondi ai tocchi sui pulsanti
Puoi quindi applicare un View.OnClickListener
per gestire i tocchi FAB. Ad esempio, il seguente codice visualizza 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 ulteriori informazioni sulle funzionalità del FAB, consulta il riferimento API per
FloatingActionButton
.