L'opzione Dynamic Color, che è stata aggiunta in Android 12, consente agli utenti di personalizzare i propri dispositivi per allinearsi ai toni con la combinazione di colori dello sfondo personale o tramite un colore selezionato nel selettore di sfondi.
Puoi sfruttare questa funzionalità aggiungendo l'API DynamicColors, che
applica questo tema alla tua app o alla tua attività per rendere l'app più
personalizzata per l'utente.
Questa pagina include istruzioni per implementare i colori dinamici nella tua app. Questa funzionalità è disponibile anche separatamente per widget e icone adattive, come descritto più avanti in questa pagina. Puoi anche provare il codelab.
In che modo Android crea combinazioni di colori
Android esegue i seguenti passaggi per generare combinazioni di colori dallo sfondo di un utente.
Il sistema rileva i colori principali nell'immagine di sfondo selezionata ed estrae un colore di origine.
Il sistema utilizza quel colore di origine per estrapolare ulteriormente i cinque colori chiave noti come Principale, Secondario, Terziario, Neutrale e Variante neutra.
Figura 2. Esempio di estrazione e rimozione del colore di origine dall'immagine di sfondo in cinque colori chiave Il sistema interpreta ogni colore dei tasti in una tavolozza di 13 toni.
Figura 3. Esempio di generazione di una determinata tavolozze dei toni Il sistema utilizza questo singolo sfondo per ricavare cinque diverse combinazioni di colori, che forniscono la base per tutti i temi chiari e scuri.
Come vengono visualizzate le varianti di colore sul dispositivo di un utente
Gli utenti possono selezionare varianti di colore da colori estratti dallo sfondo e temi diversi a partire da Android 12, con altre varianti aggiunte in Android 13. Ad esempio, un utente con uno smartphone Pixel con Android 13 deve selezionare una variante dalle impostazioni Sfondo e stile, come mostrato nella Figura 4.
Android 12 ha aggiunto la variante Tonal Spot, seguita dalle varianti Neutral, Vibrant Tonal ed Expressive in Android 13. Ogni variante ha una ricetta unica che trasforma i colori dei semi dello sfondo di un utente con vivacità e rotazione della tonalità. L'esempio seguente mostra una singola combinazione di colori espressa attraverso queste quattro varianti di colore.
L'app utilizza ancora gli stessi token per accedere a questi colori. Per maggiori dettagli sui token, consulta Creare il tema con i token in questa pagina.
Inizia a utilizzare Compose
Se crei la tua UI con Compose, consulta Temi Material in Compose per i dettagli sull'applicazione del colore dinamico alla tua app.
Come iniziare a utilizzare le visualizzazioni
Puoi applicare il colore dinamico a livello di app o attività. A questo scopo, chiama il numero applyToActivitiesIfAvailable() per registrare un ActivityLifeCycleCallbacks nella tua app.
Kotlin
class MyApplication: Application() {
override fun onCreate() {
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Java
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
DynamicColors.applyToActivitiesIfAvailable(this);
}
}
Poi, aggiungi il tema alla tua app.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
Crea il tuo tema con i token
Dynamic Color sfrutta i token di progettazione per rendere più semplificata e coerente l'assegnazione dei colori a diversi elementi dell'interfaccia utente. Un token di progettazione consente di assegnare semanticamente i ruoli di colore, anziché un valore impostato, a diversi elementi di una UI. Ciò consente al sistema tonale della tua app di avere maggiore flessibilità, scalabilità e coerenza, ed è particolarmente efficace quando si progetta per temi chiari e scuri e colori dinamici.
I seguenti snippet mostrano esempi di temi chiaro e scuro e un XML colore corrispondente, dopo l'applicazione dei token di colore dinamici.
Tema chiaro
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
Tema scuro
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
xml Colori
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
Per avere ulteriori informazioni:
Per scoprire di più su Dynamic Color, sui colori personalizzati e sulla generazione dei token, consulta la pagina Dynamic Color (Colore dinamico) di Material 3.
Per generare la tavolozza dei colori di base nonché i colori e il tema della tua app, dai un'occhiata al Material Theme Builder, disponibile tramite un plug-in Figma o nel browser).
Per scoprire di più su come l'utilizzo delle combinazioni di colori può migliorare l'accessibilità nella tua app, consulta la pagina di Material 3 sull'accessibilità del sistema di colori.
Mantieni i colori personalizzati o del brand
Se la tua app ha colori personalizzati o del brand che non vuoi modificare in base alle preferenze dell'utente, puoi aggiungerli singolarmente mentre crei la tua combinazione di colori. Ecco alcuni esempi:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
In alternativa, puoi utilizzare il generatore di temi Material per importare colori aggiuntivi che ampliano la tua combinazione di colori, creando così un sistema di colori unificato.
Con questa opzione, utilizza HarmonizedColors per modificare il tono dei colori
personalizzati. In questo modo, si ottiene un equilibrio visivo e un contrasto accessibile se combinato con i colori generati dagli utenti. Viene eseguito in fase di runtime con applyToContextIfAvailable().
Consulta le indicazioni di Material 3 sull'armonizzazione dei colori personalizzati.
Applicare il colore dinamico a widget e icone adattive
Oltre ad attivare i temi Dynamic Color nella tua app, puoi supportare anche i temi di Dynamic Color per i widget a partire da Android 12 e per le icone adattive a partire da Android 13.