Design Material You

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

A partire da Android 12, il design Material You si concentra sull'espressione e sulla fluidità del sistema operativo Android, con l'obiettivo di aiutare gli utenti a creare e possedere un'esperienza unica e coerente in base alle loro esigenze. In qualità di partner Android, ti invitiamo a incorporare il design Material You nei tuoi dispositivi Android nelle seguenti aree:

• Colore dinamico
• Movimento
• Widget

Colore dinamico

Il colore dinamico è il fulcro del design di Material You e un elemento chiave della strategia pluriennale di Android per offrire ai propri utenti una personalizzazione più semplice e profonda rispetto a qualsiasi altro dispositivo. Material You offre:

• Utenti e sviluppatori una storia coerente e completa di personalizzazione disponibile su qualsiasi dispositivo Android.

• Opportunità per gli OEM Android di continuare a innovare l'interfaccia utente di sistema e le app proprietarie in modo coerente con il colore, la marca e la forma del loro hardware e del loro brand.

Per sfruttare il colore dinamico, utilizza la storia di estrazione del colore Material You di Android 12 come parte fondamentale della tua offerta software per gli utenti. Sul dispositivo, utilizza la logica di estrazione dei colori in AOSP, in particolare la logica che acquisisce un singolo colore di sfondo o tema di origine e lo emette tramite 65 API di colore. Per i requisiti relativi al colore dinamico, vedi Utilizzare il colore dinamico.

Il flusso completo dei colori dinamici include quattro passaggi, come illustrato di seguito:

Figura 1. Flusso di colori dinamici di Material You

1. L'utente cambia lo sfondo o il tema tramite il selettore OEM.

2. L'utente seleziona una delle seguenti opzioni:

   • Tema del dispositivo. Se selezionata, Android sceglie automaticamente un singolo colore di origine che soddisfa i requisiti.

   • Nuovo sfondo e nuovo tema. Se questa opzione è selezionata, la logica AOSP sceglie automaticamente un singolo colore di origine dallo sfondo selezionato.

3. AOSP espande il singolo colore di origine in 5 tavolozze di tonalità con 13 varianti di colore di tonalità ciascuna, in base alla logica AOSP, che poi completa i 65 attributi di colore.

4. L'interfaccia utente dell'app utilizza i 65 attributi di colore in modo coerente nell'ecosistema delle app per Android. Ti consigliamo di utilizzare la stessa tavolozza dei colori per l'interfaccia utente di sistema del dispositivo e per le app specifiche dell'OEM.

Patch di Android 12

Per ottenere la logica end-to-end per l'estrazione del colore dello sfondo e per consentire al dispositivo di compilare le API a 65 colori in modo coerente con l'ecosistema, includi le seguenti patch nell'implementazione di Android 12:

• Obbligatorio

  • Aggiungere monet ad AOSP
  • Regolare i filtri Chroma/lstar per i colori del seme
  • Utilizza un valore massimo di crominanza di 40 a un tono di 90

• Vivamente consigliato

  • Correzione della condizione di gara durante l'impostazione dei sysprop del colore di avvio.
  • Consentire agli overlay di ricevere notifiche sulle modifiche al tema
  • Correzione della condizione di gara durante l'impostazione dei sysprop del colore di avvio (secondo round)
  • Sposta FeatureFlags nel pacchetto flags.
  • Implementare correttamente il supporto dei temi multiutente
  • Correzione dell'opzione di colore dello sfondo specificato mancante dopo il riavvio
  • Correggere l'errore di calcolo della tonalità terziaria
  • Non consentire alle app in background di cambiare il tema

Specificare colori personalizzati in ThemePicker

Se utilizzi l'app AOSP ThemePicker, l'app WallpaperPicker mostra la sezione dei colori se sono soddisfatte entrambe le seguenti condizioni:

• flag_monet su frameworks/base/packages/SystemUI/res/values/flags.xml è true.
• Un APK stub di sistema con il nome del pacchetto è definito in themes_stub_package nel packages/apps/ThemePicker/res/values/override.xml file.

Formato APK stub

Una versione di esempio di questo APK è disponibile in packages/apps/ThemePicker/themes.

Questo APK deve contenere solo risorse, che descrivono i colori di base disponibili e i relativi nomi.

Lo stub deve contenere un file XML in res/xml con il seguente formato:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="color_bundles">
        <item>color1</item>
        <item>color2</item>
        <item>color3</item>
        <item>color4</item>
    </array>

    <string name="bundle_name_color1">Blue</string>
    <string name="bundle_name_color2">Red</string>
    <string name="bundle_name_color3">Yellow</string>
    <string name="bundle_name_color4">Green</string>

</resources>

In questo file, ogni item all'interno di color_bundles ha un nome distinto, a condizione che le stringhe riportate di seguito siano denominate bundle_name_item.

Deve essere presente una stringa bundle_name_item per ogni colore, con un nome descrittivo per ogni colore. Possono essere tradotti aggiungendo le stringhe tradotte corrispondenti nelle directory res/values-language code.

I valori di colore effettivi possono trovarsi nello stesso file XML o in un file XML di risorse distinto con il seguente formato:

<resources>
    <color name="color_primary_color1">#0000FF</color>
    <color name="color_secondary_color1">#0000FF</color>

    <color name="color_primary_color2">#ff0000</color>
    <color name="color_secondary_color2">#ff0000</color>

    <color name="color_primary_color3">#ffff00</color>
    <color name="color_secondary_color3">#ffff00</color>

    <color name="color_primary_color4">#00ff00</color>
    <color name="color_secondary_color4">#00ff00</color>
</resources>

Per ogni elemento nell'array dei set di colori, deve essere presente una voce color_primary_item e una color_secondary_item (e entrambi i colori devono essere dello stesso colore). I valori di queste voci color sono i codici colore effettivi di ciascun colore da mostrare nella sezione Colore di base.

Passaggio 1: crea un'esperienza di scelta dei temi per gli utenti

Il selettore dei temi è il luogo in cui gli utenti interagiscono con le nuove funzionalità di personalizzazione di Material You e possono potenzialmente scegliere tra opzioni di colore o preset. In base al tuo prodotto e ai dati demografici degli utenti, puoi offrire agli utenti un'esperienza di personalizzazione e colori più ricca tramite l'uso di un selettore di temi o di un selettore di sfondi.

• Quando utilizzi un selettore di sfondi, l'estrazione del colore dello sfondo è attiva per impostazione predefinita. Tuttavia, puoi apportare alcune personalizzazioni al selettore per offrire all'utente più opzioni.

Passaggio 2: estrai il colore dello sfondo in un colore di origine

Per attivare l'estrazione del colore della carta da parati, scegli le patch Android 12 elencate sopra (questa funzionalità verrà attivata per impostazione predefinita in una release AOSP futura). La logica AOSP che attiva l'estrazione dello sfondo inizia da frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java, su ThemeOverlayController#mOnColorsChangedListener, tramite WallpaperManager#onWallpaperColorsChanged. Ti consigliamo di utilizzare la logica AOSP non modificata per garantire un'esperienza di sviluppo coerente.

Per impostazione predefinita, la logica sceglie il colore con la frequenza più alta adatto all'uso. Per sfruttare altri colori di origine restituiti dall'algoritmo e presentarli agli utenti nel selettore dei temi, utilizza ColorScheme#getSeedColors(wallpaperColors: WallpaperColors).

Per essere adatto all'uso, un colore di origine (estratto dallo sfondo o da una preimpostazione scelta dall'utente) deve avere un valore di croma CAM16 minimo pari a 5. In questo modo, il colore di origine non viene influenzato da lievi tonalità scure quando viene convertito da un singolo colore in 65 tonalità e rimane rappresentativo della scelta dell'utente. Per leggere e modificare i colori in CAM16, usa Cam#fromInt o Cam#getInt.

Utilizzo di una tavolozza di colori non dinamica Per i dispositivi che non supportano l'estrazione del colore dello sfondo, puoi comunque assicurarti che le app Google e di terze parti che supportano i colori dinamici abbiano un aspetto fantastico procedendo nel seguente modo:

• Utilizza la tavolozza Material predefinita disattivando flag_monet su frameworks/base/packages/SystemUI/res/values/flags.xml.
• Assicurati che gli utenti possano comunque personalizzare il sistema operativo utilizzando un selettore di temi preimpostati.

Passaggio 3: espandi il colore di origine nelle API di colore

Utilizzando il singolo colore di origine derivato dal passaggio precedente, Android genera 5 tavolozze di tonalità uniche (accento 1-3, neutro 1-2), ciascuna tavolozza contenente 13 colori e ciascun colore contenente valori di luminanza diversi (da 0 a 1000), per un totale di 65 colori. La logica fornita nei patch di Android 12 implementa questa espansione del colore correttamente; i dettagli forniti di seguito descrivono l'implementazione.

Per la coerenza degli sviluppatori, le 5 tavolozze di tonalità (accent1, accent2, accent3, neutral1, neutral2) e i relativi 13 colori devono essere basati sul singolo colore di origine con le rispettive modifiche ai valori di croma e tonalità CAM16 come indicato di seguito:

• system_accent1

  • Chroma: utilizza "40" per le varianti di colore che terminano con 0, 10, 50, e 100, in caso contrario utilizza "48"
  • Tonalità: uguale a quella dell'origine

• system_accent2

  • Chroma: usa "16"
  • Tonalità: uguale a quella dell'origine

• system_accent3

  • Chroma: utilizza "32"
  • Tonalità: ruota di 60 gradi in senso orario

• system_neutral1

  • Chroma: utilizza "4"
  • Tonalità: uguale a quella dell'origine

• system_neutral2

  • Chroma: usa "8"
  • Tonalità: uguale a quella dell'origine

CTS include test per la convalida delle chiamate all'API di illuminazione e tonalità. Per eseguirlo, utilizza atest SystemPalette.

Passaggio 4: utilizza i colori dinamici nelle app e nell'interfaccia utente di sistema

Dopo aver impostato i colori dinamici su un dispositivo, le app seguono le linee guida di Material per utilizzarli. Le linee guida di Material verranno rilasciate su material.io entro il 26 ottobre 2021 per essere adottate dalle app di terze parti. Per l'interfaccia utente di sistema e le app proprietarie, consigliamo vivamente di integrare i colori dinamici nell'esperienza utente in modo che si adattino al tuo hardware e al tuo brand e ti aiutino a differenziare i tuoi dispositivi.

Per indicazioni generali sui colori dinamici, consulta quanto segue:

• Utilizza i colori di contrasto per gli elementi in primo piano nelle app e nell'interfaccia utente di sistema:

  @android:color/system_accent1_0 … 1000 // most-used foreground color group
  @android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces
  @android:color/system_accent3_0 … 1000 // playful, analogous color
  

• Utilizza colori neutri per gli elementi di sfondo nelle app e nell'interfaccia utente di sistema:

  @android:color/system_neutral1_0 … 1000 // most-used background color group
  @android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces
  

Per ulteriori informazioni su come Material You mappa i colori e su come le API vengono utilizzate in SysUI, consulta le risorse aggiuntive.

Passaggio 5: aggiungi opzioni di colore dinamiche nell'implementazione di WallpaperPicker di AOSP

Compila per Android 13 e versioni successive

A partire da Android 13, android.theme.customization.accent_color è deprecato. È stato aggiunto un nuovo attributo android.theme.customization.theme_style per supportare diverse varianti di colore. Al momento abbiamo quattro varianti nel codice di base, come segue:

TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.

che vengono inviate all'indirizzo Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES, come mostrato nel codice JSON di seguito:

{
    "android.theme.customization.system_palette":"B1611C",
    "android.theme.customization.theme_style":"EXPRESSIVE"
}

Compilare per Android 12 e versioni precedenti

Quando si utilizza un selettore di temi personalizzati, il dispositivo deve inviare un colore di origine valido a Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES fornendo un file JSON nel seguente formato (dove 746BC1 è un colore di origine valido di esempio):

{
      "android.theme.customization.system_palette":"746BC1",
      "android.theme.customization.accent_color":"746BC1"
}

In questo modo, viene saltata l'estrazione del colore dello sfondo (passaggio 2) e il colore di origine fornito viene espanso direttamente in 65 attributi di colore (passaggio 3).

Passaggio 6: apri un ticket

Oltre all'integrazione di sistema, devi aprire un ticket e comunicarci il nome del tuo brand (Build.MANUFACTURER). Poiché la maggior parte delle app di terze parti utilizza Material Components per Android per mostrare i colori dinamici, utilizziamo una lista consentita hardcoded per indicare quali dispositivi hanno integrato la funzionalità Tavolozze di tonalità dei colori dinamici.

Movimento

I movimenti fluidi rendono i dispositivi moderni e di alta qualità. Per conquistare e mantenere la fiducia e la soddisfazione degli sviluppatori, lo scorrimento eccessivo e l'effetto ripple sono due elementi chiave del movimento fluido che devono avere un aspetto e un'esperienza coerenti.

Utilizzare lo scorrimento eccessivo nel sistema operativo

Android 12 include un movimento di scorrimento più dinamico e reattivo sotto forma di allungamento della visualizzazione, mostrato quando l'utente tenta di scorrere oltre il bordo di un elenco. Di seguito è riportato un esempio:

Figura 2. Effetto di scorrimento eccessivo di Android 12, come mostrato nelle Impostazioni

Per la coerenza degli sviluppatori, assicurati che l'effetto di scorrimento eccessivo complessivo sui tuoi dispositivi sia simile al seguente:

• Sui dispositivi che restituiscono true per ActivityManager.isHighEndGfx(), l'effetto overscroll è uno stiramento non lineare dello schermo (come mostrato sopra).

• Sui dispositivi con prestazioni inferiori, l'effetto di allungamento viene semplificato in un allungamento lineare (per ridurre il carico sul sistema).

Utilizzo dell'overscroll nelle app proprietarie

Quando utilizzi le visualizzazioni personalizzate, potresti dover modificare alcune app e l'interfaccia utente di sistema che impiegano l'effetto di allungamento.

• Per supportare lo scorrimento elastico, esegui l'upgrade alle librerie più recenti:

  • androidx.recyclerview:recyclerview:1.3.0-alpha01 per RecyclerView
  • androidx.core:core:1.7.0-alpha01 per NestedScrollView e EdgeEffectCompat
  • androidx.viewpager:viewpager:1.1-alpha01 per ViewPager

• Per i layout personalizzati che utilizzano EdgeEffect, prendi in considerazione le seguenti modifiche all'esperienza utente:

  • Con lo scorrimento elastico, gli utenti non devono interagire con i contenuti del layout mentre viene allungato. Gli utenti devono manipolare solo l'area di stretching e non, ad esempio, essere in grado di premere un pulsante nei contenuti.

  • Quando gli utenti toccano i contenuti durante l'animazione EdgeEffect, devono essere in grado di coglierla e manipolare lo stretching. Il valore pull corrente è disponibile da EdgeEffectCompat.getDistance().

  • Per manipolare il valore pull e restituire l'importo consumato, utilizza onPullDistance(). In questo modo, gli sviluppatori possono passare senza problemi dall'allungamento allo scorrimento quando il dito rilascia i contenuti oltre la posizione iniziale.

  • Quando lavori con lo scorrimento nidificato, se i contenuti sono allungati, l'allungamento deve consumare il movimento tocco prima dei contenuti nidificati, altrimenti il nidificazione potrebbe scorrere quando il dito cambia direzione anziché rilasciare l'allungamento.

Per maggiori dettagli sull'overscroll, consulta Animare un gesto di scorrimento.

Utilizzare l'effetto ripple (feedback tocco) nel sistema operativo

Android 12 include un'eco tocco più morbida e sottile per fornire un feedback agli utenti al tocco verso il basso.

Figura 3. Effetto ripple di Android 12, con un'animazione di riempimento più morbida

Per la prevedibilità degli sviluppatori e per offrire un'esperienza utente ottimale, assicurati che l'effetto domino sui tuoi dispositivi sia simile all'esempio mostrato sopra. Anche se non è necessario eseguire passaggi di integrazione specifici per supportare gli effetti a catena, è consigliabile testare l'effetto sui dispositivi per verificare la presenza di eventuali regressioni involontarie introdotte nell'implementazione.

Widget

I widget sono componenti chiave di un dispositivo Android. Android 12 include nuove API e funzionalità delle API che tutti gli OEM dovrebbero supportare.

• Nel sistema operativo, supporta le API per sviluppatori relative a layout, dimensioni e parametri del software dei widget (ad esempio le dimensioni degli angoli arrotondati). L'implementazione deve supportare correttamente i widget nel fornire parametri tramite le API e assicurarsi che siano ridimensionabili e configurabili dall'utente.

• Nelle tue app, sfrutta le nuove funzionalità dell'API per aggiornare o creare nuovi widget proprietari, se possibile. Per tutti i widget delle app proprietarie di tua competenza, consulta l'elenco di controllo per gli sviluppatori di seguito.

  • La priorità si basa sui consigli della piattaforma.
  • Per i dettagli di un consiglio, segui il link nella colonna Modifica.

  Area	Cambia	Priorità di implementazione
  Migliorare l'esperienza in casa	Aggiungere anteprime scalabili	P1
  	Aggiungere una descrizione del widget	P1
  	Semplificare la personalizzazione dei widget	P2 (facoltativo)
  	Attivare transizioni più fluide	P0
  	Evita i trampolini di trasmissione	P0
  Adottare le linee guida per i widget	Migliorare le dimensioni e i layout dei widget	P2
  	Applicare colori dinamici	P0
  	Implementa gli angoli arrotondati	P0
  	Aggiungere nuovi pulsanti composti	P2
  Semplificare il codice dei widget esistenti	Semplifica le raccolte RemoteView	P2
  	Semplifica il runtime di RemoteView	P2

Risorse aggiuntive

Utilizzo dei colori di SysUI

(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)

Figura 4. Utilizzo del colore dinamico nell'interfaccia utente di sistema

Aggiornamenti dell'attributo del colore della raccolta di materiali

Nella prossima release, Material aggiornerà i suoi attributi tema creando ruoli di colore utilizzati per fornire il colore a visualizzazioni specifiche.

Material aggiornerà gli attributi degli stati con i seguenti indicatori:

Domande frequenti

Estrazione del colore

Una volta che un utente cambia uno sfondo, l'estrazione del colore viene eseguita automaticamente o deve essere attivata da qualche parte?

Con le patch di Android 12, l'estrazione del colore dello sfondo è attiva per impostazione predefinita.

ThemeOverlayController.java attiva la logica con ThemeOverlayController#mOnColorsChangedListener e WallpaperManager#onWallpaperColorsChanged.

Per gli sfondi animati o gli sfondi video, possiamo sapere quando la funzionalità Estrazione colore acquisisce il colore dallo schermo? Alcuni utenti potrebbero preferire i colori dell'ultimo frame, poiché viene visualizzato più a lungo.

L'estrazione del colore viene attivata quando l'utente imposta lo sfondo o dopo un ciclo di accensione/spegnimento dello schermo (in risposta a WallpaperEngine#notifyColorsChanged). L'ultimo evento WallpaperColors (dallo sfondo animato) viene applicato dopo che l'utente spegne e riaccende lo schermo.

Selettore di temi/sfondi

Come faccio ad attivare il selettore di temi in modo che mostri più colori di origine tra cui scegliere per gli utenti rispetto al colore con la frequenza più alta? Esiste un modo per ottenere questi colori dalla logica di estrazione?

Sì. Nel selettore dei temi, puoi utilizzare ColorScheme#getSeedColors(wallpaperColors: WallpaperColors).

Esiste una funzionalità per i nomi dei Pixel chiamata Icona a tema. È incluso nei tre patch che hai condiviso? In che modo gli OEM possono implementare questa funzionalità?

No. Le icone a tema sono in versione beta e non sono disponibili in Android 12.

Esiste un modo per utilizzare l'app Sfondo Google con le funzionalità di estrazione e selezione dei colori attive?

Sì. Le funzionalità possono essere implementate nell'ultima versione dell'app Google Wallpaper seguendo i passaggi di integrazione descritti in precedenza in questa pagina.

Contatta il tuo TAM per ulteriori dettagli.

Google può condividere l'app o il codice sorgente in modo che gli OEM possano implementare la propria versione dell'anteprima dei colori dinamici nel menu delle impostazioni, simile alla sezione di anteprima mostrata nell'app di selezione degli sfondi di Google?

Le classi principali che eseguono il rendering dell'anteprima sono WallpaperPicker2 e Launcher3.

La schermata di anteprima dello sfondo è WallpaperSectionController.

Come implementare l'anteprima dopo aver modificato il colore, come mostrato nell'app Sfondo di Google?

L'app di selezione dello sfondo si aspetta che un ContentProvider sia disponibile dall'Avvio app (un Avvio app basato su Launcher3 lo ha). L'anteprima viene fornita da GridCustomizationsProvider in Avvio app, a cui deve essere fatto riferimento nei metadati dell'attività principale di Avvio app affinché l'app Sfondo e stile possa leggerla. Tutto questo è implementato in Launcher3 di AOSP ed è disponibile per gli OEM.