Android Dynamic Colors

Introduit en 2014, Material Design avait pour vocation de simplifier la technologie et rationaliser les expériences web & mobiles, en misant sur des cartes et éléments graphiques épurés et fonctionnels.

Aujourd’hui, le challenge est plus grand, avec des écrans de tailles multiples qui envahissent notre quotidien. En parallèle, les utilisateurs attendent davantage de contrôle sur leurs devices, d’un point de vue design / émotionnel, au-delà de l’utilisabilité et du fonctionnel. 

Material You (Material 3), le nouveau langage de design pour Android 12, explore une approche plus personnelle du design, entre la sensibilité au design et les préférences individuelles. 

Avec Material You, Google veut laisser les commandes à l’utilisateur avec des possibilités de customisation quasi infinies. Concrètement, Material You génère une palette de couleurs - Dynamic Color - en fonction du fond d’écran choisi par l’utilisateur, et la décline à travers toute l’expérience, de façon totalement responsive pour épouser parfaitement toutes les tailles d’appareils : mobile, tablette, desktop.

Nous avons combiné la science des couleurs avec des années d’investissement en design interactif et d’ingénierie pour rendre possible la personnalisation de toutes les applications - pas seulement celles de Google - pour les palettes uniques de tous les utilisateurs en temps réel. 

Google

Au cœur de Material You, l’accessibilité : l’UI s'adapte à chaque utilisateur grâce au partage du contrôle du contraste, de la taille et de la largeur des lignes avec l’OS, conscient des contextes d'usage.

D’abord déployé sur les smartphones Pixel 6 à l’automne 2021, Material You devrait être disponible pour tous les appareils sous Android 12 cette année.

Focus sur Dynamic Colors

L’idée derrière ce concept est d’aller plus loin dans la personnalisation de l’expérience de l’utilisateur, en fonction de ses propres goûts.

Le fond d'écran d’un téléphone ou une couleur constituent la base de travail à partir de laquelle une couleur source est extraite pour générer une palette de couleurs : primaires, secondaires, tertiaires (depuis cette nouvelle version de Material) ainsi que leurs variantes (onPrimary, onSecondary, primaryContainer etc..). Une déclinaison pour chaque mode (Dark/Light) est prise en compte lors de la génération de la palette.

Des Customs Colors peuvent optionnellement être ajoutées dans le but d’apporter une personnalisation supplémentaire à l’identité de l'application.

Dès son activation par l’utilisateur dans les paramètres du téléphone, les widgets comme l'horloge ainsi que des applications comme la calculatrice ou Gmail adoptent automatiquement les Dynamic Colors.

Implémentation

Pour intégrer la librairie sur un projet Android, nous avons pris comme cas d’usage une application qui affiche un catalogue de burgers que l'on pourra ajouter à notre panier.

Mise à niveau Material

Material 3 est disponible à partir de la version 1.5.0 de Material Components et l'on doit ajouter la ligne suivante sur le build.gradle du module app.

implementation "com.google.android.material:material:1.5.0"

Migration vers Android 12

La prochaine étape consiste à migrer vers la version d’API 32 d’Android.

project_target_sdk_version = 32
project_compile_sdk_version = 32

NB : Depuis Android 12, il est obligatoire de rajouter le champ exported pour chaque activité déclarée dans le fichier manifest.

   <activity
            android:name=".ui.MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

Génération du thème par défaut

Il est ici question de générer un thème avec l’outil Google Material Theme Builder pour assurer la compatibilité des versions antérieures à Android 12, mais également pour en faire le thème par défaut si le thème dynamique n’est pas activé dans les paramètres du téléphone.

Les fichiers générés (colors.xml, styles.xml) sont intégrés dans le projet. En lançant l’application nous obtenons les apparences suivantes selon le mode (Light/Dark) :

Implémentation de l’activation des Dynamic Colors

Pour activer les Dynamic Colors sur les téléphones éligibles (à partir d'Android 12), le code suivant est rajouté dans la classe Application du projet :

 class MenuBurgerApplication : DaggerApplication() {
    override fun onCreate() {
        super.onCreate()
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

Vous pouvez observer ci-dessous l’adoption automatique de l’application, des couleurs du thème du téléphone qui a été choisi précédemment.

Les Dynamic Colors sont un enrichissement supplémentaire pour créer un lien plus fort avec l’utilisateur. Cependant, cela nécessite une vraie réflexion de la part des marques dont les couleurs constituent une part forte de leur identité auprès des consommateurs, déjà familiers avec celles-ci. Cela peut aussi être une manière d'événementialiser votre application avec des habillages thématiques.

Références :

Dynamic color – Material Design 3

Material You: Applying dynamic color to your app and brand