La couleur dynamique, ajoutée dans Android 12, permet aux utilisateurs de personnaliser leurs appareils pour s’aligner sur la tonalité du 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 profiter de cette fonctionnalité en ajoutant l'API DynamicColors, qui
applique ce thème à votre appli ou à votre activité pour la personnaliser davantage
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 widgets et 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 des jeux de un fond d'écran.
Le système détecte les couleurs principales du fond d'écran sélectionné et extrait une couleur source.
Le système utilise cette couleur source pour extrapoler encore cinq couleurs clés. connue sous les appellations Principale, Secondaire, Tertiaire, Neutre et Neutre variante.
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 pour dériver cinq couleurs différentes qui constituent la base des thèmes clair et sombre.
Affichage des variantes de couleur sur l'appareil de l'utilisateur
Les utilisateurs peuvent sélectionner des variantes de couleurs à partir de couleurs extraites de fond d'écran et différentes à partir d'Android 12, avec d'autres variantes ajoutées dans Android 13. Pour Par exemple, un utilisateur disposant d'un téléphone Pixel fonctionnant sous Android 13 doit sélectionner une variante dans la section Fond d'écran et de style d'écran, comme illustré dans la figure 4.
<ph type="x-smartling-placeholder">
Android 12 a ajouté la variante Tonal Spot, suivie de la variante Neutral (Neutre) et Vibrant (Vibrant)". Variantes Tonal et Expressive sous Android 13. Chaque variante dispose d'un recette qui transforme les couleurs de graines du fond d'écran d'un utilisateur en lui donnant de l'éclat et faire pivoter la teinte. L'exemple suivant montre un jeu de couleurs unie exprimé dans 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 la section 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 Thématisation Material dans Compose pour savoir comment appliquer des couleurs dynamiques à vos l'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() pour enregistrer un
ActivityLifeCycleCallbacks à 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 faciliter l'attribution de couleurs aux différents éléments d'interface utilisateur plus rationalisés et cohérents. Un jeton de conception vous permet pour attribuer sémantiquement des rôles de couleur, plutôt qu'une valeur définie, à différents éléments d'une UI. Cela permet au système tonal de votre appli d'avoir plus la flexibilité, l'évolutivité et la cohérence, et est particulièrement puissant pour concevoir pour les thèmes clair et sombre et les couleurs dynamiques.
Les extraits suivants montrent des exemples de thèmes clair et sombre, et un code XML de couleur correspondant, après avoir appliqué des 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, cochez Material Theme Builder, disponible via un plug-in Figma ou dans un navigateur).
Pour en savoir plus sur la façon dont l’utilisation de jeux de couleurs peut améliorer l’accessibilité dans votre application, consultez la page Material 3 Accessibilité du système de couleurs.
Conserver les couleurs personnalisées ou de la marque
Si votre application comporte des couleurs personnalisées ou de marque que vous ne souhaitez pas modifier à l'aide du paramètre préférences de l'utilisateur, vous pouvez les ajouter individuellement au fur et à mesure que vous créez votre couleur d'un schéma. 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
des couleurs qui étendent votre jeu de couleurs, créant ainsi un système de couleurs unifié.
Avec cette option, utilisez HarmonizedColors pour changer le ton des
couleurs. Cela permet d'obtenir un équilibre visuel et un contraste accessible lorsqu'ils sont combinés
avec des couleurs générées par l'utilisateur. Elle 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 le thème "Couleurs dynamiques" dans votre application, Thématisation dynamique des couleurs pour widgets commençant dans Android 12, et pour icônes adaptatives, Android 13.