Pulsante di azione mobile

Un Floating Action Button (FAB) è un pulsante ad alta enfasi che consente all'utente di eseguire un'azione principale in un'applicazione. Promuove un'unica azione mirata, che rappresenta il percorso più comune che un utente potrebbe intraprendere, e in genere si trova ancorato in basso a destra dello schermo.

Considera questi tre casi d'uso in cui potresti utilizzare un FAB:

  • Creazione di un 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 FAB potrebbe centrare la mappa sulla posizione attuale dell'utente.

In Material Design esistono quattro tipi di FAB:

  • FAB: un Floating Action Button di dimensioni normali.
  • FAB piccolo: un Floating Action Button più piccolo.
  • FAB grande: un Floating Action Button più grande.
  • FAB esteso: un Floating Action Button che contiene più di una semplice icona.
Un esempio di ciascuno dei quattro componenti dei pulsanti di azioneFloating Action Button (FAB).
Figura 1. I quattro tipi di Floating Action Button (FAB).

Piattaforma API

Sebbene esistano diversi componibili che puoi utilizzare per creare Floating Action Button coerenti con Material Design, i loro parametri non differiscono molto. Tra i parametri chiave da tenere presente ci sono i seguenti:

  • onClick: la funzione chiamata quando l'utente preme il pulsante.
  • containerColor: il colore del pulsante.
  • contentColor: il colore dell'icona.

Floating Action Button (FAB)

Per creare un Floating Action Button (FAB) generico, utilizza il componibile di base FloatingActionButton. L'esempio seguente mostra un'implementazione di base di un FAB:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}

Ecco come appare la barra:

Un Floating Action Button (FAB) standard con angoli arrotondati, un'ombra e un'icona "Aggiungi".
Figura 2. Un Floating Action Button (FAB).

Pulsante piccolo

Per creare un Floating Action Button (FAB) piccolo, utilizza il componibile SmallFloatingActionButton. L'esempio seguente mostra come farlo, 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.")
    }
}

Ecco come appare la barra:

Un'implementazione di SmallFloatingActionButton che contiene un'icona "Aggiungi".
Figura 3. Un piccolo Floating Action Button (FAB).

Pulsante grande

Per creare un Floating Action Button (FAB) grande, utilizza il componibile LargeFloatingActionButton. Questo composable non è significativamente diverso dagli altri esempi, a parte il fatto che genera un pulsante più grande.

Di seguito è riportata un'implementazione semplice di un FAB grande.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}

Ecco come appare la barra:

Un'implementazione di LargeFloatingActionButton che contiene un'icona "Aggiungi".
Figura 4. Un Floating Action Button (FAB) di grandi dimensioni.

Pulsante esteso

Puoi creare Floating Action Button più complessi con il componibile ExtendedFloatingActionButton. La differenza principale tra questa funzione e FloatingActionButton è che ha parametri icon e text dedicati. Consentono di creare un pulsante con contenuti più complessi che si adattano in modo appropriato 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") },
    )
}

Ecco come appare la barra:

Un'implementazione di ExtendedFloatingActionButton che mostra il testo "pulsante esteso" e un'icona di modifica.
Figura 5. Un Floating Action Button (FAB) con testo e icona.

Risorse aggiuntive