Un Floating Action Button (FAB) è un pulsante circolare che attiva l'azione principale nell'UI della tua app. Questo documento mostra come aggiungere un FAB al layout, personalizzarne l'aspetto e rispondere ai tocchi del pulsante.
Per saperne 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 Floating Action Button al layout
Il seguente codice mostra come il
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à FAB utilizzando gli attributi XML o i metodi corrispondenti, ad esempio:
- Le dimensioni del FAB, utilizzando l'
app:fabSizeattributo o ilsetSize()metodo - Il colore dell'effetto ripple del FAB, utilizzando l'
app:rippleColorattributo o ilsetRippleColor()metodo - L'icona FAB, utilizzando l'attributo
android:srco ilsetImageDrawable()metodo
Rispondere ai tocchi del pulsante
Puoi quindi applicare un
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 API
per il
FloatingActionButton.