Dynamic Color, qui a été ajouté dans Android 12, permet aux utilisateurs de personnaliser leurs appareils pour qu'ils s'alignent sur le jeu de couleurs de leur fond d'écran personnel ou via une couleur sélectionnée dans le sélecteur de fond d'écran.
Vous pouvez exploiter cette fonctionnalité en ajoutant l'API DynamicColors, qui applique cette thématisation à votre application ou à votre activité afin de rendre votre application plus personnalisée pour l'utilisateur.
Cette page contient des instructions pour implémenter des couleurs dynamiques dans votre application. Cette fonctionnalité est également disponible séparément pour les widgets et les icônes adaptatives, comme décrit plus loin sur cette page. Vous pouvez également suivre l'atelier de programmation.
Comment Android crée des jeux de couleurs
Android effectue les étapes suivantes pour générer des jeux de couleurs à partir du fond d'écran d'un utilisateur.
Le système détecte les couleurs principales de l'image de fond d'écran sélectionnée et en extrait une couleur source.
Le système utilise cette couleur source pour extrapoler encore cinq couleurs clés appelées variante principale, secondaire, tertiaire, neutre et variante neutre.
Figure 2 Exemple d'extraction de la couleur source d'une image de fond d'écran et de l'extraction de cinq couleurs clés Le système interprète chaque couleur clé dans une palette tonale de 13 tons.
Figure 3. Exemple de génération de palettes tonales données Le système utilise ce fond d'écran unique pour dériver cinq schémas de couleurs différents, qui constituent la base de tous les thèmes clair et sombre.
Affichage des variantes de couleur sur l'appareil de l'utilisateur
À partir d'Android 12, les utilisateurs peuvent sélectionner des variantes de couleur à partir de couleurs extraites du fond d'écran et de différents thèmes. D'autres variantes ont été ajoutées dans Android 13. Par exemple, un utilisateur disposant d'un téléphone Pixel fonctionnant sous Android 13 doit sélectionner une variante dans les paramètres Fond d'écran et style, comme illustré dans la figure 4.
Android 12 a ajouté la variante Tonal Spot, suivie des variantes Neutral, Vibrant Tonal et Expressive dans Android 13. Chaque variante a une recette unique qui transforme les couleurs des graines du fond d'écran d'un utilisateur grâce à de l'éclat et à la rotation de la teinte. L'exemple suivant montre un jeu de couleurs unique exprimé par ces quatre variantes de couleurs.
Votre application utilise toujours les mêmes jetons pour accéder à ces couleurs. Pour en savoir plus sur les jetons, consultez Créer un thème avec des jetons sur cette page.
Premiers pas avec Compose
Si vous créez votre interface utilisateur avec Compose, consultez la page Thématisation Material dans Compose pour découvrir comment appliquer des couleurs dynamiques à votre application.
Premiers pas avec les vues
Vous pouvez appliquer des couleurs dynamiques au niveau de l'application ou de l'activité. Pour ce faire, appelez applyToActivitiesIfAvailable() afin d'enregistrer un ActivityLifeCycleCallbacks dans votre application.
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);
}
}
Ajoutez ensuite le thème à votre application.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
Créer votre thème avec des jetons
La couleur dynamique exploite les jetons de conception pour simplifier et uniformiser l'attribution de couleurs aux différents éléments de l'interface utilisateur. Un jeton de conception vous permet d'attribuer sémantiquement des rôles de couleur, plutôt qu'une valeur définie, à différents éléments d'une interface utilisateur. Cela permet au système tonal de votre application de gagner en flexibilité, en évolutivité et en cohérence. Il est particulièrement puissant lors de la conception pour les thèmes clairs et sombres, ainsi que pour les couleurs dynamiques.
Les extraits de code suivants montrent des exemples de thèmes clair et sombre, ainsi qu'un fichier XML de couleur correspondant, après l'application de jetons de couleur dynamiques.
Thème clair
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>
Thème sombre
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>
Fichier XML de couleurs
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>
Pour plus d'informations :
Pour en savoir plus sur les couleurs dynamiques, les couleurs personnalisées et la génération de jetons, consultez la page Couleurs dynamiques de Material 3.
Pour générer la palette de couleurs de base ainsi que les couleurs et le thème de votre application, consultez Material Theme Builder, disponible via un plug-in Figma ou dans le navigateur.
Pour savoir comment l'utilisation de jeux de couleurs peut améliorer l'accessibilité de votre application, consultez la page Material 3 sur l'accessibilité du système de couleurs.
Conserver les couleurs personnalisées ou de la marque
Si votre application a des couleurs personnalisées ou de marque que vous ne souhaitez pas modifier selon les préférences de l'utilisateur, vous pouvez les ajouter individuellement lorsque vous créez votre jeu de couleurs. Par exemple :
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>
Vous pouvez également utiliser Material Theme Builder pour importer des couleurs supplémentaires qui étendent votre jeu de couleurs, créant ainsi un système de couleurs unifié.
Avec cette option, utilisez HarmonizedColors pour modifier le ton des couleurs personnalisées. Les couleurs générées par l'utilisateur permettent d'obtenir un équilibre visuel et un contraste accessible. Il se produit au moment de l'exécution avec applyToContextIfAvailable().
Reportez-vous aux conseils de Material 3 sur l'harmonisation des couleurs personnalisées.
Appliquer des couleurs dynamiques à vos icônes et widgets adaptatifs
En plus d'activer la thématisation Couleur dynamique dans votre application, vous pouvez également prendre en charge la thématisation Couleur dynamique pour les widgets à partir d'Android 12 et pour les icônes adaptatives à partir d'Android 13.