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.
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 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()
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
.