Matériel que vous concevez

À partir d'Android 12, la conception Material You se concentre sur l'expression et la fluidité dans le système d'exploitation 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 dans vos appareils Android dans les domaines suivants :

  • Couleur dynamique
  • Mouvement
  • Widgets

Couleur dynamique

La couleur dynamique est la pièce maîtresse de la conception de Material You et un élément clé de la stratégie pluriannuelle d'Android visant à offrir à ses utilisateurs une personnalisation plus simple et plus approfondie, comme aucun autre appareil ne le fait. Matériel que vous propose :

  • Les utilisateurs et les développeurs bénéficient d'une histoire de personnalisation cohérente et riche, disponible sur n'importe quel appareil Android.

  • Les OEM Android ont la possibilité de continuer à innover dans l'interface utilisateur du système et les applications propriétaires d'une manière qui correspond à la couleur, à la marque et à la forme de leur matériel et de leur marque.

Pour profiter des couleurs dynamiques, utilisez l’histoire d’extraction de couleurs Android 12 Material You comme élément clé de votre offre logicielle aux utilisateurs. Sur l'appareil, utilisez la logique d'extraction de couleurs présente dans AOSP, en particulier la logique qui prend en compte une seule couleur source de fond d'écran ou de thème et la génère via 65 API de couleurs. Pour connaître les exigences en matière de couleurs dynamiques, reportez-vous à Utilisation de Dynamic Color .

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

Matériau que vous colorez

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'un des éléments suivants :

    • Thème de l'appareil. Une fois sélectionné, Android sélectionne automatiquement une couleur source unique qui répond aux exigences.

    • Nouveau fond d'écran + thème. Lorsqu'elle est sélectionnée, la logique AOSP sélectionne automatiquement une seule couleur source dans le papier peint sélectionné.

  3. AOSP étend la couleur source unique en 5 palettes tonales avec 13 variantes de couleurs tonales chacune, selon la logique AOSP, qui remplissent ensuite les 65 attributs de couleur.

  4. L'interface utilisateur 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 encourageons à utiliser la même palette de couleurs pour l'interface utilisateur système de l'appareil et les applications spécifiques aux OEM.

Correctifs Android 12

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

Spécification de couleurs personnalisées sur ThemePicker

Si vous utilisez l'application AOSP ThemePicker, 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 fichier APK de 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 APK de stub

Un exemple de version de cet APK peut être trouvé dans packages/apps/ThemePicker/themes .

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

Le stub 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 color_bundles a un nom distinct, à condition que les chaînes ci-dessous soient nommées bundle_name_ item .

Il doit y avoir une chaîne bundle_name_ item pour chaque couleur, avec un nom descriptif pour chaque couleur. Ceux-ci peuvent être traduits en ajoutant les chaînes traduites correspondantes dans les répertoires res/values- language code .

Les valeurs de couleur réelles peuvent se trouver soit sur le même XML, soit sur 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 de faisceaux de couleurs, il doit y avoir une 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 pour chaque couleur à afficher dans la section des couleurs de base .

Étape 1 : Créer une expérience de thème utilisateur

Le sélecteur de thème est l'endroit où les utilisateurs utilisent les nouvelles capacités de personnalisation de Material You et choisissent potentiellement entre des options de couleur ou des préréglages. Comme cela correspond à votre produit et à la démographie de vos utilisateurs, vous pouvez offrir aux utilisateurs une personnalisation et une expérience de couleur plus riches grâce à l'utilisation d'un sélecteur de thème ou d'un sélecteur de fond d'écran .

  • Lorsque vous utilisez un sélecteur de papier peint, l’extraction des couleurs du papier peint est activée par défaut. Cependant, vous pouvez apporter certaines personnalisations au sélecteur pour offrir plus d'options à l'utilisateur.

Étape 2 : Extraire la couleur du papier peint dans une couleur source

Pour activer l'extraction des couleurs du fond d'écran, sélectionnez les correctifs Android 12 répertoriés ci-dessus (cette fonctionnalité sera activée par défaut dans une future version AOSP). La logique AOSP qui déclenche l'extraction du papier peint 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 adaptée à l'utilisation. Pour profiter d'autres couleurs sources renvoyées par l'algorithme et présenter ces couleurs aux utilisateurs dans le sélecteur de thème, utilisez ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) .

Pour pouvoir être utilisée, une couleur source (qu'elle soit extraite du papier peint ou d'un préréglage choisi par l'utilisateur) doit avoir une valeur de chrominance CAM16 minimale de 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 reste représentative du choix de l'utilisateur. Pour lire et modifier les couleurs dans CAM16, utilisez Cam#fromInt ou Cam#getInt .

Utilisation d'une palette de couleurs non dynamique Pour les appareils qui ne prennent pas en charge l'extraction des couleurs du fond d'écran, vous pouvez toujours vous assurer que les applications Google et les applications tierces prenant en charge les couleurs dynamiques s'affichent parfaitement en procédant comme suit :

  • Utilisez la palette de matériaux 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 système d'exploitation à l'aide d'un sélecteur de thème prédéfini.

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

En utilisant la couleur source unique dérivée de l'étape précédente, Android génère 5 palettes tonales uniques (accent 1-3, neutre 1-2), chaque palette comprenant 13 couleurs et chaque couleur incluant 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 couleurs ; les détails fournis ci-dessous décrivent la mise en œuvre.

Pour des raisons de cohérence du développeur, les 5 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 couleurs 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 positifs

  • system_neutral1

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

  • system_neutral2

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

CTS comprend des tests pour valider les appels API de luminance et de teinte. Pour exécuter, utilisez atest SystemPalette .

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

Une fois les couleurs dynamiques définies sur un appareil, les applications suivent les directives relatives aux matériaux pour utiliser les couleurs. Les directives matérielles devraient être publiées sur Material.io d'ici le 26 octobre 2021 pour que les applications tierces puissent être adoptées. Pour l’interface utilisateur système et les applications propriétaires, nous vous recommandons fortement d’intégrer des couleurs dynamiques tout au long de l’expérience utilisateur d’une manière qui correspond à votre matériel et à votre marque et vous aide à différencier vos appareils.

Pour obtenir des conseils généraux sur les couleurs dynamiques, consultez les éléments suivants :

  • Utilisez des couleurs d'accentuation pour les éléments de premier plan dans les applications et l'interface utilisateur 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 dans les applications et l’interface utilisateur 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 plus d'informations sur la manière dont Material You mappe les couleurs et sur la manière dont les API sont utilisées dans SysUI, consultez Ressources supplémentaires .

Étape 5 : Ajoutez des options de couleurs dynamiques dans votre implémentation AOSP WallpaperPicker

Build pour Android 13 et versions ultérieures

À 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 couleurs. Nous avons actuellement quatre variantes dans la base de code 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.

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

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

Build pour Android 12 et versions antérieures

Lors de l'utilisation d'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 des couleurs du papier peint (étape 2) et d'étendre directement la couleur source fournie en 65 attributs de couleur (étape 3).

Étape 6 : déposer un ticket

Outre l'intégration du système, vous devez déposer un ticket et nous indiquer votre nom de marque ( Build.MANUFACTURER ). Étant donné que la plupart des applications tierces utilisent les composants matériels pour Android pour afficher des couleurs dynamiques, nous utilisons une liste verte codée en dur pour indiquer quels appareils ont intégré la fonctionnalité de palettes de couleurs dynamiques .

Mouvement

Le mouvement fluide donne aux appareils un aspect moderne et haut de gamme. Pour créer et maintenir la confiance et le bonheur des développeurs, le défilement excessif et l'ondulation sont deux éléments clés d'un mouvement fluide qui doivent paraître cohérents.

Utiliser l'overscroll dans votre système d'exploitation

Android 12 inclut un mouvement de défilement dynamique plus réactif sous la forme d'un étirement de vue, affiché lorsque l'utilisateur essaie de faire défiler au-delà du bord d'une liste. Un exemple est présenté ci-dessous :

Matériel que vous surfaites

Figure 2. Effet de défilement excessif d'Android 12, comme indiqué dans Paramètres

Pour garantir la cohérence des développeurs, assurez-vous que l’effet de défilement global sur vos appareils est similaire à celui-ci :

  • Sur les appareils qui renvoient true pour ActivityManager.isHighEndGfx() , l'effet de défilement excessif est un étirement non linéaire de l'écran (comme indiqué 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 l'overscroll dans les applications propriétaires

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

  • Pour prendre en charge le défilement excessif, effectuez une mise à niveau vers 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 UX suivantes :

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

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

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

    • Lorsque vous travaillez avec un 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 le doigt change de direction au lieu de relâcher l'étirement.

Pour plus de détails sur le défilement excessif, reportez-vous à Animer un geste de défilement .

Utiliser Ripple (retour tactile) dans votre système d'exploitation

Android 12 inclut une ondulation tactile plus douce et plus subtile pour fournir des commentaires aux utilisateurs lorsqu'ils appuient.

Matériau que vous ondissez

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

Pour garantir la prévisibilité des développeurs et offrir une expérience utilisateur exceptionnelle, assurez-vous que l'effet d'entraînement sur vos appareils est similaire à l'exemple présenté 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 toute régression involontaire introduite 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 API que tous les OEM devraient prendre en charge.

Ressources additionnelles

Utilisation des couleurs SysUI

(accent1 = A1, accent2 = A2, accent3 = A3, neutre1 = N1, neutre2 = N2)

Matériau que vous colorez

Figure 4. Utilisation dynamique des couleurs dans l'interface utilisateur du système

Mises à jour des attributs de couleur de la bibliothèque de matériaux

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

Rôle de la couleur Attribut du thème Android Thème Lumière
Couleur dynamique		 Thème sombre
Couleur dynamique
Primaire couleurPrimaire system_accent1_600 système_accent1_200
Sur le primaire couleurSurPrimaire system_accent1_0 system_accent1_800
Secondaire couleurSecondaire système_accent2_600 système_accent2_200
Au secondaire couleurOnSecondaire system_accent2_0 system_accent2_800
Erreur erreur de couleur N/A (rouge_600) N/A (rouge_200)
En cas d'erreur couleurSurErreur N/A (blanc) N/A (rouge_900)
Arrière-plan android:couleurArrière-plan système_neutre1_10 système_neutre1_900
En arrière-plan couleur sur fond système_neutre1_900 système_neutre1_100
Surface couleurSurface système_neutre1_10 système_neutre1_900
En surface couleurSurSurface système_neutre1_900 système_neutre1_100

Le matériau mettra à jour ses attributs d'état avec les pointeurs suivants :

Rôle de la couleur Attribut du thème Android Thème Lumière
Couleur dynamique		 Thème sombre
Couleur dynamique
Contenu de l'état primaire colorPrimaryStateContent system_accent1_700 système_accent1_200
Couche d'état primaire colorPrimaryStateLayer system_accent1_600 system_accent1_300
Contenu de l'état secondaire colorSecondaryStateContent system_accent2_700 système_accent2_200
Couche d'état secondaire colorSecondaryStateLayer système_accent2_600 system_accent2_300
Sur le contenu de l'état principal couleurOnPrimaryStateContent system_accent1_0 system_accent1_800
Sur la couche d'état primaire couleurOnPrimaryStateLayer system_accent1_900 system_accent1_800
Sur le contenu de l'état secondaire colorOnSecondaryStateContent system_accent2_0 system_accent2_800
Sur la couche d'état secondaire couleurOnSecondaryStateLayer system_accent2_900 system_accent2_800
Sur le contenu de l'état du conteneur principal colorOnPrimaryContainerStateContent system_accent1_900 system_accent1_900
Sur la couche d'état du conteneur principal colorOnPrimaryContainerStateLayer system_accent1_900 system_accent1_900
Sur le contenu de l'état du conteneur secondaire colorOnSecondaryContainerStateContent system_accent2_900 system_accent2_900
Sur la couche d'état du conteneur secondaire colorOnSecondaryContainerStateLayer system_accent2_900 system_accent2_900
Sur le contenu de l'é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 le contenu de l'état de surface colorOnSurfaceStateContent système_neutre1_900 système_neutre1_100
Sur la couche d'état de surface couleurSurSurfaceStateLayer système_neutre1_900 système_neutre1_100
Sur le contenu de l'état de variante de surface colorOnSurfaceVariantStateContent système_neutre2_700 système_neutre2_200
Sur la couche d'état de variante de surface colorOnSurfaceVariantStateLayer système_neutre2_700 système_neutre2_200
Contenu de l'état d'erreur colorErrorStateContent rouge800 rouge200

FAQ

Extraction des couleurs

Une fois qu'un utilisateur modifie un fond d'écran, l'extraction des couleurs est-elle automatiquement effectuée ou doit-elle être déclenchée quelque part ?

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 couleurs prend la couleur de l'écran ? Certains utilisateurs voudront peut-être les couleurs de la dernière image, car elles s'affichent le plus souvent.

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 (du fond d'écran animé) est appliqué une fois que l'utilisateur a éteint l'écran et l'a rallumé.

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

Comment puis-je permettre au sélecteur de thème d'afficher plusieurs couleurs sources que les utilisateurs peuvent choisir plutôt que la couleur la plus fréquente ? 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é sur les noms de pixels sous forme d'icône thématique . Est-il inclus dans les trois patchs que vous avez partagés ? Comment les constructeurs OEM peuvent-ils mettre en œuvre cela ?

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

Existe-t-il un moyen 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.

Contactez votre TAM pour plus de détails.

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

Les principales classes qui affichent 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 changé la couleur, comme indiqué dans l'application Google Wallpaper ?

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