Cette page a été traduite par l'API Cloud Translation.

Permettre aux utilisateurs de personnaliser l'expérience couleur dans votre application

La couleur dynamique, ajoutée dans Android 12, permet aux utilisateurs de personnaliser leurs appareils pour les aligner 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é pour la personnaliser davantage pour l'utilisateur.

**Figure 1** Exemples de schémas de couleurs tonales dérivés de différents fonds d'écran

Cette page inclut des instructions pour implémenter les 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 essayer l'atelier de programmation.

Comment Android crée-t-il 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 Primary (Primaire), Secondary (Secondaire), Tertiary (Tertiaire), Neutral (Neutre) et Neutral variant (Variante neutre).

Figure 2 Exemple d'extraction de la couleur source à partir de l'image du fond d'écran et d'extraction vers cinq couleurs clés
Le système interprète chaque couleur clé en une palette tonale de 13 tons.

Figure 3 Exemple de génération d'une palette tonale donnée
Le système utilise ce seul fond d'écran pour dériver cinq jeux de couleurs différents, qui constituent la base de tous les thèmes clairs et sombres.

Affichage des variantes de couleur sur l'appareil d'un utilisateur

À partir d'Android 12, les utilisateurs peuvent sélectionner des variantes de couleur parmi les couleurs extraites du fond d'écran et différents thèmes. D'autres variantes seront ajoutées dans Android 13. Par exemple, un utilisateur disposant d'un téléphone Pixel équipé d'Android 13 sélectionnera une variante dans les paramètres Fond d'écran et style, comme illustré à la figure 4.

**Figure 4.** Sélection des variantes de couleur dans les paramètres du fond d'écran (sur un appareil Pixel)

Android 12 a ajouté la variante Tonal Spot, suivie des variantes Neutre, Tonal Vibrant et Expressif dans Android 13. Chaque variante dispose d'une recette unique qui transforme les couleurs de départ du fond d'écran d'un utilisateur en modifiant la luminosité et la teinte. L'exemple suivant montre un seul jeu de couleurs exprimé à l'aide de ces quatre variantes de couleur.

**Figure 5.** Exemple de différentes variantes de couleur sur un même appareil

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 votre thème avec des jetons sur cette page.

Premiers pas avec les vues

Vous pouvez appliquer la couleur dynamique au niveau de l'application ou de l'activité. Pour ce faire, appelez applyToActivitiesIfAvailable() pour 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 optimiser l'attribution de couleurs aux différents éléments d'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 UI. Cela permet au système tonal de votre application d'être plus flexible, évolutif et cohérent. Cette approche est particulièrement efficace lorsque vous concevez des thèmes clairs et sombres, ainsi que des couleurs dynamiques.

Les extraits de code suivants présentent des exemples de thèmes clair et sombre, ainsi qu'un fichier XML de couleurs correspondant, après l'application de jetons de couleurs 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>

Colors.xml

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 en savoir plus sur l'utilisation de jeux de couleurs pour améliorer l'accessibilité dans votre application, consultez la page Material 3 sur l'accessibilité du système de couleurs.

conserver les couleurs personnalisées ou celles de la marque ;

Si votre application comporte des couleurs personnalisées ou de marque que vous ne souhaitez pas modifier en fonction des préférences de l'utilisateur, vous pouvez les ajouter individuellement lorsque vous créez votre jeu de couleurs. 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().

**Figure 6.** Exemple d'harmonisation des couleurs personnalisées

Consultez les conseils de Material 3 sur l'harmonisation des couleurs personnalisées.

Appliquer la couleur dynamique à vos icônes et widgets adaptatifs

En plus d'activer la thématisation des couleurs dynamiques dans votre application, vous pouvez également prendre en charge la thématisation des couleurs dynamiques pour les widgets à partir d'Android 12 et pour les icônes adaptatives à partir d'Android 13.