Material You : Guide pour modifier votre thème et votre palette de couleurs dynamiques

Material You a redéfini la personnalisation sur Android Depuis Android 12, nous avons amélioré l'expressivité et la cohérence des couleurs et des thèmes système. Ce guide pratique et détaillé vous explique comment modifier le thème et la palette dynamique, comment fonctionne l'extraction des couleurs et comment les intégrer correctement au niveau du système et des applications.

En plus de se plonger dans le couleurs dynamiques, mouvement et widgets, vous apprendrez comment préparer votre application pour Material Design 3, comment utiliser Material Theme Builder pour Figma et quelles modifications apporter dans Android 12 et 13. Vous trouverez également des réponses aux questions fréquemment posées, des recommandations pour les OEM et des keynotes pour les développeurs.

Qu'est-ce que Material You et pourquoi est-ce important ?

Material You (Design matériel 3) C'est le langage de conception qui privilégie l'expression, la fluidité et la cohérence au sein de l'écosystème. Il adopte une approche minimaliste (moins d'ombres, polices épurées, formes plus douces) et offre à chaque utilisateur une expérience unique qui s'adapte à son contexte et à ses préférences.

Cette approche ne s’arrête pas aux Pixels ; Il s'étend aux téléphones mobiles de Samsung, OnePlus, OPPO, Vivo, realme et Xiaomi., tablettes, montres et autres appareils. Son objectif est d'allier personnalisation poussée, accessibilité, cohérence visuelle et système de mouvement moderne.

Accueil de personnalisation HyperOS Xiaomi

Couleur dynamique : la pièce maîtresse

La couleur dynamique est au cœur de Material You : extrait une couleur source du papier peint ou une couleur choisie, l'étend à 5 palettes tonales avec 13 nuances chacune (65 couleurs au total) et l'applique harmonieusement à l'ensemble du système et des applications.

Pour assurer la cohérence, Il est recommandé d'utiliser la logique d'extraction AOSP non modifiée et conservez l'alignement avec les 65 attributs de couleur. Ainsi, utilisateurs et développeurs bénéficient d'une expérience de personnalisation stable et performante sur tout appareil Android.

Comment fonctionne Dynamic Color Flow

Le flux complet se compose de quatre étapes très clair, avec l'extraction et la propagation des couleurs au centre du processus :

L'utilisateur modifie le fond d'écran ou sélectionne un thème dans le sélecteur de thème du fabricant OEM. Ce déclencheur active le recalcul de la palette.
L'utilisateur choisit entre différentes options : thème de l'appareil (Android sélectionne automatiquement une couleur de graine valide) ou nouveau fond d'écran et thème (AOSP extrait la couleur des graines du papier peint).
AOSP prend la couleur de base unique et l'étend en 5 palettes tonales (A1, A2, A3, N1, N2), chacune avec 13 niveaux, propageant ainsi les 65 attributs de couleur par le système.
L’interface utilisateur du système et les applications appliquent ces 65 attributs de manière cohérente. Recommandation : utilisez la même palette dans les applications SysUI et OEM pour une expérience cohérente.

Détails de l'algorithme : tons, chromas et cohérence

Material You utilise des transformations basées sur CAM16 pour garantir l'harmonie et le contraste. La couleur de la graine doit avoir un chroma minimum de 5 dans CAM16 (pour éviter que des tons très sombres ne gâchent l'expansion tonale). Vous pouvez lire/écrire CAM16 avec des utilitaires comme Cam#fromInt ou Cam#getInt.

Des règles spécifiques de chrominance et de tonalité s'appliquent à chaque palette tonale : accent1 (chroma 40 à 0, 10, 50 et 100 ; 48 au reste, ton égal à celui de la graine), accent2 (chroma 16, même ton), accent3 (chroma 32, teinte tournée à +60 degrés), neutre1 (chroma 4) et neutre2 (chroma 8), avec le même ton que la graine.

Compatibilité, tests et AOSP

Android 12L et versions ultérieures incluent désormais la couleur dynamique en standard.Android 12 intègre les correctifs nécessaires à la prise en charge de la logique de bout en bout (récupération et propagation vers les 65 API). Le CTS valide la luminance et la teinte ; vous pouvez l'exécuter avec atest SystemPalette.

Si votre appareil ne prend pas en charge l'extraction de fond d'écran, vous pouvez désactiver flag_monet et propose un sélecteur de thème avec des palettes prédéfinies, assurant une personnalisation sans couleur dynamique.

AOSP ThemePicker : Couleurs personnalisées et APK Stub

Si vous utilisez le ThemePicker AOSP, la section couleur apparaît si flag_monet est activé et il existe un APK système déclaré dans la valeur themes_stub_package. Ce stub contient uniquement les ressources des couleurs de base et leurs noms.

La structure du stub comprend un XML dans res/xml avec le tableau des packages de couleurs (par exemple color1, color2, etc.) et chaînes bundle_name_colorX. De plus, vous devez définir les valeurs pour chaque couleur de base en tant que paires primaires/secondaires (par exemple, color_primary_color1 et color_secondary_color1) et les deux doivent être de la même couleur.

Étapes d'intégration recommandées

Étape 1 : Expérience du thème utilisateur

Propose un sélecteur de thème ou de fond d'écran adapté à votre produit. Avec le sélecteur de fond d'écran, l'extraction est active par défaut., mais vous pouvez ajouter plus d'options pour l'utilisateur si vous le souhaitez.

Étape 2 : Extraction de la couleur des graines

Dans Android 12, la route d'activation dans SysUI est ThemeOverlayController (mOnColorsChangedListener) via WallpaperManager#onWallpaperColorsChanged. Utilisez ColorScheme#getSeedColors pour exposer plusieurs graines sur le sélecteur, pas seulement la fréquence la plus élevée.

Nécessite un chroma CAM16 ≥ 5 pour que la couleur de départ soit valide. S'il n'y a pas de graines valides, utilisez-en une de secours selon le guide. et préserve la cohérence du ton et du contraste.

Étape 3 : Étendre à 65 API

Avec la couleur de départ, Android génère les 5 palettes et 13 pas de tons par palette (0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000). Appliquer la logique du correctif Android 12 pour une extension appropriée et se conformer aux CTS et CDD.

Étape 4 : Utiliser dans les applications et l’interface utilisateur du système

Intégrez Material You dans vos propres applications et SysUI. Les guides matériels expliquent comment mapper les rôles et les jetons afin que les composants adoptent des couleurs dynamiques, conservant ainsi l'accessibilité et la lisibilité.

Étape 5 : Options dans WallpaperPicker (Android 13+)

Depuis Android 13, accent_color n'est plus disponible et android.theme.customization.theme_style a été ajouté, avec des styles comme TONAL_SPOT, VIBRANT, EXPRESSIVE et SPRITZ. Au moins « android.theme.customization.system_palette » est envoyé dans le fichier JSON Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES.

Exemple de configuration : { 'android.theme.customization.system_palette':'B1611C', 'android.theme.customization.theme_style':'EXPRESSIF' }Dans Android 12 et les versions antérieures, « system_palette » et « accent_color » étaient utilisés avec le même code de couleur de départ.

Étape 6 : Ajouter à la liste autorisée

Soumettez un ticket avec votre Construire.FABRICANT afin que les applications basées sur des composants matériels puissent reconnaître la disponibilité des palettes dynamiques sur vos appareils. Cela garantit une expérience cohérente pour les tiers.

Styles de thèmes système et palettes tonales

Android 13 ajoute des variations d'algorithme pour les besoins de contraste et d'expression : TONAL_SPOT (défaut), VIBRANT (haute intensité subtile), EXPRESSIF (haute intensité avec des accents inattendus), VAPORISATEUR (faible intensité, aspect désaturé), RAINBOW y SALADE DE FRUITS (conçu pour les thèmes statiques, non recommandé pour l'extraction à partir du fond d'écran).

Mappages des rôles et des attributs de sujet

Material 3 définit un ensemble de rôles attribués aux attributs du thème Android, avec des variations pour les thèmes clairs et sombresQuelques exemples clés (résumés) :

Rol	Attribut	clair	Oscuro
Directeur	couleurPrimaire	système_accent1_600	système_accent1_200
Sur le principal	couleurSurPrimaire	système_accent1_0	système_accent1_800
Secondaire	couleurSecondaire	système_accent2_600	système_accent2_200
Sur le secondaire	couleurSurSecondaire	système_accent2_0	système_accent2_800
Fond	android:couleurArrière-plan	système_neutre1_10	système_neutre1_900
En arrière-plan	couleurSurFond	système_neutre1_900	système_neutre1_100
Surface	couleurSurface	système_neutre1_10	système_neutre1_900
Sur la surface	couleurSurSurface	système_neutre1_900	système_neutre1_100

Il y a aussi attributs de l'état (par exemple, colorPrimaryStateContent, colorOnSurfaceVariantStateLayer) qui sont dérivés des mêmes rôles, garantissant la cohérence entre les états pressés, focalisés ou désactivés.

Mouvement : déplacement et onde

Le mouvement fluide apporte une sensation de produit haut de gamme. Android 12 a fait ses débuts surdéfilement avec étirement qui réagit lorsqu'on essaie de faire défiler au-delà de la limite d'une liste.

Consignes de cohérence : sur les appareils avec ActivityManager.isHighEndGfx() true, utilise l'étirement non linéaire; sur du matériel plus modeste, il se simplifie en étirement linéaire pour réduire la charge.

Pour prendre en charge le défilement horizontal dans les vues personnalisées, met à jour les bibliothèques dernier : androidx.recyclerview : recyclerview 1.3.0-alpha01, androidx.core 1.7.0-alpha01 (NestedScrollView et EdgeEffectCompat) et androidx.viewpager 1.1-alpha01.

Dans les conceptions avec EdgeEffect, tout en étirant la vue, vous ne devez pas interagir avec le contenuLa capture de l'animation et la manipulation de l'étirement s'effectuent avec EdgeEffectCompat.getDistance() et onPullDistance(). Dans les tirages imbriqués, l'étirement doit d'abord consommer le geste pour éviter tout mouvement indésirable.

La onde tactile (Ripple) sous Android 12 est plus fluide et plus subtil. Aucune intégration supplémentaire n'est requise, mais il est conseillé de vérifier les régressions spécifiques à l'appareil.

Widgets : API et mises à jour

Les widgets sont essentiels dans Android, et avec Android 12, les API pour la taille, la mise en page et les paramètres tels que rayon d'angleVotre système d'exploitation doit exposer correctement ces API et permettre le redimensionnement et la configuration des widgets.

Dans vos propres applications, profitez des nouvelles fonctionnalités pour mettre à jour ou créer des widgetsLes hiérarchiser selon les directives de la plateforme améliore la cohérence avec Material You.

Concevoir avec Material Theme Builder et des jetons

Material Theme Builder (version Figma et Web) facilite la création thèmes de marque accessibles et les combiner avec des couleurs dynamiques. Il permet de définir des couleurs clés (primaires, secondaires, tertiaires, neutres) et de générer des palettes de tons clairs/foncés, des jetons et des exportations de code.

Les jetons de conception Remplacez les valeurs statiques par des noms sémantiques, créant ainsi un langage commun entre la conception et le développement. Vous pouvez étendre le schéma avec des couleurs personnalisées (par exemple, Custom0) pour des sémantiques ou des produits spécifiques, sans perturber le système.

La hiérarchie des couleurs est importante : Les tons plus saturés attirent davantage l'attention, réservez donc le primaire aux appels à l'action et utilisez le secondaire/tertiaire pour équilibrer et diriger le regard.

Figma Codelab : étapes essentielles

Connectez-vous ou créez un compte dans Figma, dupliquez le fichier de laboratoire et Installer le plugin Material Theme BuilderLe document est organisé en sections avec des concepts et des exercices séquentiels ; suivez l'ordre pour comprendre les rôles, les jetons et l'application du sujet.

Saisissez la couleur principale de votre marque ; les autres couleurs suivront. Ajouter le secondaire et le tertiaire Pour une expression plus expressive des couleurs. Affectez des tons neutres aux surfaces et au texte. Basculez vers le thème dans le panneau des extensions et appliquez des styles aux composants personnalisés si nécessaire.

Pour s'étendre au-delà du contour central, ajoutez couleurs personnalisées (Personnalisé#) depuis la fenêtre modale du plugin. Vous pouvez les renommer dans le panneau Styles de Figma et les affecter à des balises ou composants spécifiques.

Mettre à jour une application Android vers Material 3

Avant d'appliquer la couleur dynamique, met à jour les dépendances (com.google.android.material dans les versions récentes) et utilisez compileSdkVersion/targetSdkVersion 31 ou supérieur. Modifiez le thème de base de Theme.MaterialComponents.* à Theme.Material3.*.

Vérifiez que les attributs hérités ont toujours du sens et migrer des styles personnalisés qui sont désormais standard dans M3. Vous pouvez générer un thème complet avec Material Theme Builder et copier les fichiers values/colors.xml et values-night/themes.xml, en modifiant le nom du thème.

Si vous ciblez Android 12, n'oubliez pas de déclarer android:exporté explicitement dans votre activité AndroidManifest principale, pour répondre aux exigences du système.

Appliquer une couleur dynamique dans l'application

Avec le thème Material 3 utilisé, activez les couleurs dynamiques globalement avec Couleurs dynamiques.applyToActivitiesIfAvailable dans votre classe Application. Ceci enregistre les ActivityLifecycleCallbacks et applique le ThemeOverlay généré par le système.

Si vous devez forcer les nuances de la marque, définissez une chevauchement des thèmes (ThemeOverlay.Material3.DynamicColors.Light/Dark/DayNight) en attribuant colorPrimary, onPrimary, primaryContainer et onPrimaryContainer à vos nuances, et en le transmettant comme deuxième paramètre à applyToActivitiesIfAvailable.

Pour les attributs personnalisés (par exemple, votre propre iconColor), reportez-vous à palettes système Utilisez @android:color/system_accent2_600 dans votre overlay. Placez les ressources dans les dossiers -v31 si votre minSdk est inférieur à 31.

Sources et accessibilité des couleurs des graines

La graine peut provenir du fond d'écran (quantification), du contenu de votre application ou d'une couleur choisie par l'utilisateur. Le système manipule le ton et la chrominance Pour générer cinq couleurs clés et leurs palettes. L'objectif est de maintenir un contraste et une lisibilité élevés, notamment grâce à la prise en charge du mode sombre et de différents niveaux de contraste.

Si vous avez déjà des couleurs de marque très définies, vous pouvez saisissez-les dans Theme Builder Pour générer des palettes accessibles et cohérentes avec M3. Un visualiseur permet également de vérifier les résultats avec différentes images.

Compatibilité de l'écosystème et outils

Google a confirmé l'arrivée du couleurs dynamiques Des couches comme One UI, OxygenOS, ColorOS, OriginOS et MIUI offrent une expérience cohérente pour tous les fabricants. Même Gmail adapte son interface à plusieurs modèles phares.

Si vous n'avez pas d'appareil compatible sous la main, essayer les thèmes dynamiques dans le navigateur Avec Material Theme Builder, vous pouvez télécharger votre propre arrière-plan pour voir la palette résultante.

Note pratique : certains outils de création de thèmes tiers peuvent conflit avec la palette systèmeSi votre thème personnalisé désactive ou force une option de palette, vérifiez les priorités de superposition et les paramètres OEM.

Questions fréquentes

L'extraction des couleurs s'active-t-elle automatiquement lors du changement de fond d'écran ? Avec les correctifs Android 12, oui : ThemeOverlayController#mOnColorsChangedListener via WallpaperManager gère l'événement automatiquement.

Qu'en est-il des arrière-plans en direct ou vidéo ? L'extraction est appliquée lors de la définition du fond d'écran ou après un cycle d'alimentation de l'écran ; le dernier événement WallpaperColors Il est appliqué au redémarrage.

Puis-je afficher plusieurs graines dans le sélecteur ? Oui, nous Schéma de couleurs #getSeedColors pour lister des options autres que la plus fréquente.

Qu'en est-il des icônes thématiques ? Ils ne faisaient pas partie d'Android 12 stable. Ils n'ont pas été inclus dans les patchs mentionnés pour cette version.

Puis-je utiliser l'application Google Wallpaper avec un aperçu des couleurs ? Oui, en suivant l'intégration indiquée. WallpaperPicker2 et Launcher3 restituer l'aperçu ; WallpaperSectionController gère l'affichage et GridCustomizationsProvider expose les données via ContentProvider.

Appareils pliables : considérations de conception

Avec les écrans pliables, l'ergonomie change : Les 25 % les plus riches peuvent être difficiles à atteindre Une fois déployé, il distribue le contenu en fonction de la portée et de la pertinence.

Évitez de placer des contrôles critiques sur le charnière centraleIl est suggéré de réserver environ 48 dp autour de cette zone afin de ne pas gêner l'interaction.

En paysage, placez la navigation principale à gauche et répartissez le contenu en deux colonnes, en ajustant l'espacement des charnières. En mode portrait, privilégiez une colonne large pour préserver la lisibilité.

Clés d'implémentation dans Android 13 et 12

Sur Android 13, définissez Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES sur palette_système et, éventuellement, le style_de_thème (TONAL_SPOT, VIBRANT, EXPRESSIVE, SPRITZ, ou autres orientés vers des thèmes statiques).

Sur Android 12 et versions antérieures, si vous utilisez un sélecteur de thème personnalisé, envoyez le même paramètre au format JSON avec system_palette et accent_color sont égaux pour ignorer l'extraction à l'étape 2 et passer directement à l'étape 3.