Creare un pulsante

I pulsanti consentono all'utente di attivare un'azione definita. Esistono cinque tipi di pulsanti:

Digitazione

Aspetto

Finalità
Completato

Sfondo a tinta unita con testo a contrasto.

Per le azioni principali, come "Invia" e "Salva". L'effetto ombra sottolinea l'importanza del pulsante.
Tonal

Il colore dello sfondo varia in base alla superficie.

Per azioni principali o significative. I pulsanti riempiti hanno un'impronta visiva e sono appropriati per azioni come "Aggiungi al carrello" e "Accedi".
Elevata

L'ombra lo fa risaltare.

Per azioni principali o significative. Aumenta l'elevazione per rendere il pulsante più prominente.
Contorno

Presenta un bordo senza riempimento.

Per azioni importanti, ma non principali. I pulsanti con contorni si abbinano bene ad altri pulsanti per indicare azioni secondarie alternative, come "Annulla" o "Indietro".
Testo

Testo senza sfondo o bordo.

Per azioni meno critiche come i link di navigazione o azioni secondarie come "Scopri di più" o "Visualizza dettagli".

Compatibilità delle versioni

Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Creare un pulsante con riempimento

Il componente pulsante con riempimento utilizza il composable di base Button. Per impostazione predefinita, è preenchito con un colore a tinta unita.

Risultati

Un pulsante con riempimento e sfondo viola con la dicitura "filled".
Figura 1. Un pulsante con riempimento.

Creare un pulsante con tonalità a riempimento

Il componente pulsante tonale con riempimento utilizza il composable FilledTonalButton. Per impostazione predefinita, è riempito con un colore tonale.

Risultati

Un pulsante tonale con sfondo viola chiaro con la dicitura "Completato".
Figura 2. Un pulsante con tonalità.

Creare un pulsante con contorni

Il componente pulsante con bordi utilizza il composable OutlinedButton. Per impostazione predefinita viene visualizzato con un contorno.

Risultati

Un pulsante con contorni trasparenti e un bordo scuro con la dicitura "Con contorni".
Figura 3. Un pulsante con contorni.

Creare un pulsante in rilievo

Il componente pulsante in rilievo utilizza il composable ElevatedButton. Ha un'ombra che rappresenta l'effetto di elevazione per impostazione predefinita e viene visualizzato come un pulsante con contorni e un'ombra.

Risultati

Un pulsante in rilievo con sfondo grigio con la dicitura "In rilievo".
Figura 4. Un pulsante rialzato.

Creare un pulsante di testo

Il componente pulsante di testo utilizza il composable TextButton. Fino a quando non viene fatto clic, viene visualizzato solo come testo. Per impostazione predefinita, non ha un riempimento o un contorno solido.

Risultati

Un pulsante di testo con la dicitura "Pulsante di testo"
Figura 5. Un pulsante di testo.

Punti chiave

  • onClick: la funzione chiamata quando l'utente preme il pulsante.
  • enabled: se è false, questo parametro fa sì che il pulsante non sia visibile e non sia attivo.
  • colors: un'istanza di ButtonColors che determina i colori utilizzati nel pulsante.
  • contentPadding: la spaziatura interna del pulsante.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:

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