La couleur dynamique, ajoutée 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 sur 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 la personnaliser davantage pour l'utilisateur.
Cette page comprend 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 extrait une couleur source.
Le système utilise cette couleur source pour extrapoler cinq couleurs clés appelées principale, secondaire, tertiaire, neutre et variante neutre.
Figure 2 Exemple d'extraction de la couleur source à partir de l'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 d'une palette tonale donnée Le système utilise ce fond d'écran unique pour générer cinq jeux de couleurs différents, qui constituent la base de tous les thèmes clair et sombre.
Affichage des variantes de couleur sur l'appareil d'un utilisateur
Les utilisateurs peuvent sélectionner des variantes de couleur à partir de couleurs extraites de fond d'écran et de différents thèmes à partir d'Android 12, puis d'autres variantes 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 possède une recette unique qui transforme les couleurs source du fond d'écran d'un utilisateur grâce à de l'éclat et à une rotation de la teinte. L'exemple suivant montre un jeu de couleurs unique exprimé à travers 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 votre thème avec des jetons sur cette page.
Premiers pas avec Compose
Si vous créez votre interface utilisateur avec Compose, consultez Thématisation Material dans Compose pour en savoir plus sur l'application d'une couleur dynamique à votre application.
Premiers pas avec Views
Vous pouvez appliquer une couleur dynamique 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 tire parti des jetons de conception pour rendre l'attribution de couleurs à différents éléments d'interface utilisateur plus fluide et cohérente. 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, et s'avère particulièrement efficace pour concevoir des thèmes clairs et sombres ainsi que des couleurs dynamiques.
Les extraits de code suivants montrent des exemples de thèmes clair et sombre, ainsi qu'un fichier XML de couleurs 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 la couleur dynamique, les couleurs personnalisées et la génération de jetons, consultez la page Couleur dynamique 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 marque
Si votre application comporte des couleurs personnalisées ou de marque que vous ne souhaitez pas modifier avec les préférences de l'utilisateur, vous pouvez les ajouter individuellement au fur et à mesure que 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. Cela permet d'obtenir un équilibre visuel et un contraste accessible lorsqu'il est associé à des couleurs générées par l'utilisateur. Elle se produit au moment de l'exécution avec applyToContextIfAvailable().
Consultez les conseils de Material 3 sur l'harmonisation des couleurs personnalisées.
Appliquer une couleur dynamique à vos icônes et widgets adaptatifs
En plus d'activer la thématisation de couleurs dynamiques dans votre application, vous pouvez également prendre en charge la thématisation de couleurs dynamiques pour les widgets à partir d'Android 12 et pour les icônes adaptatives à partir d'Android 13.