Material Design per Android

Prova il metodo Scrivi
Jetpack Compose è il toolkit consigliato per la UI per Android. Scopri come lavorare con i temi in Compose.
Material Design 3 →

Material Design è una guida completa per il design visivo, di movimento e dell'interazione su piattaforme e dispositivi diversi. Per utilizzare Material Design nelle tue app per Android, segui le linee guida definite nella specifica di Material Design. Se la tua app utilizza Jetpack Compose, puoi utilizzare la libreria Compose Material 3. Se la tua app utilizza le visualizzazioni, puoi usare la raccolta dei componenti materiali Android.

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

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

Widget e tema Material

Per sfruttare le funzionalità Material, ad esempio lo stile dei widget dell'interfaccia utente standard, e per snellire la definizione degli stili della tua app, applica alla tua app un tema basato su Material.

Figura 1. Tema scuro.
Figura 2. Tema chiaro Material.

Se usi Android Studio per creare il tuo progetto Android, per impostazione predefinita verrà applicato un tema Materiale. 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 le icone Material predefinite. Ad esempio, per il pulsante del menu di navigazione del riquadro di navigazione a scomparsa, usa l'icona standard "hamburger". Consulta la pagina 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 schede 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:

  • La dimensione dell'ombra: le visualizzazioni con valori Z più alti proiettano ombre più grandi.
  • L'ordine di disegno: le visualizzazioni con valori Z più alti vengono visualizzate sopra le altre.
Figura 3. Il valore Z che rappresenta l'elevazione.

Puoi applicare l'elevazione a un layout basato su schede, che ti aiuta a mostrare informazioni importanti all'interno delle schede con un aspetto Material. Puoi utilizzare il widget CardView per creare schede con un'elevazione predefinita. Per maggiori informazioni, vedi Creare un layout basato su schede.

Per informazioni sull'aggiunta dell'elevazione ad altre visualizzazioni, consulta Creare ombre e visualizzazioni 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, nelle modifiche allo stato della visualizzazione e nelle transizioni delle attività.

Queste API ti consentono di:

  • Rispondere agli eventi di tocco nelle visualizzazioni con animazioni di feedback al tocco.
  • Nascondi e mostra le visualizzazioni con animazioni a rivelamento circolare.
  • Passa da un'attività all'altra con animazioni di transizione attività personalizzate.
  • Crea animazioni più naturali con i moti curvi.
  • Anima le modifiche in una o più proprietà di vista con le animazioni di modifica dello stato di visualizzazione.
  • Mostra animazioni nei disegni dell'elenco di stati tra le modifiche dello stato della visualizzazione.

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

Per ulteriori informazioni, consulta Introduzione alle animazioni.

Drawable

Le seguenti funzionalità per i disegni ti consentono di implementare le app di Material Design:

  • I disegni vettoriali sono scalabili senza perdere la definizione e sono perfetti per le icone in-app a un colore. Scopri di più sugli Drawable vettoriali.
  • La colorazione disegnabile consente di definire le bitmap come maschera alfa e di colorarle con un colore in fase di runtime. Scopri come aggiungere una tinta ai disegnabili.
  • L'estrazione dei colori consente di estrarre automaticamente i colori più prominenti da un'immagine bitmap. Scopri come selezionare i colori con l'API Palette.