1. Avant de commencer
Dans cet atelier de programmation, vous allez mettre à jour l'application de démarrage, une application de calcul du pourboire, pour utiliser les nouvelles fonctionnalités de Material Design 3. Celles-ci permettent de thématiser dynamiquement l'interface utilisateur d'une application en fonction du fond d'écran de l'utilisateur. Vous trouverez ci-dessous quelques captures d'écran de l'application avec la couleur dynamique appliquée. Vous examinerez également d'autres scénarios vous permettant de contrôler l'application des couleurs.
Prérequis
Les développeurs doivent être
- Vous connaissez les concepts de base des thèmes dans Android.
- Vous maîtrisez la modification du thème d'une application.
Points abordés
- Différencier les composants Material existants des thèmes Material 3
- Mettre à jour un thème vers Material 3
- Créer et appliquer des thèmes à l'aide de nos outils
- Relations entre les attributs de thème
Prérequis
- Un ordinateur sur lequel est installé Android Studio
- Code de l'application Tip Time. https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution
2. Présentation de l'application de démarrage
L'application Tip Time est une calculatrice de pourboire avec des options permettant de le personnaliser. Il s'agit de l'une des applications exemples de notre cours de formation "Principes de base d'Android en Kotlin".
3. Mettre à jour les dépendances Gradle
Avant de mettre à jour le thème et d'appliquer la couleur dynamique, vous devez apporter quelques modifications au fichier build.gradle de votre application.
Dans la section des dépendances, assurez-vous que la bibliothèque Material est 1.5.0-alpha04 ou version ultérieure :
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
}
Dans la section "android", modifiez compileSdkVersion et targetSdkVersion.
à 31 ou version ultérieure :
android {
compileSdkVersion 31
// ...
defaultConfig {
// ...
targetSdkVersion 31
}
}
Ces instructions supposent que vous utilisez une application avec des dépendances relativement récentes. Pour une application qui n'utilise pas encore Material ou une version plus ancienne, veuillez consulter les instructions de la documentation de démarrage des composants Material Design pour Android.
Où que vous ayez créé vos thèmes, remplacez les références à Theme.MaterialComponents.* par Theme.Material3.*. Certains styles n'ont pas encore de nouveau style dans l'espace de noms Material3, mais la plupart des composants hériteront toujours du nouveau style une fois que le thème parent sera mis à jour vers Theme.Material3.*. Nous pouvons voir ci-dessous que les boutons adoptent désormais le nouveau thème arrondi.
Dans le fichier de thèmes ci-dessous, seul le thème parent a été modifié. Nous allons remplacer complètement ce thème dans un instant. Certains attributs de couleur sont obsolètes et certains styles personnalisés que nous avons créés sont désormais standards dans Material3. Nous souhaitions toutefois vous donner
themes.xml
<style name="Theme.TipTime" parent="Theme.Material3.Light">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/green</item>
<item name="colorPrimaryVariant">@color/green_dark</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/blue</item>
<item name="colorSecondaryVariant">@color/blue_dark</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- For text input fields -->
<item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
<!-- For radio buttons -->
<item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
<!-- For switches -->
<item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>
4. Comprendre les thèmes de couleur et les rôles de couleur
Le système de couleurs Material 3 utilise une approche organisée pour appliquer des couleurs à votre UI. Un certain nombre d'attributs de Theme.AppCompat sont toujours utilisés. Toutefois, d'autres attributs ont été ajoutés dans Theme.MaterialComponents.* et encore plus dans Theme.Material3.*. Il est donc important d'examiner tous les écrans de votre application pour vous assurer qu'aucune propriété non implémentée ne transparaît à partir du thème de base.
Comprendre les rôles des couleurs
Un thème Material 3 comporte plus de 20 attributs liés à la couleur. Cela peut sembler intimidant au premier abord, mais en réalité, quelques couleurs clés se combinent avec les mêmes quatre ou cinq rôles de couleur pour créer des couleurs dérivées.
Voici ces groupes de couleurs :
- Primary (primaire) : couleur principale de votre application
- Secondary (secondaire) : couleur secondaire de votre application
- Tertiaire : troisième couleur complémentaire des couleurs primaire et secondaire
- Erreur, utilisé pour le texte et les boîtes de dialogue d'erreur
- Arrière-plan
- Surface, SurfaceVariant, Surface Inverse
Voici les rôles pour les couleurs primaire, secondaire, tertiaire et d'erreur :
<couleur de base> | Couleur de base |
on<base color> | la couleur des icônes et du texte qui s'affichent sur la couleur de base. |
Conteneur <couleur de base> | dérivée de la couleur de base, utilisée pour les boutons, les boîtes de dialogue, etc. |
on<base color>Container | la couleur des icônes et du texte dans le conteneur. |
Par exemple, un bouton d'action flottant avec un style par défaut dans Material 3 utilise Primary comme couleur de base. Il utilise donc primaryContainer pour la couleur d'arrière-plan du bouton et onPrimaryContainer pour son contenu.
Lorsque vous personnalisez un thème manuellement, vous devez au minimum vérifier que l'attribut on<base color> de chaque couleur de base que vous modifiez est toujours lisible.
La bonne pratique consiste à ajuster tous les rôles d'un groupe de couleurs en même temps pour s'assurer qu'aucun artefact ne passe de la base à votre application.
Les couleurs de base de l'arrière-plan et de la surface ont généralement deux rôles : la couleur de base elle-même et on<base color> pour les icônes ou le texte qui y apparaissent.
5. Créer un thème Material 3 avec Material Theme Builder
Material Theme Builder facilite la création d'un jeu de couleurs personnalisé. Il vous permet également d'utiliser son exportation de code intégrée pour migrer vers le système de couleurs M3 et profiter de la couleur dynamique. En savoir plus : material.io/material-theme-builder
Le thème de l'application Tip Time contient plusieurs styles pour les composants, mais la plupart sont des styles par défaut dans les thèmes Material 3. Les deux seules couleurs clés qui nous intéressent sont les couleurs primaire et secondaire.
Elles correspondent à une couleur primaire verte (#1B5E20) et à une couleur secondaire bleue (#0288D1).
Vous pouvez saisir ces couleurs dans Material Theme Builder et exporter un thème complet (en supposant qu'un lien vers un aperçu complet se trouve ailleurs).
Sachez que les couleurs que vous saisissez peuvent changer de ton pour s'adapter à l'algorithme de génération de couleurs et garantir des couleurs complémentaires et lisibles.
Vous trouverez ci-dessous un sous-ensemble des valeurs générées lorsque vous saisissez des couleurs personnalisées.
6. Utiliser les fichiers d'exportation Material Theme Builder
L'archive d'exportation contient les répertoires "values" et "values-night" avec leur propre fichier themes.xml, correspondant aux thèmes clair et sombre. Toutes les couleurs sont définies dans values/colors.xml.
Les fichiers peuvent être copiés tels quels, mais vous devrez modifier le nom de votre thème dans AndroidManifest.xml ou dans les fichiers de thème pour qu'ils correspondent. Le nom par défaut de l'outil est AppTheme.
Redémarrez l'application. Elle devrait avoir le même aspect que précédemment. L'un des changements notables concerne les composants Switch et RadioButtons, dont les états sélectionnés sont désormais thématisés avec des tons de la couleur primaire plutôt que des couleurs secondaires. Dans les applications plus volumineuses, vous devrez peut-être revoir certaines conceptions.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tiptime">
<application ...>
<activity android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
7. Ajouter des couleurs dynamiques
Avec un thème Material 3 approprié, nous pouvons rendre l'UI dynamique en ajoutant quelques éléments.
L'API Dynamic Colors vous permet d'appliquer des couleurs dynamiques à toutes les activités.
dans une application, des activités individuelles, ou des vues ou fragments individuels. Pour
Dans cette application, nous allons appliquer la couleur dynamique de manière globale.
Créer un fichier de classe Application
class TipTimeApplication: Application() {
override fun onCreate() {
// Apply dynamic color
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Nous devons faire référence à ce fichier nouvellement créé dans le fichier manifeste Android :
AndroidManifest.xml
< application android name=".TipTimeApplication
<!--- Other existing attributes –>
</application >
Sur les systèmes Android 12 et versions ultérieures, le fond d'écran de l'utilisateur pour le schéma par défaut est examiné afin de générer plusieurs palettes tonales. Les valeurs de ces palettes permettent de créer un ThemeOverlay.
La classe DynamicColors enregistre un ActivityLifecycleCallbacks qui intercepte ActivityPreCreated pour appliquer la superposition de thème dynamique créée par le système ou celle que vous avez fournie.
8. Appliquer une superposition de thème personnalisé
Nos outils peuvent exporter des calques de thème, mais vous pouvez également les créer manuellement si vous remplacez un petit nombre d'attributs.
Une superposition de thème est destinée à être utilisée conjointement avec un autre thème et ne fournit que les valeurs qui seront modifiées en plus du thème de base.
Supposons que, pour une raison quelconque (par exemple, l'image de marque), nous ayons besoin que les tons de couleur primaire soient des nuances de rouge. Nous pourrions le faire avec les fichiers et attributs suivants.
colors.xml
<resources>
<color name="overlay_light_primary">#9C4146</color>
<color name="overlay_light_onPrimary">#FFFFFF</color>
<color name= "overlay_light_primaryContainer">#FFDADB</color>
<color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >
themes_overlays.xml
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
<item name="colorPrimary">@color/overlay_light_primary</item>
<item name="colorOnPrimary">@color/overlay_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>
Pour le code ci-dessus, Android 12 appliquera un thème clair dynamique et superposera vos modifications. Vous pouvez également utiliser n'importe quel ThemeOverlay valide comme parent, y compris l'un des suivants :
ThemeOverlay.Material3.Light
ThemeOverlay.Material3.Dark
ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark
ThemeOverlay.Material3.DynamicColors.DayNight
Pour utiliser cette superposition de thème au lieu de celle par défaut de Material, remplacez l'appel à DynamicColors.applyToActivitiesIfAvailable par :
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)
9. Ajouter des couleurs dynamiques aux attributs personnalisés
Jusqu'à présent, nous avons remplacé des propriétés qui existaient déjà dans un thème Material 3. Dans le cas de la couleur dynamique, il est possible que nous ayons un ou plusieurs attributs personnalisés à attribuer.
Lorsqu'une application choisit d'utiliser les couleurs dynamiques, elle a accès à cinq palettes tonales : trois palettes d'accentuation et deux palettes neutres, avec les rôles approximatifs suivants :
system_accent1 | Nuances de couleur principale |
system_accent2 | Tons de couleur secondaires |
system_accent3 | Tons de couleur tertiaires |
system_neutral1 | Arrière-plans et surfaces neutres |
system_neutral2 | Surfaces et contours neutres |
Chaque palette comporte un certain nombre de nuances tonales allant du blanc
Noir : 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.
Lorsque vous concevez une UI pour les couleurs dynamiques, vous devez moins vous concentrer sur la couleur spécifique que sur la relation entre la teinte et la luminance de ce composant et celles des autres éléments du système de conception.
Imaginons que vous souhaitiez que les icônes soient thématisées à l'aide de la palette d'accentuation secondaire et que vous ayez ajouté un attribut pour teinter les icônes avec l'entrée suivante dans attrs.xml.
attrs.xml
<resources>
<attr name="iconColor" format="color" />
</resources>
Votre thème peut se présenter comme suit :
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight">
<item name="iconColor">@android:color/system_accent2_600</item>
</style>
Lorsque vous réinstallez l'application et que vous modifiez votre fond d'écran, l'application récupère cette palette secondaire.
Ces palettes sont spécifiques à Android 12 (API 31). Vous devrez donc placer les fichiers concernés dans des dossiers avec le suffixe -v31, sauf si la version minimale du SDK de votre application est définie sur 31 ou plus.
10. Résumé
Dans cet atelier de programmation, vous avez pu :
- Ajoutez des dépendances pour mettre à niveau votre thème vers Material 3.
- Comprendre les nouveaux groupes et rôles de couleur
- Découvrez comment migrer d'un thème statique vers une couleur dynamique.
- Découvrez comment utiliser les thèmes superposés et les couleurs dynamiques pour les attributs de thème personnalisés.