Conception Material You

À 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 la pièce maîtresse du design Material You et constitue un élément clé de la stratégie pluriannuelle d'Android qui vise à offrir une personnalisation plus simple et plus poussée à ses utilisateurs, comme aucun autre appareil. Material You offre:

  • Les utilisateurs et les développeurs bénéficient d'une présentation cohérente et détaillée de la personnalisation disponible sur tous les appareils Android.

  • Possibilité pour les OEM Android 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:

Flux de couleurs Material You

Figure 1 : Flux de couleurs dynamiques 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 de 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'ensemble de l'écosystème d'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:

Spécifier des couleurs personnalisées dans le sélecteur de thème

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 d'APK bouchon

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 dans 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 article du tableau des packs de couleurs, il doit y avoir une entrée color_primary_item et une entrée color_secondary_item (et les deux couleurs doivent être de la même couleur). 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émographique, 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 offrir plus d'options à l'utilisateur.

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

Pour activer l'extraction des couleurs de fond d'écran, sélectionnez les correctifs Android 12 répertoriés ci-dessus (cette fonctionnalité sera activée par défaut dans une prochaine version d'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 choisit la couleur adaptée à la fréquence la plus élevé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

En utilisant la seule couleur source dérivée de l'étape précédente, Android génère cinq palettes tonales uniques (accent 1-3, neutre 1-2), chaque palette comprenant 13 couleurs et chaque couleur avec différentes valeurs de luminance (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 du développement, les cinq palettes tonales (accent1, accent2, accent3, neutre1, neutre2) et leurs 13 couleurs correspondantes doivent être basées sur la couleur source unique, avec les modifications respectives des valeurs de chrominance 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 l'exécuter, utilisez atest SystemPalette.

Étape 4: Utilisez 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 à les 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 AOSP WallpaperPicker

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 (où 746BC1 est 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: Envoyez une demande d'assistance

En plus de l'intégration système, vous devez déposer 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 les couleurs dynamiques, nous utilisons une liste d'autorisation codée en dur qui permet d'identifier les appareils sur lesquels la fonctionnalité Palettes tonales de couleurs dynamiques est intégrée.

Mouvement

Les mouvements fluides confèrent aux appareils un aspect moderne et haut de gamme. Pour instaurer et maintenir la confiance et la satisfaction des développeurs, le défilement hors limites et l'ondulation sont deux éléments clés du mouvement fluide qui doivent avoir une apparence cohérente.

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 :

Défilement hors limites Material You

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 est semblable à celui-ci:

  • 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 modifier certaines applications et certaines 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 suivantes de l'expérience utilisateur:

    • 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 que l'animation EdgeEffect se déroule, 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 des commentaires aux utilisateurs lorsqu'ils appuient dessus.

Material You Ripple

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.

Ressources supplémentaires

Utilisation des couleurs SysUI

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

Utilisation des couleurs Material You

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

Mises à jour des 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 permettant de fournir de la couleur à des vues spécifiques.

Rôle de couleur Attribut de thème Android Thème clair
Couleurs dynamiques		 Thème sombre
Couleur dynamique
Principale colorPrimary system_accent1_600 system_accent1_200
Sur principal colorOnPrimary system_accent1_0 accent_système1_800
Secondaire colorSecondary accent_système2_600 system_accent2_200
Sur secondaire colorOnSecondaire system_accent2_0 accent_système2_800
Erreur Erreur de couleur N/A (red_600) N/A (red_200)
On Error colorOnError N/A (blanc) N/A (red_900)
Arrière-plan android:colorBackground système_neutre1_10 système_neutre1_900
Sur arrière-plan colorOnBackground system_neutral1_900 system_neutral1_100
Surface colorSurface system_neutral1_10 system_neutral1_900
On Surface colorOnSurface system_neutral1_900 système_neutre1_100

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

Rôle de couleur Attribut de thème Android Thème clair
Couleurs dynamiques		 Thème sombre
Couleur dynamique
Contenu de l'état principal colorPrimaryStateContent system_accent1_700 system_accent1_200
Calque d'état principal colorPrimaryStateLayer system_accent1_600 system_accent1_300
Contenu de l'état secondaire colorSecondaryStateContent system_accent2_700 system_accent2_200
Calque d'état secondaire colorSecondaryStateLayer system_accent2_600 system_accent2_300
Sur le contenu de l'état principal colorOnPrimaryStateContent accent_systémique1_0 system_accent1_800
Sur le calque d'état principal colorOnPrimaryStateLayer accent_système1_900 system_accent1_800
Contenu de l'état secondaire colorOnSecondaryStateContent system_accent2_0 system_accent2_800
Sur la couche d'état secondaire colorOnSecondStateLayer system_accent2_900 system_accent2_800
Sur le contenu d'état du conteneur principal colorOnPrimaryContainerStateContent accent_système1_900 system_accent1_900
Sur la couche d'état du conteneur principal colorOnPrimaryContainerStateLayer system_accent1_900 accent_système1_900
À propos du contenu de l'état du conteneur secondaire colorOnSecondaryContainerStateContent system_accent2_900 system_accent2_900
Sur la couche d'état du conteneur secondaire colorOnSecondContainerStateLayer system_accent2_900 accent_système2_900
Sur le contenu d'état du conteneur tertiaire colorOnTertiaryContainerStateContent system_accent3_900 system_accent3_900
Sur la couche d'état du conteneur tertiaire colorOnTertiaryContainerStateLayer system_accent3_900 system_accent3_900
Sur des contenus en état de surface colorOnSurfaceStateContent system_neutral1_900 system_neutral1_100
Calque d'état "Sur la surface" colorOnSurfaceStateLayer system_neutral1_900 system_neutral1_100
Sur le contenu d'état de variante de surface colorOnSurfaceVariantStateContent system_neutral2_700 system_neutral2_200
Calque d'état de la variante de surface colorOnSurfaceVariantStateLayer system_neutral2_700 système_neutre2_200
Contenu de l'état d'erreur colorErrorStateContent red800 Red200

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, pourrions-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 est affichée 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 puis-je activer le sélecteur de thème pour afficher plusieurs couleurs sources que la couleur la plus élevée pour les utilisateurs ? Existe-t-il un moyen d'obtenir ces couleurs à partir de la logique d'extraction ?

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

Il existe une fonctionnalité pour les noms de 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ème sont en version bêta et ne sont pas disponibles sur 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. Les fonctionnalités peuvent être implémentées dans la dernière version de l'application Google Wallpaper en suivant 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 Fond d'écran Google ?

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.