A partire da Android 12, Material You Design si concentra sull'espressione e sulla fluidità del sistema operativo Android, con l'obiettivo di aiutare gli utenti a creare e possedere un'unica esperienza coesa adatta alle loro esigenze. In qualità di partner Android, sei incoraggiato a incorporare il materiale che progetti nei tuoi dispositivi Android nelle seguenti aree:
- Colore dinamico
- Movimento
- Widget
Colore dinamico
Il colore dinamico è il fulcro di Material You Design e una parte fondamentale della strategia pluriennale di Android volta a offrire agli utenti una personalizzazione più semplice e profonda come nessun altro dispositivo riesce a fare. Materiale che offri:
Utenti e sviluppatori una storia ricca e coerente di personalizzazione disponibile in qualsiasi dispositivo Android.
Opportunità per gli OEM Android di continuare a innovare l'interfaccia utente del sistema e le app di prima parte in linea con il colore, la marca e la forma dell'hardware e del marchio.
Per sfruttare i vantaggi del colore dinamico, utilizza la storia dell'estrazione del colore di Android 12 Material You come parte fondamentale dell'offerta software agli utenti. Sul dispositivo, utilizza la logica di estrazione del colore presente in AOSP, in particolare la logica che accetta un singolo colore di sfondo o di origine del tema e lo restituisce tramite 65 API di colore. Per i requisiti del colore dinamico, vedere Utilizzo del colore dinamico .
Il flusso di colore dinamico completo comprende quattro passaggi, come illustrato di seguito:
Figura 1. Materiale Il flusso di colore dinamico
L'utente modifica lo sfondo o il tema tramite il selettore OEM.
L'utente seleziona una delle seguenti opzioni:
Tema del dispositivo. Se selezionato, Android seleziona automaticamente un singolo colore di origine che soddisfa i requisiti.
Nuovo sfondo + tema. Quando selezionata, la logica AOSP seleziona automaticamente un singolo colore sorgente dallo sfondo selezionato.
AOSP espande il singolo colore sorgente in 5 tavolozze tonali con 13 varianti di colore tonali ciascuna, secondo la logica AOSP, che poi popolano i 65 attributi di colore.
L'interfaccia utente dell'app utilizza i 65 attributi di colore in modo coerente nell'ecosistema delle app Android. Ti invitiamo a utilizzare la stessa tavolozza di colori per l'interfaccia utente del sistema del dispositivo e per le app specifiche dell'OEM.
Patch per Android 12
Per ottenere la logica end-to-end per l'estrazione del colore dello sfondo e consentire al dispositivo di riempire le API a 65 colori in modo coerente con l'ecosistema, includi le seguenti patch nell'implementazione di Android 12:
Obbligatorio
Fortemente raccomandato
- Risolte le condizioni di competizione durante l'impostazione dei sysprop del colore di avvio.
- Consenti agli overlay di ricevere notifiche sulle modifiche al tema
- Risolte le condizioni di gara durante l'impostazione dei sysprop del colore di avvio (round 2)
- Sposta FeatureFlags nel pacchetto flag.
- Implementare correttamente il supporto dei temi multiutente
- Corretta l'opzione del colore dello sfondo specificata mancante dopo il riavvio
- Correzione dell'errore nel calcolo della tonalità terziaria
- Non consentire alle app in background di cambiare tema
Specifica dei colori personalizzati in ThemePicker
Se stai utilizzando l'app AOSP ThemePicker, l'app WallpaperPicker mostra la sezione dei colori se sono soddisfatte entrambe le seguenti condizioni:
-
flag_monetsuframeworks/base/packages/SystemUI/res/values/flags.xmlètrue. - Un APK stub di sistema con il nome del pacchetto è definito in
themes_stub_packagenel filepackages/apps/ThemePicker/res/values/override.xml.
Formato APK stub
Una versione di esempio di questo APK è disponibile in packages/apps/ThemePicker/themes .
Questo APK dovrebbe contenere solo risorse, descrivendo in dettaglio i colori di base disponibili e i loro nomi.
Lo stub dovrebbe contenere un file XML sotto 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, purché le stringhe seguenti siano denominate bundle_name_ item .
Dovrebbe esserci una stringa bundle_name_ item per ciascun colore, con un nome descrittivo per ciascun colore. Questi possono essere tradotti aggiungendo le stringhe tradotte corrispondenti nelle directory res/values- language code .
I valori di colore effettivi possono trovarsi sullo stesso XML o su 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 bundle di colori, dovrebbe esserci una color_primary_ item e una color_secondary_ item (ed entrambi i colori dovrebbero essere dello stesso colore). I valori per queste voci color sono i codici colore effettivi per ciascun colore da mostrare nella sezione dei colori di base .
Passaggio 1: crea un'esperienza di tematizzazione utente
Il selettore temi è il luogo in cui gli utenti interagiscono con le nuove funzionalità di personalizzazione di Material You e potenzialmente scelgono tra opzioni di colore o preimpostazioni. Poiché si adatta al tuo prodotto e ai dati demografici dell'utente, puoi offrire agli utenti un'esperienza di personalizzazione e colore più ricca attraverso l'uso di un selettore di temi o di sfondo .
- Quando si utilizza un selettore di sfondi, l'estrazione del colore dello sfondo è attiva per impostazione predefinita. Tuttavia, puoi apportare alcune personalizzazioni al selettore per fornire più opzioni all'utente.
Passaggio 2: estrai il colore dello sfondo in un colore sorgente
Per abilitare l'estrazione del colore dello sfondo, scegli le patch Android 12 elencate sopra (questa funzionalità sarà abilitata per impostazione predefinita in una futura versione AOSP). 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 seleziona il colore con la frequenza più alta adatto all'uso. Per sfruttare altri colori sorgente restituiti dall'algoritmo e presentare tali colori agli utenti nel selettore temi, utilizzare ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) .
Per essere idoneo all'uso, un colore sorgente (estratto dallo sfondo o da una preimpostazione scelta dall'utente) deve avere un valore di crominanza CAM16 minimo pari a 5; ciò garantisce che il colore sorgente non venga influenzato da tenui toni scuri quando viene convertito da un singolo colore a 65 colori tonali e rimanga rappresentativo della scelta dell'utente. Per leggere e modificare i colori in CAM16, utilizzare 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 le app di terze parti che supportano il colore dinamico abbiano un bell'aspetto procedendo come segue:
- Utilizzare la tavolozza dei materiali predefinita disabilitando
flag_monetsuframeworks/base/packages/SystemUI/res/values/flags.xml.- Assicurati che gli utenti possano comunque personalizzare il proprio sistema operativo utilizzando un selettore di temi preimpostato.
Passaggio 3: espandi il colore di origine nelle API dei colori
Utilizzando il colore sorgente singolo derivato dal passaggio precedente, Android genera 5 tavolozze tonali uniche (accento 1-3, neutro 1-2), ciascuna tavolozza include 13 colori e ciascun colore include diversi valori di luminanza (da 0 a 1000), per un totale di 65 colori. La logica fornita nelle patch di Android 12 implementa correttamente questa espansione dei colori; i dettagli forniti di seguito descrivono l'implementazione.
Per coerenza dello sviluppatore, le 5 tavolozze tonali (accent1, accent2, accent3, neutral1, neutral2) e i relativi 13 colori corrispondenti devono essere basati sul singolo colore sorgente con le rispettive modifiche ai valori di crominanza e tonalità CAM16 come scritto di seguito:
- Crominanza: usa "16"
- Tonalità: uguale alla fonte
- Crominanza: usa "32"
- Tonalità: ruota di 60 gradi in positivo
- Crominanza: usa "4"
- Tonalità: uguale alla fonte
- Crominanza: usa "8"
- Tonalità: uguale alla fonte
CTS include test per la convalida delle chiamate API di luminanza e tonalità. Per eseguire, utilizzare atest SystemPalette .
Passaggio 4: utilizza i colori dinamici nelle app e nell'interfaccia utente del sistema
Dopo aver impostato i colori dinamici su un dispositivo, le app seguono le linee guida sui materiali per utilizzare i colori. Le linee guida sui materiali dovrebbero essere rilasciate su material.io entro il 26 ottobre 2021 per l'adozione da parte di app di terze parti. Per l'interfaccia utente di sistema e le app proprietarie, consigliamo vivamente di integrare colori dinamici nell'intera esperienza utente in modo che si adattino al tuo hardware e al tuo marchio e ti aiutino a differenziare i tuoi dispositivi.
Per indicazioni generali sul colore dinamico, vedere quanto segue:
Utilizza i colori principali per gli elementi in primo piano nelle app e nell'interfaccia utente del 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 colorUtilizza colori neutri per gli elementi di sfondo nelle app e nell'interfaccia utente del 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 vengono utilizzate le API in SysUI, consulta Risorse aggiuntive .
Passaggio 5: aggiungi opzioni di colore dinamico nella tua implementazione AOSP WallpaperPicker
Crea per Android 13 e versioni successive
A partire da Android 13, android.theme.customization.accent_color è deprecato. Viene aggiunto un nuovo attributo android.theme.customization.theme_style per supportare diverse varianti di colore. Al momento abbiamo quattro varianti nel codice 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.
Questi vengono inviati a Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES , come mostrato nel JSON di seguito:
{
"android.theme.customization.system_palette":"B1611C",
"android.theme.customization.theme_style":"EXPRESSIVE"
}
Crea per Android 12 e versioni precedenti
Quando si utilizza un selettore di temi personalizzato, 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 esempio di colore di origine valido):
{
"android.theme.customization.system_palette":"746BC1",
"android.theme.customization.accent_color":"746BC1"
}
In questo modo si salta l'estrazione del colore dello sfondo (passaggio 2) ed si espande direttamente il colore sorgente fornito in 65 attributi di colore (passaggio 3).
Passaggio 6: invia un ticket
Oltre all'integrazione del sistema, devi compilare un ticket e comunicarci il nome del tuo marchio ( Build.MANUFACTURER ). Poiché la maggior parte delle app di terze parti utilizza i componenti materiali per Android per mostrare i colori dinamici, utilizziamo una lista consentita codificata per indicare quali dispositivi hanno integrato la funzionalità delle tavolozze tonali dei colori dinamici .
Movimento
Il movimento fluido rende i dispositivi moderni e premium. Per creare e mantenere la fiducia e la felicità degli sviluppatori, l'overscroll e l'ondulazione sono due parti fondamentali del movimento fluido che devono apparire coerenti.
Utilizzo dell'overscroll nel sistema operativo
Android 12 include un movimento di overscroll più reattivo e dinamico sotto forma di un allungamento della vista, mostrato quando l'utente tenta di scorrere oltre il bordo di un elenco. Un esempio è mostrato di seguito:
Figura 2. Effetto overscroll di Android 12, come mostrato in Impostazioni
Per garantire coerenza agli sviluppatori, assicurati che l'effetto di overscroll complessivo sui tuoi dispositivi sia simile al seguente:
Sui dispositivi che restituiscono true per
ActivityManager.isHighEndGfx(), l'effetto di scorrimento eccessivo è un allungamento non lineare dello schermo (come mostrato sopra).Sui dispositivi con prestazioni inferiori, l'effetto di allungamento è semplificato in un allungamento lineare (per ridurre il carico sul sistema).
Utilizzo dello scorrimento eccessivo nelle app proprietarie
Quando utilizzi visualizzazioni personalizzate, potrebbe essere necessario modificare alcune app e l'interfaccia utente di sistema che utilizzano l'effetto allungamento.
Per supportare l'overscroll esteso, esegui l'aggiornamento alle librerie più recenti:
-
androidx.recyclerview:recyclerview:1.3.0-alpha01perRecyclerView -
androidx.core:core:1.7.0-alpha01perNestedScrollVieweEdgeEffectCompat -
androidx.viewpager:viewpager:1.1-alpha01perViewPager
-
Per i layout personalizzati che utilizzano
EdgeEffect, considera le seguenti modifiche UX:Con l'overscorrimento allungato, gli utenti non devono interagire con i contenuti del layout mentre viene allungato. Gli utenti dovrebbero manipolare solo l'estensione stessa e non, ad esempio, essere in grado di premere un pulsante nel contenuto.
Quando gli utenti toccano il contenuto mentre è in corso l'animazione
EdgeEffect, dovrebbero catturare l'animazione e poter manipolare l'allungamento. Il valore pull corrente è disponibile daEdgeEffectCompat.getDistance().Per manipolare il valore pull e restituire l'importo consumato, utilizzare
onPullDistance(). Ciò consente agli sviluppatori di passare agevolmente dall'allungamento allo scorrimento mentre il dito estende il contenuto oltre la posizione iniziale.Quando si lavora con lo scorrimento annidato, se il contenuto è allungato, l'allungamento dovrebbe consumare il movimento del tocco prima del contenuto annidato, altrimenti l'annidamento potrebbe scorrere quando il dito cambia direzione invece di rilasciare l'allungamento.
Per i dettagli sullo scorrimento eccessivo, fare riferimento a Animare un gesto di scorrimento .
Utilizzo dell'ondulazione (feedback tattile) nel tuo sistema operativo
Android 12 include un'ondulazione del tocco più morbida e sottile per fornire feedback agli utenti quando toccano.
Figura 3. Effetto a catena di Android 12, con un'animazione di riempimento più morbida
Per garantire la prevedibilità degli sviluppatori e offrire un'esperienza utente ottimale, assicurati che l'effetto a catena sui tuoi dispositivi sia simile all'esempio mostrato sopra. Anche se non è necessario eseguire passaggi di integrazione specifici per supportare gli effetti a catena, dovresti testare l'effetto sui tuoi dispositivi per verificare eventuali regressioni indesiderate introdotte nella tua 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.
Nel tuo sistema operativo, supporta le API per sviluppatori relative a layout, dimensioni e parametri software dei widget (ad esempio, dimensione degli angoli arrotondati). La tua implementazione dovrebbe supportare correttamente i widget nel fornire parametri tramite API e nel garantire che i widget siano dimensionabili e configurabili dall'utente.
Nelle tue app, sfrutta le nuove funzionalità API per aggiornare o creare nuovi widget proprietari, ove possibile. Per tutti i widget di app proprietari di tua competenza, esegui l'elenco di controllo per sviluppatori di seguito.
- La priorità si basa sulle raccomandazioni della piattaforma.
- Per i dettagli su una raccomandazione, seguire il collegamento nella colonna Modifica.
La zona Modifica Priorità di attuazione Migliora l'esperienza domestica Aggiungi anteprime scalabili P1 Aggiungi una descrizione del widget P1 Semplifica la personalizzazione dei widget P2 (facoltativo) Abilita transizioni più fluide P0 Evita i trampolini di trasmissione P0 Adotta le linee guida sui widget Migliora le dimensioni e i layout dei widget P2 Applica colori dinamici P0 Implementa angoli arrotondati P0 Aggiungi nuovi pulsanti composti P2 Semplifica il codice del widget esistente Semplifica le raccolte RemoteView P2 Semplifica il runtime di RemoteView P2
Risorse addizionali
Utilizzo del colore SysUI
(accento1 = LA1, accento2 = LA2, accento3 = LA3, neutro1 = N1, neutro2 = N2)
Figura 4. Utilizzo del colore dinamico nell'interfaccia utente del sistema
Aggiornamenti degli attributi colore della libreria materiali
Il materiale aggiornerà gli attributi del tema nella prossima versione creando ruoli di colore utilizzati per fornire colore a visualizzazioni specifiche.
| Ruolo del colore | Attributo del tema Android | Tema leggero Colore dinamico | Tema scuro Colore dinamico |
|---|---|---|---|
| Primario | colorePrimario | system_accent1_600 | system_accent1_200 |
| Alla Primaria | colorOnPrimary | system_accento1_0 | system_accent1_800 |
| Secondario | colorSecondario | system_accent2_600 | system_accent2_200 |
| Sul secondario | colorOnSecondary | system_accento2_0 | system_accent2_800 |
| Errore | colorErrore | N/D (rosso_600) | N/D (rosso_200) |
| In caso di errore | colorOnError | N/D (bianco) | N/D (rosso_900) |
| Sfondo | android:colorBackground | system_neutral1_10 | system_neutral1_900 |
| Sullo sfondo | colorSulloSfondo | system_neutral1_900 | system_neutral1_100 |
| Superficie | colorSurface | system_neutral1_10 | system_neutral1_900 |
| In superficie | colorOnSurface | system_neutral1_900 | system_neutral1_100 |
Il materiale aggiornerà i suoi attributi di stato con i seguenti puntatori:
| Ruolo del colore | Attributo del tema Android | Tema leggero Colore dinamico | Tema scuro Colore dinamico |
|---|---|---|---|
| Contenuto dello stato primario | colorPrimaryStateContent | system_accent1_700 | system_accent1_200 |
| Livello di stato primario | colorPrimaryStateLayer | system_accent1_600 | system_accent1_300 |
| Contenuto dello stato secondario | colorSecondaryStateContent | system_accent2_700 | system_accent2_200 |
| Livello di stato secondario | colorSecondaryStateLayer | system_accent2_600 | system_accent2_300 |
| Sul contenuto dello stato primario | colorOnPrimaryStateContent | system_accento1_0 | system_accent1_800 |
| Sul livello dello stato primario | colorOnPrimaryStateLayer | system_accent1_900 | system_accent1_800 |
| Sul contenuto dello stato secondario | colorOnSecondaryStateContent | system_accento2_0 | system_accent2_800 |
| Sul livello dello stato secondario | colorOnSecondaryStateLayer | system_accent2_900 | system_accent2_800 |
| Sul contenuto dello stato del contenitore primario | colorOnPrimaryContainerStateContent | system_accent1_900 | system_accent1_900 |
| Sul livello dello stato del contenitore primario | colorOnPrimaryContainerStateLayer | system_accent1_900 | system_accent1_900 |
| Sul contenuto dello stato del contenitore secondario | colorOnSecondaryContainerStateContent | system_accent2_900 | system_accent2_900 |
| Sul livello dello stato del contenitore secondario | colorOnSecondaryContainerStateLayer | system_accent2_900 | system_accent2_900 |
| Sul contenuto dello stato del contenitore terziario | colorOnTertiaryContainerStateContent | system_accent3_900 | system_accent3_900 |
| Sul livello dello stato del contenitore terziario | colorOnTertiaryContainerStateLayer | system_accent3_900 | system_accent3_900 |
| Sul contenuto dello stato della superficie | colorOnSurfaceStateContent | system_neutral1_900 | system_neutral1_100 |
| Sul livello dello stato di superficie | colorOnSurfaceStateLayer | system_neutral1_900 | system_neutral1_100 |
| Contenuto dello stato della variante di superficie | colorOnSurfaceVariantStateContent | system_neutral2_700 | system_neutral2_200 |
| Sul livello dello stato della variante di superficie | colorOnSurfaceVariantStateLayer | system_neutral2_700 | system_neutral2_200 |
| Contenuto dello stato di errore | colorErrorStateContent | rosso800 | rosso200 |
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 di default .
ThemeOverlayController.java attiva la logica con ThemeOverlayController#mOnColorsChangedListener e WallpaperManager#onWallpaperColorsChanged .
Per gli sfondi animati o gli sfondi video , potremmo sapere quando l'estrazione colore prende il colore dallo schermo? Alcuni utenti potrebbero desiderare i colori dell'ultimo fotogramma poiché vengono visualizzati nella maggior parte dei casi.
L'estrazione del colore viene attivata quando l'utente imposta lo sfondo o dopo un ciclo di accensione 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 posso abilitare il selettore temi per mostrare più colori sorgente affinché gli utenti possano scegliere rispetto al colore con la frequenza più alta? C'è un modo per ottenere quei colori dalla logica di estrazione?
SÌ. Nel selettore del tema puoi utilizzare ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) .
C'è una funzionalità sui nomi dei pixel come icona a tema . È incluso nelle tre patch che hai condiviso? Come possono gli OEM implementarlo?
No. Le icone a tema sono in versione beta e non sono disponibili in Android 12.
Esiste un modo per utilizzare l'app Google Wallpaper con le funzionalità di estrazione e selezione del colore abilitate?
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 maggiori dettagli.
Google può condividere l'app o il codice sorgente in modo che gli OEM possano implementare la propria versione dell'anteprima dinamica dei colori nel menu delle impostazioni, che è 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 cambiato il colore, come mostrato nell'app Google Wallpaper?
L'app di selezione dello sfondo prevede che un ContentProvider sia disponibile dal Launcher (un launcher basato su Launcher3 lo ha). L'anteprima viene fornita da GridCustomizationsProvider in Launcher, a cui è necessario fare riferimento nei metadati dell'attività principale di Launcher affinché l'app per sfondi e stili possa leggerla. Tutto questo è implementato nel Launcher3 di AOSP ed è disponibile per gli OEM.