Material Design per Android

Prova la modalità Scrivi
Jetpack Compose è il toolkit dell'interfaccia utente consigliato per Android. Scopri come utilizzare i temi in Compose.

Material Design è una guida completa al design visivo, di movimento e di interazione su più piattaforme e dispositivi. Per utilizzare Material Design nelle tue app per Android, segui le linee guida definite nella specifica di Material Design. Se l'app utilizza Jetpack Compose, puoi utilizzare la raccolta Compose Material 3. Se la tua app usa le visualizzazioni, puoi usare la raccolta Android Material Componenti.

Android offre le seguenti funzionalità per aiutarti a creare app di Material Design:

  • Un tema dell'app Material Design per applicare uno stile a tutti i widget UI
  • Widget per visualizzazioni complesse, ad esempio elenchi e schede
  • API per ombre e animazioni personalizzate

Tema Material e widget

Per sfruttare le funzionalità di Material, ad esempio lo stile per i widget standard dell'interfaccia utente, e per semplificare la definizione dello stile della tua app, applica un tema basato su Material alla tua app.

Figura 1. tema Materiale scuro.
Figura 2. Tema chiaro.

Se usi Android Studio per creare il tuo progetto Android, per impostazione predefinita verrà applicato un tema Material. Per scoprire come aggiornare il tema del progetto, consulta Stili e temi.

Per offrire agli utenti un'esperienza familiare, utilizza i pattern UX più comuni di Material:

Se possibile, utilizza icone Material predefinite. Ad esempio, per il pulsante "Menu" di navigazione nel riquadro di navigazione a scomparsa, utilizza l'icona "hamburger". Consulta la pagina relativa alle icone di Material Design per un elenco delle icone disponibili. Puoi anche importare le icone SVG dalla raccolta Material Icon con Vector Asset Studio di Android Studio.

Ombre e carte di elevazione

Oltre alle proprietà X e Y, le viste in Android hanno una proprietà Z. Questa proprietà rappresenta l'elevazione di una vista, che determina quanto segue:

  • Le dimensioni dell'ombra: le visualizzazioni con valori Z più elevati proiettano ombre più grandi.
  • Ordine di disegno: le viste con valori Z più elevati vengono visualizzate sopra le altre viste.
Figura 3. Il valore Z che rappresenta l'elevazione.

Puoi applicare l'elevazione a un layout a schede, in modo da mostrare informazioni importanti all'interno di schede con aspetto Material. Puoi usare il widget CardView per creare schede con un'elevazione predefinita. Per scoprire di più, consulta la sezione Creare un layout basato su schede.

Per informazioni su come aggiungere l'elevazione ad altre visualizzazioni, consulta Creare ombre e visualizzazioni dei clip.

Animazioni

Figura 4. Un'animazione con feedback al tocco.

Le API di animazione consentono di creare animazioni personalizzate per il feedback al tocco nei controlli dell'interfaccia utente, le modifiche allo stato di visualizzazione e le transizioni delle attività.

Queste API ti consentono di:

  • Rispondere agli eventi tocco nelle visualizzazioni con animazioni di feedback al tocco.
  • Nascondi e mostra le visualizzazioni con animazioni di rivelazione circolare.
  • Passa da un'attività all'altra con animazioni di transizione delle attività personalizzate.
  • Crea animazioni più naturali con il movimento curvo.
  • Animazione delle modifiche in una o più proprietà di vista con animazioni di modifica dello stato.
  • Mostra le animazioni nei disegnabili degli elenchi di stato tra le modifiche dello stato di visualizzazione.

Le animazioni con feedback al tocco sono integrate in diverse visualizzazioni standard, ad esempio i pulsanti. Le API di animazione ti consentono di personalizzare queste animazioni e aggiungerle alle visualizzazioni personalizzate.

Per ulteriori informazioni, consulta Introduzione alle animazioni.

Disegnabili

Queste funzionalità per gli elementi disegnabili consentono di implementare le app di Material Design:

  • Gli Drawables vettoriali, scalabili senza perdere definizione, sono perfetti per le icone in-app a un solo colore. Scopri di più sugli disegnabili vettoriali.
  • La colorazione del disegno ti consente di definire le bitmap come maschera alfa e di colorarle con un colore al momento dell'attivazione. Scopri come aggiungere tinta ai disegni.
  • L'estrazione del colore consente di estrarre automaticamente colori in evidenza da un'immagine bitmap. Scopri come selezionare i colori con l'API Palette.