Material You

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 ed è una parte fondamentale della strategia pluriennale di Android per offrire una personalizzazione più semplice e profonda per gli utenti, come nessun altro dispositivo lo fa. Material You offre:

  • Per utenti e sviluppatori, una storia di personalizzazione coerente e completa 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 del colore disponibile in AOSP, in particolare quella che utilizza un singolo colore di origine per sfondo o tema e lo restituisce tramite 65 API colore. Per i requisiti relativi al colore dinamico, vedi Utilizzare il colore dinamico.

Il flusso di colore dinamico completo include quattro passaggi, come illustrato di seguito:

Flusso di colori Material You

Figura 1. Flusso di colori dinamici 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 compila i 65 attributi di colore.

  4. La UI dell'app utilizza i 65 attributi relativi al colore in modo coerente in tutto l'ecosistema di app per Android. Ti invitiamo a utilizzare la stessa tavolozza di 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:

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 file packages/apps/ThemePicker/res/values/override.xml.

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. Queste possono essere tradotte aggiungendo le stringhe tradotte corrispondenti nelle directory res/values-language code.

I valori effettivi del colore possono essere nello stesso XML o in un file XML di risorse separato 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 prodotto e al gruppo demografico di utenti, puoi offrire agli utenti un'esperienza di personalizzazione e colori più completa utilizzando un selettore di temi o 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. Per un'esperienza di sviluppo coerente, consigliamo di usare la logica AOSP non modificata.

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, utilizza 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: usa "40" per le varianti di colore che terminano con 0, 10, 50 e 100, altrimenti "48"
    • Tonalità: uguale a quella dell'origine

  • system_accent2

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

  • system_accent3

    • Chroma: utilizza "32"
    • Tonalità: ruota di 60 gradi positivi

  • system_neutral1

    • Chroma: utilizza "4"
    • Tonalità: uguale all'origine

  • system_neutral2

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

CTS include test per la convalida delle chiamate API luminance e hue. 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 relative al materiale per l'utilizzo dei colori. 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'UI di sistema e le app proprietarie, consigliamo vivamente di integrare i colori dinamici nell'esperienza utente in modo che si adattino all'hardware e al brand e consentano di distinguere i 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'UI 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 AOSP BackgroundPicker

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 coerente.

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:

Material You Overscroll

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

Per garantire la coerenza degli sviluppatori, assicurati che l'effetto overscroll complessivo sui 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 viste personalizzate, potrebbe essere necessario modificare alcune app e UI di sistema che utilizzano l'effetto 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 di 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 l'articolo Animazione di 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.

Material You Ripple

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à API che tutti gli OEM dovrebbero supportare.

Risorse aggiuntive

Utilizzo dei colori di SysUI

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

Utilizzo del colore Material You

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

Aggiornamenti all'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.

Ruolo del colore Attributo tema Android Tema chiaro
Colore dinamico		 Tema scuro
Colore dinamico
Principale colorPrimary system_accent1_600 system_accent1_200
Sul principale colorOnPrimary system_accent1_0 sistema_accent1_800
Secondario colorSecondary system_accent2_600 system_accent2_200
Su Secondario colorOnSecondary sistema_accent2_0 system_accent2_800
Errore colorError N/A (red_600) N/D (rosso_200)
In caso di errore errore colorOnError N/A (bianco) N/D (rosso_900)
Background android:colorBackground sistema_neutrale1_10 system_neutral1_900
In primo piano colorOnBackground system_neutral1_900 sistema_neutrale1_100
Surface colorSurface system_neutral1_10 system_neutral1_900
Su Surface colorOnSurface sistema_neutrale1_900 sistema_neutrale1_100

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

Ruolo del colore Attributo tema Android Tema chiaro
Colore dinamico		 Tema scuro
Colore dinamico
Contenuti dello stato principale colorPrimaryStateContent sistema_accent1_700 sistema_accent1_200
Livello di stato principale colorPrimaryStateLayer system_accent1_600 system_accent1_300
Contenuti relativi agli stati secondari colorSecondaryStateContent system_accent2_700 system_accent2_200
Livello di stato secondario colorSecondState Layer system_accent2_600 sistema_accent2_300
In Contenuti stato principale coloreOnPrincipaleStateContent system_accent1_0 system_accent1_800
Nel livello dello stato principale colorOnPrimaryStateLayer system_accent1_900 system_accent1_800
Informazioni sui contenuti dello stato secondario colorOnSecondStateContent system_accent2_0 system_accent2_800
Nel livello di stato secondario colorOnSecondaryStateLayer sistema_accent2_900 system_accent2_800
In Contenuti stato del contenitore principale colorOnprimaryContainerStateContent system_accent1_900 sistema_accent1_900
Nel livello dello stato del contenitore principale colorOnPrimaryContainerStateLayer system_accent1_900 system_accent1_900
In Contenuti stato contenitore secondario colorOnSecondaryContainerStateContent sistema_accent2_900 sistema_accent2_900
Nel livello dello stato del contenitore secondario colorOnSecondaryContainerStateLayer system_accent2_900 system_accent2_900
Informazioni sui contenuti dello stato del contenitore terziario colorOnTertiaryContainerStateContent system_accent3_900 system_accent3_900
Nel livello di stato del contenitore terziario colorOnTertiaryContainerStateLayer system_accent3_900 system_accent3_900
Contenuti relativi allo stato della piattaforma colorOnSurfaceStateContent sistema_neutrale1_900 system_neutral1_100
Livello di stato della superficie colorOnSurfaceStateLayer system_neutral1_900 sistema_neutrale1_100
Contenuti relativi allo stato della variante sulla superficie colorOnSurfaceVariantStateContent sistema_neutrale2_700 sistema_neutrale2_200
Nel livello Stato variante della superficie colorOnSurfaceVariantStateLayer system_neutral2_700 system_neutral2_200
Contenuti stato errore colorErrorStateContent red800 red200

Domande frequenti

Estrazione del colore

Quando 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 temi/sfondi

Come faccio ad attivare il selettore di temi in modo che mostri più colori di origine che gli utenti possano scegliere rispetto al colore con 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. È inclusa nelle 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 attivate?

Sì. Le funzionalità possono essere implementate nell'ultima versione dell'app Google Sfondo 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 Google?

L'app selettore di sfondi prevede che sia disponibile un ContentProvider in Avvio app (un Avvio app basato su Launcher3 lo offre). 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.