Un Floating Action Button (FAB) è un pulsante in evidenza che consente all'utente di eseguire un'azione principale in un'applicazione. Promuove un'azione singola e mirata che rappresenta il percorso più comune che un utente potrebbe intraprendere e in genere si trova ancorata in basso a destra nella schermata.
Considera questi tre casi d'uso in cui potresti utilizzare un FAB:
- Crea nuovo elemento: in un'app per prendere appunti, un FAB potrebbe essere utilizzato per creare rapidamente una nuova nota.
- Aggiungi nuovo contatto: in un'app di chat, un FAB potrebbe aprire un'interfaccia che consente all'utente di aggiungere qualcuno a una conversazione.
- Centra la posizione: in un'interfaccia della mappa, un pulsante FAB potrebbe centrare la mappa sulla posizione corrente dell'utente.
In Material Design esistono quattro tipi di FAB:
- FAB: un pulsante di azione mobile di dimensioni normali.
- FAB piccolo: un pulsante di azione mobile più piccolo.
- FAB grande: un pulsante di azione mobile più grande.
- FAB esteso: un pulsante di azione mobile che contiene più di un'icona.
Compatibilità delle versioni
Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.
Dipendenze
Kotlin
implementation(platform("androidx.compose:compose-bom:2025.01.01"))
Groovy
implementation platform('androidx.compose:compose-bom:2025.01.01')
Creare un pulsante di azione mobile di base
Per creare un pulsante di azione mobile generico, utilizza il composable di base
FloatingActionButton
:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
Risultato

Creare un piccolo pulsante di azione mobile
Per creare un piccolo pulsante di azione mobile, utilizza il composable SmallFloatingActionButton
. L'esempio riportato di seguito mostra come eseguire questa operazione, con l'aggiunta di colori personalizzati.
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
Risultato

Creare un pulsante di azione mobile di grandi dimensioni
Per creare un pulsante di azione mobile di grandi dimensioni, utilizza il composable LargeFloatingActionButton
. Questo composable non è molto diverso dagli altri esempi, a parte il fatto che genera un pulsante più grande.
Di seguito è riportata un'implementazione semplice di un FAB di grandi dimensioni.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
Risultato

Creare un pulsante di azione mobile espanso
Puoi creare pulsanti di azione popup più complessi con il composable ExtendedFloatingActionButton
. La differenza principale tra questo e FloatingActionButton
è che ha parametri icon
e text
dedicati. Ti consentono di creare un pulsante con contenuti più complessi che si adattano in base ai contenuti.
Il seguente snippet mostra come implementare ExtendedFloatingActionButton
, con valori di esempio passati per icon
e text
.
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
Risultato

Punti chiave
Sebbene esistano diversi composabili che puoi utilizzare per creare pulsanti di azione flottanti in linea con Material Design, i relativi parametri non differiscono molto. Tra i parametri chiave da tenere presenti, figurano i seguenti:
onClick
: la funzione chiamata quando l'utente preme il pulsante.containerColor
: il colore del pulsante.contentColor
: il colore dell'icona.
z## Collezioni che contengono questa guida
Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:
