Material Design per Android

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

Material Design è una guida completa per la progettazione visiva, del movimento e dell'interazione su piattaforme e dispositivi. 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 utilizzare la libreria Android Material Components.

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

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

Tema e widget Material

Per sfruttare le funzionalità di Material, come lo stile dei widget UI standard, e per semplificare la definizione dello stile della tua app, applica un tema basato su Material alla tua app.

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

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

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

Se possibile, utilizza le icone Material predefinite. Ad esempio, per il pulsante "menu" di navigazione del riquadro di navigazione a scomparsa, utilizza l'icona standard "hamburger". Consulta Material Design Icons per un elenco delle icone disponibili. Puoi anche importare icone SVG dalla libreria Material Icons con Vector Asset Studio di Android Studio.

Ombre e schede di elevazione

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

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

Puoi applicare l'elevazione a un layout basato su schede, il che ti aiuta a visualizzare informazioni importanti all'interno di schede che offrono un aspetto Material. Puoi utilizzare il widget CardView per creare schede con un'elevazione predefinita. Per saperne di più, vedi Creare un layout basato su schede.

Per informazioni sull'aggiunta dell'elevazione ad altre viste, vedi Creare ombre e ritagliare le viste.

Animazioni

Figura 4. Un'animazione di feedback al tocco.

Le API Animation ti consentono di creare animazioni personalizzate per il feedback tattile nei controlli dell'interfaccia utente, modifiche dello stato della visualizzazione e transizioni delle attività.

Queste API ti consentono di:

  • Rispondi agli eventi di tocco nelle tue visualizzazioni con animazioni di feedback tattile.
  • Nascondi e mostra le visualizzazioni con animazioni di rivelazione circolare.
  • Passa da un'attività all'altra con animazioni di transizione tra le attività personalizzate.
  • Crea animazioni più naturali con il movimento curvo.
  • Anima le modifiche a una o più proprietà della visualizzazione con le animazioni di modifica dello stato della visualizzazione.
  • Mostra le animazioni nei disegnabili dell'elenco degli stati tra le modifiche dello stato della visualizzazione.

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

Per saperne di più, consulta la pagina Introduzione alle animazioni.

Risorse disegnabili

Queste funzionalità per le risorse disegnabili ti aiutano a implementare app Material Design:

  • Le risorse grafiche vettoriali sono scalabili senza perdere definizione e sono perfette per le icone in-app monocolore. Scopri di più sugli elementi grafici vettoriali.
  • Il tinting delle risorse drawable consente di definire le bitmap come maschera alfa e di colorarle con un colore in fase di runtime. Scopri come aggiungere la tinta ai drawables.
  • Il rilevamento del colore consente di estrarre automaticamente i colori principali da un'immagine bitmap. Scopri come selezionare i colori con l'API Palette.