Un pulsante FAB (azione mobile) è 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 FloatingActionButton rosso](https://developer.android.com/static/training/material/images/fab.png?authuser=6&hl=it)
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 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 una View.OnClickListener
per gestire i tocchi FAB. Ad esempio, il seguente codice mostra una 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
.