Conception Material You

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

À partir d'Android 12, la conception Material You se concentre sur l'expression et la fluidité dans l'OS Android, dans le but d'aider les utilisateurs à créer et à posséder une expérience unique et cohérente adaptée à leurs besoins. En tant que partenaire Android, nous vous encourageons à intégrer la conception Material You à vos appareils Android dans les domaines suivants:

• Couleurs dynamiques
• Mouvement
• Widgets

Couleurs dynamiques

La couleur dynamique est au cœur de la conception Material You et constitue un élément clé de la stratégie pluriannuelle d'Android visant à offrir à ses utilisateurs une personnalisation plus simple et plus approfondie que n'importe quel autre appareil. Material You propose:

• Une expérience de personnalisation cohérente et riche, disponible sur tous les appareils Android pour les utilisateurs et les développeurs.

• Les OEM Android ont la possibilité de continuer à innover l'UI du système et les applications propriétaires de manière à respecter la couleur, la marque et la forme de leur matériel.

Pour profiter de la couleur dynamique, utilisez l'histoire d'extraction de couleurs Material You d'Android 12 comme élément clé de votre offre logicielle aux utilisateurs. Sur l'appareil, utilisez la logique d'extraction des couleurs d'AOSP, en particulier celle qui reçoit une seule couleur de source de fond d'écran ou de thème et la restitue via 65 API de couleur. Pour connaître les exigences concernant les couleurs dynamiques, consultez Utiliser les couleurs dynamiques.

Le flux de couleurs dynamique complet comprend quatre étapes, comme illustré ci-dessous:

Figure 1 : Flux de couleurs dynamique Material You

1. L'utilisateur modifie le fond d'écran ou le thème via le sélecteur OEM.

2. L'utilisateur sélectionne l'une des options suivantes:

   • Thème de l'appareil Lorsqu'il est sélectionné, Android choisit automatiquement une seule couleur source qui répond aux exigences.

   • Nouveau fond d'écran et nouveau thème Lorsqu'elle est sélectionnée, la logique AOSP choisit automatiquement une seule couleur source parmi le fond d'écran sélectionné.

3. AOSP développe la couleur source unique en cinq palettes tonales avec 13 variantes de couleur tonale chacune, conformément à la logique AOSP, qui remplit ensuite les 65 attributs de couleur.

4. L'UI de l'application utilise les 65 attributs de couleur de manière cohérente dans l'écosystème des applications Android. Nous vous recommandons d'utiliser la même palette de couleurs pour l'UI du système de l'appareil et les applications spécifiques à l'OEM.

Correctifs Android 12

Pour obtenir la logique de bout en bout pour l'extraction des couleurs du fond d'écran et permettre à l'appareil de remplir les API à 65 couleurs de manière cohérente avec l'écosystème, incluez les correctifs suivants dans votre implémentation d'Android 12:

• Obligatoire

  • Ajouter monet à AOSP
  • Ajuster les filtres chroma/lstar pour les couleurs des graines
  • Utiliser une valeur chroma maximale de 40 pour le ton 90

• Fortement recommandé

  • Correction de la condition de concurrence lors de la définition des sysprops de couleur de démarrage.
  • Autoriser les superpositions à recevoir des notifications de modification du thème
  • Correction de la condition de concurrence lors de la configuration des sysprops de couleur de démarrage (deuxième étape)
  • Déplacez FeatureFlags vers le package flags.
  • Implémenter correctement la prise en charge de la thématisation multi-utilisateur
  • Correction de l'absence de l'option de couleur de fond d'écran spécifiée après le redémarrage
  • Correction d'une erreur lors du calcul de la teinte tertiaire
  • Ne pas autoriser les applications en arrière-plan à modifier le thème

Spécifier des couleurs personnalisées dans ThemePicker

Si vous utilisez l'application ThemePicker AOSP, l'application WallpaperPicker affiche la section de couleur si les deux conditions suivantes sont remplies:

• flag_monet sur frameworks/base/packages/SystemUI/res/values/flags.xml est true.
• Un APK stub système avec le nom du package est défini dans themes_stub_package dans le fichier packages/apps/ThemePicker/res/values/override.xml.

Format de l'APK de stub

Vous trouverez un exemple de version de cet APK dans packages/apps/ThemePicker/themes.

Cet APK ne doit contenir que des ressources, détaillant les couleurs de base disponibles et leurs noms.

Le bouchon doit contenir un fichier XML sous res/xml au format suivant:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="color_bundles">
        <item>color1</item>
        <item>color2</item>
        <item>color3</item>
        <item>color4</item>
    </array>

    <string name="bundle_name_color1">Blue</string>
    <string name="bundle_name_color2">Red</string>
    <string name="bundle_name_color3">Yellow</string>
    <string name="bundle_name_color4">Green</string>

</resources>

Dans ce fichier, chaque item de color_bundles a un nom distinct, à condition que les chaînes ci-dessous soient nommées bundle_name_item.

Une chaîne bundle_name_item doit être associée à chaque couleur, avec un nom descriptif pour chaque couleur. Vous pouvez les traduire en ajoutant les chaînes traduites correspondantes dans les répertoires res/values-language code.

Les valeurs de couleur réelles peuvent se trouver dans le même fichier XML ou dans un fichier XML de ressources distinct au format suivant:

<resources>
    <color name="color_primary_color1">#0000FF</color>
    <color name="color_secondary_color1">#0000FF</color>

    <color name="color_primary_color2">#ff0000</color>
    <color name="color_secondary_color2">#ff0000</color>

    <color name="color_primary_color3">#ffff00</color>
    <color name="color_secondary_color3">#ffff00</color>

    <color name="color_primary_color4">#00ff00</color>
    <color name="color_secondary_color4">#00ff00</color>
</resources>

Pour chaque élément du tableau des lots de couleurs, une entrée color_primary_item et une entrée color_secondary_item doivent être fournies (et les deux couleurs doivent être identiques). Les valeurs de ces entrées color sont les codes de couleur réels de chaque couleur à afficher dans la section couleur de base.

Étape 1: Créez une expérience de thématisation utilisateur

Le sélecteur de thème permet aux utilisateurs d'interagir avec les nouvelles fonctionnalités de personnalisation Material You et de choisir entre des options de couleur ou des préréglages. Comme il convient à votre produit et à votre catégorie d'utilisateurs, vous pouvez offrir aux utilisateurs une expérience de personnalisation et de couleurs plus riche à l'aide d'un sélecteur de thème ou d'un sélecteur de fond d'écran.

• Lorsque vous utilisez un sélecteur de fond d'écran, l'extraction de la couleur du fond d'écran est activée par défaut. Toutefois, vous pouvez personnaliser le sélecteur pour proposer plus d'options à l'utilisateur.

Étape 2: Extrayez la couleur du fond d'écran dans une couleur source

Pour activer l'extraction des couleurs du fond d'écran, sélectionnez les correctifs Android 12 listés ci-dessus (cette fonctionnalité sera activée par défaut dans une prochaine version AOSP). La logique AOSP qui déclenche l'extraction du fond d'écran commence à frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java, sur ThemeOverlayController#mOnColorsChangedListener, via WallpaperManager#onWallpaperColorsChanged. Nous vous recommandons d'utiliser la logique AOSP non modifiée pour garantir une expérience de développement cohérente.

Par défaut, la logique sélectionne la couleur de fréquence la plus élevée qui peut être utilisée. Pour exploiter d'autres couleurs sources renvoyées par l'algorithme et les présenter aux utilisateurs dans le sélecteur de thème, utilisez ColorScheme#getSeedColors(wallpaperColors: WallpaperColors).

Pour être utilisable, une couleur source (qu'elle soit extraite d'un fond d'écran ou d'un préréglage choisi par l'utilisateur) doit avoir une valeur de chrominance CAM16 d'au moins 5. Cela garantit que la couleur source n'est pas affectée par des tons sombres subtils lorsqu'elle est convertie d'une couleur unique en 65 couleurs tonales et qu'elle reste représentative du choix de l'utilisateur. Pour lire et modifier les couleurs dans CAM16, utilisez Cam#fromInt ou Cam#getInt.

Utiliser une palette de couleurs non dynamique Pour les appareils qui ne sont pas compatibles avec l'extraction de couleurs du fond d'écran, vous pouvez toujours vous assurer que les applications Google et les applications tierces compatibles avec les couleurs dynamiques sont attrayantes en procédant comme suit:

• Utilisez la palette Material par défaut en désactivant flag_monet sur frameworks/base/packages/SystemUI/res/values/flags.xml.
• Assurez-vous que les utilisateurs peuvent toujours personnaliser leur OS à l'aide d'un sélecteur de thèmes prédéfini.

Étape 3: Développez la couleur source dans les API de couleur

À l'aide de la couleur source unique dérivée de l'étape précédente, Android génère cinq palettes tonales uniques (accent 1 à 3, neutre 1 à 2), chacune comprenant 13 couleurs, et chacune comprenant différentes valeurs de luminance (de 0 à 1 000), pour un total de 65 couleurs. La logique fournie dans les correctifs Android 12 implémente correctement cette extension de couleur. Les détails fournis ci-dessous décrivent l'implémentation.

Pour assurer la cohérence entre les développeurs, les cinq palettes tonales (accent1, accent2, accent3, neutre1, neutre2) et les 13 couleurs correspondantes doivent être basées sur une seule couleur source, avec les modifications respectives des valeurs de chromie et de teinte CAM16, comme indiqué ci-dessous:

• system_accent1

  • Chroma: utilisez "40" pour les variantes de couleur se terminant par 0, 10, 50 et 100, sinon "48".
  • Teinte: identique à la source

• system_accent2

  • Chroma: utilisez "16".
  • Teinte: identique à la source

• system_accent3

  • Chroma: utilisez "32"
  • Teinte: rotation de 60 degrés en positif

• system_neutral1

  • Chroma: utilisez "4"
  • Teinte: identique à la source

• system_neutral2

  • Chroma: utiliser "8"
  • Teinte: identique à la source

CTS inclut des tests de validation des appels d'API de luminance et de teinte. Pour exécuter, utilisez atest SystemPalette.

Étape 4: Utiliser des couleurs dynamiques dans les applications et l'UI du système

Une fois les couleurs dynamiques définies sur un appareil, les applications suivent les consignes Material pour les utiliser. Les consignes Material devraient être publiées sur material.io d'ici le 26 octobre 2021 pour être adoptées par les applications tierces. Pour l'UI du système et les applications propriétaires, nous vous recommandons vivement d'intégrer des couleurs dynamiques tout au long de l'expérience utilisateur de manière à s'adapter à votre matériel et à votre marque, et à vous aider à différencier vos appareils.

Pour obtenir des conseils généraux sur les couleurs dynamiques, consultez les ressources suivantes:

• Utilisez des couleurs d'accentuation pour les éléments de premier plan dans les applications et l'UI du système:

  @android:color/system_accent1_0 … 1000 // most-used foreground color group
  @android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces
  @android:color/system_accent3_0 … 1000 // playful, analogous color
  

• Utilisez des couleurs neutres pour les éléments d'arrière-plan des applications et de l'UI du système:

  @android:color/system_neutral1_0 … 1000 // most-used background color group
  @android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces
  

Pour en savoir plus sur la façon dont Material You mappe les couleurs et sur l'utilisation des API dans SysUI, consultez les ressources supplémentaires.

Étape 5: Ajouter des options de couleur dynamique dans votre implémentation de WallpaperPicker AOSP

Compiler pour Android 13 ou version ultérieure

À partir d'Android 13, android.theme.customization.accent_color est obsolète. Un nouvel attribut android.theme.customization.theme_style est ajouté pour prendre en charge différentes variantes de couleur. Nous avons actuellement quatre variantes dans le codebase, comme suit:

TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.

Ils sont envoyés à Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES, comme indiqué dans le code JSON ci-dessous:

{
    "android.theme.customization.system_palette":"B1611C",
    "android.theme.customization.theme_style":"EXPRESSIVE"
}

Créer une version pour Android 12 et versions antérieures

Lorsque vous utilisez un sélecteur de thème personnalisé, l'appareil doit envoyer une couleur source valide à Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES en fournissant un fichier JSON au format suivant (746BC1 étant un exemple de couleur source valide):

{
      "android.theme.customization.system_palette":"746BC1",
      "android.theme.customization.accent_color":"746BC1"
}

Cela permet d'ignorer l'extraction de la couleur du fond d'écran (étape 2) et d'étendre directement la couleur source fournie en 65 attributs de couleur (étape 3).

Étape 6: Envoyer une demande

En plus de l'intégration du système, vous devez créer une demande et nous indiquer le nom de votre marque (Build.MANUFACTURER). Étant donné que la plupart des applications tierces utilisent les composants Material pour Android pour afficher des couleurs dynamiques, nous utilisons une liste d'autorisation codée en dur pour indiquer les appareils qui ont intégré la fonctionnalité Palettes de couleurs tonales dynamiques.

Mouvement

Les mouvements fluides donnent aux appareils un aspect moderne et haut de gamme. Pour renforcer et maintenir la confiance et la satisfaction des développeurs, le défilement hors limite et l'ondulation sont deux éléments clés du mouvement fluide qui doivent être cohérents.

Utiliser le défilement excessif dans votre OS

Android 12 inclut un mouvement de défilement excessif plus réactif et dynamique sous la forme d'un étirement de la vue, qui s'affiche lorsque l'utilisateur tente de faire défiler une liste au-delà de son bord. Voici un exemple :

Figure 2. Effet de défilement hors limites d'Android 12, comme indiqué dans les paramètres

Pour assurer la cohérence entre les développeurs, assurez-vous que l'effet de défilement excessif global sur vos appareils ressemble à ce qui suit:

• Sur les appareils qui renvoient la valeur "true" pour ActivityManager.isHighEndGfx(), l'effet de défilement excessif est un étirement non linéaire de l'écran (comme illustré ci-dessus).

• Sur les appareils moins performants, l'effet d'étirement est simplifié en un étirement linéaire (pour réduire la charge sur le système).

Utiliser le défilement excessif dans les applications propriétaires

Lorsque vous utilisez des vues personnalisées, vous devrez peut-être ajuster certaines applications et l'UI du système qui utilisent l'effet d'étirement.

• Pour prendre en charge le défilement étiré, mettez à niveau les dernières bibliothèques:

  • androidx.recyclerview:recyclerview:1.3.0-alpha01 pour RecyclerView
  • androidx.core:core:1.7.0-alpha01 pour NestedScrollView et EdgeEffectCompat
  • androidx.viewpager:viewpager:1.1-alpha01 pour ViewPager

• Pour les mises en page personnalisées qui utilisent EdgeEffect, tenez compte des modifications d'expérience utilisateur suivantes:

  • Avec le défilement étiré, les utilisateurs ne doivent pas interagir avec le contenu de la mise en page lorsqu'elle est étirée. Les utilisateurs ne doivent manipuler que l'étirement lui-même et ne pas pouvoir, par exemple, appuyer sur un bouton dans le contenu.

  • Lorsque les utilisateurs touchent le contenu pendant l'animation EdgeEffect, ils doivent intercepter l'animation et être autorisés à manipuler l'étirement. La valeur de pull actuelle est disponible à partir de EdgeEffectCompat.getDistance().

  • Pour manipuler la valeur de traction et renvoyer la quantité consommée, utilisez onPullDistance(). Cela permet aux développeurs de passer facilement de l'étirement au défilement lorsque l'utilisateur déforme le contenu au-delà de la position de départ.

  • Lorsque vous utilisez le défilement imbriqué, si le contenu est étiré, l'étirement doit consommer le mouvement tactile avant le contenu imbriqué, sinon l'imbrication peut défiler lorsque l'utilisateur change de direction au lieu de relâcher l'étirement.

Pour en savoir plus sur le défilement excessif, consultez Animer un geste de défilement.

Utiliser l'effet de vague (retour haptique) dans votre OS

Android 12 inclut une ondulation tactile plus douce et plus subtile pour fournir un retour aux utilisateurs lorsqu'ils appuient sur l'écran.

Figure 3. Effet d'ondulation Android 12, avec une animation de remplissage plus douce

Pour une prévisibilité des développeurs et une expérience utilisateur optimale, assurez-vous que l'effet d'entraînement sur vos appareils est semblable à l'exemple ci-dessus. Bien que vous n'ayez pas besoin d'effectuer d'étapes d'intégration spécifiques pour prendre en charge les effets d'entraînement, vous devez tester l'effet sur vos appareils pour vérifier s'il existe des régressions involontaires introduites dans votre implémentation.

Widgets

Les widgets sont des composants clés d'un appareil Android. Android 12 inclut de nouvelles API et fonctionnalités d'API que tous les OEM doivent prendre en charge.

• Dans votre OS, prenez en charge les API de développement liées aux mises en page, à la mise à l'échelle et aux paramètres logiciels des widgets (par exemple, la taille des coins arrondis). Votre implémentation doit prendre en charge correctement les widgets pour fournir des paramètres via des API et s'assurer que les widgets sont de taille et configurables par l'utilisateur.

• Dans vos applications, profitez des nouvelles fonctionnalités de l'API pour mettre à jour ou créer de nouveaux widgets propriétaires lorsque cela est possible. Pour tous les widgets d'application first party de votre champ d'application, consultez la checklist pour les développeurs ci-dessous.

  • La priorité est basée sur les recommandations de la plate-forme.
  • Pour en savoir plus sur une recommandation, suivez le lien dans la colonne "Modification".

  Région	Modifier	Priorité d'implémentation
  Améliorer l'expérience connectée	Ajouter des aperçus évolutifs	P1
  	Ajouter une description de widget	P1
  	Personnaliser plus facilement les widgets	P2 (facultatif)
  	Activer des transitions plus fluides	P0
  	Éviter les trampolines de diffusion	P0
  Adopter les consignes concernant les widgets	Amélioration des tailles et des mises en page des widgets	P2
  	Appliquer des couleurs dynamiques	P0
  	Implémenter des coins arrondis	P0
  	Ajouter des boutons composés	P2
  Simplifier le code de widget existant	Simplifier les collections RemoteView	P2
  	Simplifier l'environnement d'exécution RemoteView	P2

Ressources supplémentaires

Utilisation des couleurs SysUI

(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)

Figure 4. Utilisation de couleurs dynamiques dans l'UI du système

Modifications apportées aux attributs de couleur de la bibliothèque Material

Material mettra à jour ses attributs de thème dans la prochaine version en créant des rôles de couleur utilisés pour fournir des couleurs à des vues spécifiques.

Material mettra à jour ses attributs d'état avec les pointeurs suivants:

Questions fréquentes

Extraction des couleurs

Une fois qu'un utilisateur change de fond d'écran, l'extraction des couleurs est-elle effectuée automatiquement ou doit-elle être déclenchée à partir d'un endroit ?

Avec les correctifs Android 12, l'extraction des couleurs du fond d'écran est activée par défaut.

ThemeOverlayController.java déclenche la logique avec ThemeOverlayController#mOnColorsChangedListener et WallpaperManager#onWallpaperColorsChanged.

Pour les fonds d'écran animés ou les fonds d'écran vidéo, pouvons-nous savoir quand l'extraction de couleur extrait la couleur de l'écran ? Certains utilisateurs peuvent préférer les couleurs de la dernière image, car elle s'affiche le plus longtemps.

L'extraction des couleurs est déclenchée lorsque l'utilisateur définit le fond d'écran ou après un cycle d'alimentation de l'écran (en réponse à WallpaperEngine#notifyColorsChanged). Le dernier événement WallpaperColors (à partir du fond d'écran animé) est appliqué après que l'utilisateur a éteint l'écran et l'a rallumé.

Sélecteur de thème/fond d'écran

Comment activer le sélecteur de thème pour qu'il affiche plusieurs couleurs sources au choix des utilisateurs plutôt que la couleur de fréquence la plus élevée ? Est-il possible d'obtenir ces couleurs à partir de la logique d'extraction ?

Oui. Dans le sélecteur de thèmes, vous pouvez utiliser ColorScheme#getSeedColors(wallpaperColors: WallpaperColors).

Il existe une fonctionnalité pour les noms Pixel appelée icône à thème. Est-il inclus dans les trois correctifs que vous avez partagés ? Comment les OEM peuvent-ils implémenter cela ?

Non. Les icônes thématiques sont en version bêta et ne sont pas disponibles dans Android 12.

Est-il possible d'utiliser l'application Google Wallpaper avec les fonctionnalités d'extraction et de sélection des couleurs activées ?

Oui. Pour implémenter les fonctionnalités dans la dernière version de l'application Google Wallpaper, suivez les étapes d'intégration décrites plus haut sur cette page.

Pour en savoir plus, contactez votre TAM.

Google peut-il partager l'application ou le code source afin que les OEM puissent implémenter leur propre version de l'aperçu des couleurs dynamiques dans leur menu de paramètres, qui ressemble à la section d'aperçu affichée dans l'application de sélection de fond d'écran de Google ?

Les principales classes qui génèrent l'aperçu sont WallpaperPicker2 et Launcher3.

L'écran d'aperçu du fond d'écran est WallpaperSectionController.

Comment implémenter l'aperçu après avoir modifié la couleur, comme indiqué dans l'application Google Wallpaper ?

L'application de sélection du fond d'écran s'attend à ce qu'un ContentProvider soit disponible à partir du lanceur d'applications (un lanceur d'applications basé sur Launcher3 en dispose). L'aperçu est fourni par GridCustomizationsProvider dans le lanceur d'applications, qui doit être référencé dans les métadonnées de l'activité principale du lanceur d'applications pour que l'application de fond d'écran et de style puisse le lire. Tout cela est implémenté dans Launcher3 d'AOSP et est disponible pour les OEM.