L'opzione Dynamic Color, aggiunta in Android 12, consente agli utenti di personalizzare i loro dispositivi per allineare i toni con la combinazione di colori dello sfondo personale o tramite un colore selezionato nel selettore dello sfondo.
Puoi sfruttare questa funzionalità aggiungendo l'API DynamicColors, che
applica questi temi alla tua app o alla tua attività per personalizzare di più l'app
all'utente.
Questa pagina include le 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 dalla sfondo.
Il sistema rileva i colori principali dell'immagine di sfondo selezionata e estrae un colore di origine.
Il sistema utilizza quel colore di origine per estrapolare ulteriormente i cinque colori chiave noto come Principale, Secondario, Terziario, Neutrale e Neutrale. di addestramento.
Figura 2. Esempio di estrazione dei colori di origine dall'immagine di sfondo e fino a 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 colori diversi che forniscono la base per eventuali 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 diversi temi a partire da Android 12, con altre varianti aggiunte in Android 13. Per Ad esempio, un utente con uno smartphone Pixel con Android 13 deve selezionare una variante dalla sezione Sfondo e delle impostazioni, come mostrato nella Figura 4.
Android 12 ha aggiunto la variante Macchia tonale, seguita da Neutrale e Vibrante. Varianti tonali ed espressive in Android 13. Ogni variante ha un ricetta che trasforma i colori dei semi dello sfondo di un utente con una vivacità e ruotando la tonalità. L'esempio seguente mostra una singola combinazione di colori espressi 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, dai un'occhiata Temi Material in Compose per avere informazioni dettagliate sull'applicazione del colore dinamico alle tue dell'app.
Come iniziare a utilizzare le visualizzazioni
Puoi applicare il colore dinamico a livello di app o attività. A questo scopo, chiama
applyToActivitiesIfAvailable() per registrare un
ActivityLifeCycleCallbacks alla 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 l'assegnazione dei colori i diversi elementi dell'interfaccia utente in modo più semplice e coerente. Un token di progettazione ti consente assegnare semanticamente i ruoli di colore, anziché un valore impostato, a diversi elementi di una UI. In questo modo il sistema tonale dell'app può avere flessibilità, scalabilità e coerenza ed è particolarmente potente progettando temi chiari e scuri e colori dinamici.
I seguenti snippet mostrano esempi di temi chiari e scuri. un file XML di colore corrispondente, dopo l'applicazione dei token di colore dinamico.
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 Colore dinamico di Material 3.
Per generare la tavolozza dei colori di base nonché i colori e il tema della tua app, controlla il generatore di temi Material, disponibile tramite plug-in Figma o nel browser).
Per saperne di più su come l'uso delle combinazioni di colori può migliorare l'accessibilità nell'app, consulta la pagina Material 3 su Accessibilità del sistema di colori.
Mantieni i colori personalizzati o del brand
Se per la tua app sono presenti colori personalizzati o del brand che non vuoi modificare con in base alle preferenze dell'utente, puoi aggiungerle singolarmente mentre crei il colore . Ad esempio:
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 che estendono la tua combinazione di colori, creando così un sistema di colori unificato.
Con questa opzione, usa HarmonizedColors per cambiare il tono delle
colori. In questo modo si ottiene un equilibrio visivo e un contrasto accessibile.
con colori generati dagli utenti. Viene eseguito in fase di runtime
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 di colore dinamico nella tua app, puoi anche supportare Temi di colore dinamico per widget che iniziano con Android 12 e per Icone adattive che iniziano tra Android 13.