Creare un pulsante di azione mobile (FAB)

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

  implementation(platform("androidx.compose:compose-bom:2025.01.01"))

  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.")
    }
}
FloatingActionButton.kt

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.")
    }
}
FloatingActionButton.kt

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")
    }
}
FloatingActionButton.kt

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") },
    )
}
FloatingActionButton.kt

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:

Mostrare componenti interattivi

Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.

Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.

Vai alle domande frequenti Lascia un feedback