Il colore dinamico, aggiunto in Android 12, consente agli utenti di personalizzare i dispositivi per allinearli tono alla combinazione di colori del loro sfondo personale o tramite un colore selezionato nel selettore di sfondi.
Puoi sfruttare questa funzionalità aggiungendo l'API DynamicColors, che applica questi temi alla tua app o attività per rendere l'app più personalizzata per l'utente.
Questa pagina include le istruzioni per implementare 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 passaggi seguenti per generare le 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 cinque colori chiave noti come Principale, Secondario, Terziario, Neutrale e Variante neutra.
Figura 2. Esempio di estrazione dei colori di origine dall'immagine di sfondo e dall'estrazione a cinque colori chiave Il sistema interpreta ogni colore dei tasti in una tavolozza di 13 tonalità.
Figura 3. Esempio di generazione di una determinata tavolozza dei toni Il sistema utilizza questo singolo sfondo per ricavare cinque diversi schemi di colori, che forniscono la base per qualsiasi tema chiaro e scuro.
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 ulteriori varianti aggiunte in Android 13. Ad esempio, un utente con uno smartphone Pixel con Android 13 selezionerà 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 originali dello sfondo di un utente attraverso la brillantezza e la rotazione della tonalità. L'esempio seguente mostra una combinazione di colori singola espressa attraverso queste quattro varianti di colore.
La tua app utilizza gli stessi token per accedere a questi colori. Per informazioni dettagliate sui token, consulta Creare un tema con i token in questa pagina.
Inizia a utilizzare Compose
Se stai creando la tua UI con Compose, consulta la pagina relativa ai temi materiali in Compose per informazioni dettagliate su come applicare il colore dinamico alla tua app.
Inizia a utilizzare le visualizzazioni
Puoi applicare il colore dinamico a livello di app o attività. Per farlo, chiama il numero
applyToActivitiesIfAvailable() per registrare
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);
}
}
Dopodiché, aggiungi il tema all'app.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
Crea il tema con i token
Dynamic Color sfrutta i token di progettazione per rendere più semplice e coerente l'assegnazione dei colori ai diversi elementi dell'interfaccia utente. Un token di progettazione consente di assegnare in modo semantico ruoli colore, piuttosto che un valore impostato, a diversi elementi di una UI. Ciò consente al sistema tonale della tua app di avere più flessibilità, scalabilità e coerenza, ed è particolarmente efficace nella progettazione di temi chiari e scuri e colori dinamici.
I seguenti snippet mostrano esempi di temi chiaro e scuro e un XML dei colori corrispondente, dopo l'applicazione di token 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 ulteriori informazioni:
Per scoprire di più su colore dinamico, colori personalizzati e generazione di token, consulta la pagina Colore dinamico di Material 3.
Per generare la tavolozza dei colori di base e i colori e il tema dell'app, dai un'occhiata allo strumento 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ò consentire una migliore 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 il tuo schema 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 di materiali 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 combinati con i colori generati dagli utenti. Si verifica in fase di runtime con applyToContextIfAvailable().
Consulta le linee guida di Material 3 su come armonizzare i colori personalizzati.
Applicare il colore dinamico alle icone adattive e ai widget
Oltre ad attivare la tematizzazione dinamica dei colori nella tua app, puoi anche supportare la tema dinamico dei colori per i widget a partire da Android 12 e le icone adattive a partire da Android 13.