Modifier le thème de l'application

1. Avant de commencer

Material est un système de graphisme conçu par Google pour aider les développeurs à créer des contenus de haute qualité pour Android et d'autres plates-formes. Le système complet Material inclut des directives pour concevoir le visuel, les animations et les interactions dans votre application, mais cet atelier de programmation portera sur la modification du thème de couleur de votre application Android.

L'atelier de programmation utilise le modèle d'application "Empty Activity" (activité vide), mais vous pouvez utiliser l'application Android sur laquelle vous travaillez. Si vous suivez cet atelier dans le cadre du cours sur les principes de base d'Android, vous pouvez utiliser l'application Tip Time.

Conditions préalables

  • Vous savez créer une application Android à partir d'un modèle dans Android Studio.
  • Vous savez exécuter une application Android sur l'émulateur ou un appareil dans Android Studio.
  • Vous disposez d'un appareil ou d'un émulateur Android exécutant l'API 28 (Android 9) ou l'API 29 (Android 10), ou version ultérieure.
  • Vous savez modifier un fichier XML.

Points abordés

  • Comment choisir des couleurs efficaces pour votre application en appliquant les principes du Material Design
  • Comment définir des couleurs dans le thème de votre application
  • Les composants RVB d'une couleur
  • Appliquer un style à une View
  • Modifier l'apparence d'une application à l'aide d'un thème
  • Comprendre l'importance du contraste des couleurs

Ce dont vous avez besoin

  • Un ordinateur exécutant la dernière version stable d'Android Studio
  • Un navigateur avec une connexion Internet pour accéder aux outils de couleur Material

2. Conception et couleur

Material Design

Le système Material Design s'inspire du monde physique et de ses textures, y compris la façon dont les objets reflètent la lumière et projettent des ombres. Vous y trouverez des consignes vous expliquant comment élaborer une application à l'interface lisible, attrayante et cohérente. La thématisation Material vous permet d'utiliser Material Design dans votre application et vous offre des conseils pour personnaliser ses couleurs, sa typographie et ses formes. Material Design intègre un thème de référence qui peut être utilisé tel quel. Vous pouvez ensuite le personnaliser à votre guise pour que Material fonctionne pour votre application.

Présentation sur les couleurs

La couleur est partout autour de nous, tant dans le monde réel que dans le monde numérique. Tout le monde ne voit pas la couleur de la même manière. Le choix des couleurs pour votre application doit donc être optimal pour les utilisateurs. Choisir des couleurs au contraste suffisant n'est qu'une première étape dans la création d'applications plus accessibles.

55f93a1ea75d644a.png

Une couleur peut être représentée par 3 chiffres hexadécimaux, #00-#FF (0-255), représentant les composants rouge, vert et bleu (RVB) de cette couleur. Plus le chiffre est élevé, plus ce composant est présent dans la couleur.

e0349c33dd6fbafe.png

Notez qu'une couleur peut également être définie à l'aide de la valeur alpha #00-#FF, qui représente la transparence (#00 = 0 % = entièrement transparente, #FF = 100 % = entièrement opaque). Lorsqu'elle est incluse, la valeur alpha correspond au premier des quatre caractères du code hexadécimal (ARVB). Si aucune valeur alpha n'est incluse, il s'agit par défaut de #FF = 100 % opaque.

Toutefois, vous n'avez pas besoin de générer vous-même les codes hexadécimaux. Des outils sont à votre disposition pour vous aider à choisir les couleurs.

Voici quelques exemples que vous avez peut-être vus dans le fichier colors.xml de votre application Android : 100 % noir (R=#00, G=#00, B=#00) et 100 % blanc (R=#FF, G=#FF, B=#FF), comme montré ci-dessous.

<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>

3. Thèmes

Un style peut spécifier les attributs d'une View, comme la couleur et la taille de la police, la couleur de l'arrière-plan, et bien plus.

Un thème est une collection de styles qui est appliquée à l'ensemble d'une application, d'une activité ou d'une hiérarchie de vues, et pas seulement pour une View individuelle. Lorsque vous appliquez un thème à une application, une activité, une vue ou un groupe de vues, le thème est appliqué à cet élément et à tous ses enfants. Les thèmes servent également à appliquer des styles aux éléments autres que des vues, comme la barre d'état et l'arrière-plan d'une fenêtre.

Créer un projet "Activité vide"

Si vous utilisez votre propre application, vous pouvez ignorer cette section. Si vous n'avez pas d'application sur laquelle travailler, suivez ces étapes pour créer une activité vide.

  1. Ouvrez Android Studio.
  2. Créez un projet Kotlin à l'aide du modèle Empty Activity (Activité vide).
  3. Utilisez le nom "TipTime". Vous pouvez également conserver le nom par défaut "My application" (Mon application) si vous ne suivez aucun autre atelier de programmation.
  4. Sélectionnez un niveau d'API minimal de 19 (KitKat).
  5. Une fois l'application créée, ouvrez activity_main.xml (app > res > layouts > activity_main.xml).
  6. Si nécessaire, passez à la vue Code.
  7. Remplacez l'intégralité du texte par ce code XML :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical"
        android:text="@string/primary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:gravity="center_vertical"
        android:text="@string/secondary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@string/email_icon"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</LinearLayout>
  1. Ouvrez strings.xml (app > res > values > string.xml).
  2. Remplacez l'intégralité du texte par ce code XML :
<resources>
    <string name="app_name">TipTime</string>
    <string name="primary_color">Primary color</string>
    <string name="button">Button</string>
    <string name="secondary_color">Secondary color</string>
    <string name="email_icon">email icon</string>
</resources>
  1. Exécutez votre application. Elle devrait ressembler à la capture d'écran ci-dessous.

8949c2a02d8fea15.png

L'application inclut des TextView et des Button qui vous permettent de voir à quoi ressemblent les couleurs proposées dans une application Android. Nous modifierons la couleur du bouton afin qu'elle corresponde à la couleur principale du thème.

En savoir plus sur les couleurs du thème

Dans les applications Android, les différentes parties de l'interface utilisateur utilisent des couleurs différentes. Pour vous aider à optimiser les couleurs dans votre application et à les appliquer de manière cohérente, le système de thème regroupe les couleurs en 12 attributs nommés pour la couleur à utiliser dans le texte, les icônes, etc. Vous n'avez pas besoin de tous les définir dans votre thème. Vous choisirez les couleurs principales et secondaires, ainsi que les couleurs du texte et des icônes qui s'afficheront par-dessus ces couleurs.

af6c8e0d93135130.png

Les couleurs "On" sont utilisées pour le texte et les icônes qui s'affichent par-dessus les différentes surfaces.

#

Nom

Attribut de thème

1

Principale

colorPrimary

2

Variante principale

colorPrimaryVariant

3

Secondaire

colorSecondary

4

Variante secondaire

colorSecondaryVariant

5

Arrière-plan

colorBackground

6

Surface

colorSurface

7

Erreur

colorError

8

On Primary

colorOnPrimary

9

On Secondary

colorOnSecondary

10

On Background

colorOnBackground

11

On Surface

colorOnSurface

12

On Error

colorOnError

Examinez les couleurs définies dans le thème par défaut.

  1. Dans Android Studio, ouvrez themes.xml (app > res > values > topics > topics.xml).
  2. Vous remarquerez que le nom du thème Theme.TipTime est basé sur le nom de votre application.
<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
  1. Notez que la ligne XML spécifie également un thème parent, Theme.MaterialComponents.DayNight.DarkActionBar. DayNight est un thème prédéfini dans la bibliothèque Material Components. DarkActionBar signifie que la barre d'action utilise une couleur sombre. Tout comme une classe hérite d'attributs de sa classe parente, un thème hérite des attributs de son thème parent.
  1. Examinez les éléments du fichier. Vous remarquerez que les noms sont semblables à ceux du diagramme ci-dessus : colorPrimary, colorSecondary, etc.

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Certains attributs de thème de couleur ne sont pas définis. Les couleurs non définies héritent de la couleur du thème parent.

  1. Notez également qu'Android Studio affiche un petit échantillon de couleur dans la marge gauche. fe8f8c774074ca13.png
  2. Enfin, les couleurs sont spécifiées en tant que ressources de couleur, par exemple @color/purple_500, et n'utilisent pas directement une valeur RVB.
  3. Ouvrez colors.xml (app > res > values > color.xml). Les valeurs hexadécimales s'affichent pour chaque ressource de couleur. Rappelez-vous que la valeur #FF initiale correspond à la valeur alpha, ce qui signifie que la couleur est opaque à 100 %.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

4. Choisir les couleurs du thème de l'application

Maintenant que vous savez ce que sont les attributs du thème, il est temps de choisir des couleurs. Pour ce faire, le moyen le plus simple est d'utiliser l'outil Color, une application Web fournie par l'équipe Material. L'outil Color fournit une palette de couleurs prédéfinies et vous permet de les prévisualiser facilement lorsqu'ils sont utilisés par différents éléments de l'interface utilisateur.

5f36ae5de34e0078.png

Choisir des couleurs

  1. Commencez par sélectionner une couleur principale (colorPrimary), par exemple Green900. Grâce à L'outil Color, vous pouvez prévisualiser l'apparence d'une maquette d'application et sélectionner des variantes claires et sombres. 310061c674eaefb9.png
  2. Appuyez sur la section Secondary (Secondaire), puis sélectionnez la couleur secondaire (colorSecondary) qui vous convient, par exemple Light Blue 700 (Bleu clair 700). L'outil Color vous permet de visualiser la maquette de l'application, puis de sélectionner à nouveau les variantes claire et sombre.
  3. Notez que la maquette de l'application comprend six "écrans" fictifs. Appuyez sur les flèches situées au-dessus de la maquette pour afficher les couleurs proposées sur les différents écrans. 8260ceb61e8a8f2a.png
  4. L'outil Color comporte également un onglet Accessibility (Accessibilité) : il vous permet de savoir si les couleurs sont suffisamment claires pour être lisibles avec du texte en noir ou blanc. Pour améliorer l'accessibilité de votre application, vous devez veiller à ce que le contraste des couleurs soit suffisamment élevé : 4,5:1 ou plus pour les petits caractères, et 3,0:1 ou plus pour les textes plus grands. En savoir plus sur le contraste des couleurs 329af13cbd2f6efb.png
  5. Pour primaryColorVariant et secondaryColorVariant, vous pouvez choisir une variante claire ou sombre.

Ajouter les couleurs à votre application

En définissant des ressources pour les couleurs, vous facilitez la réutilisation des mêmes couleurs dans différentes parties de votre application.

  1. Dans Android Studio, ouvrez colors.xml (app > res > values > colors.xml).
  2. Après les couleurs existantes, définissez une ressource de couleur nommée green à l'aide de la valeur sélectionnée ci-dessus (#1B5E20).
<color name="green">#1B5E20</color>
  1. Continuez à définir les ressources pour les autres couleurs. La plupart d'entre elles proviennent de l'outil Color. Notez que les valeurs pour green_light et blue_light sont différentes de celles indiquées par l'outil. Vous en aurez besoin lors d'une prochaine étape.

green

#1B5E20

green_dark

#003300

green_light

#A5D6A7

blue

#0288D1

blue_dark

#005B9F

blue_light

#81D4FA

Des ressources de couleur sont déjà définies pour le noir et le blanc. Vous n'avez donc pas besoin de les définir.

Le fichier colors.xml de votre application devrait maintenant se présenter comme suit :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

Utiliser les couleurs dans votre thème

Maintenant que vous avez attribué un nom aux couleurs que vous avez sélectionnées, il est temps de les utiliser dans votre thème.

  1. Ouvrez themes.xml (app > res > values > topics > topics.xml).
  2. Remplacez colorPrimary par la couleur principale sélectionnée, @color/green.
  3. Remplacez colorPrimaryVariant par @color/green_dark.
  4. Remplacez colorSecondary par @color/blue.
  5. Remplacez colorSecondaryVariant par @color/blue_dark.
  6. Vérifiez que les options Text on P et Text on S restent "white" (blanc : #FFFFFF) et "black" (noir : #000000). Si vous utilisez l'outil Color et choisissez d'autres couleurs vous-même, vous devrez peut-être définir des ressources de couleur supplémentaires.

Lorsque vous avez terminé, le thème doit se présenter comme suit :

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- 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>
        <!-- Customize your theme here. -->
    </style>
</resources>
  1. Exécutez votre application dans l'émulateur ou sur un appareil pour voir à quoi ressemble votre application avec ce nouveau thème.

3dba45374c1594e5.png

5. Thème sombre

Le modèle d'application comprenait un thème clair par défaut et une variante de thème sombre. Un thème sombre utilise des couleurs plus sombres et plus discrètes, et présente les avantages suivants :

  • Il peut réduire considérablement la consommation d'énergie (selon la technologie d'écran de l'appareil).
  • Il améliore la visibilité pour les utilisateurs souffrant d'une déficience visuelle et ceux sensibles à la lumière vive.
  • Il permet à tous d'utiliser un appareil dans des conditions de faible luminosité.

Choisir les couleurs du thème sombre

Les couleurs d'un thème sombre doivent toujours être lisibles. Les thèmes sombres utilisent une couleur de surface sombre, et limitent les accents de couleur. Pour garantir la lisibilité, les couleurs principales sont généralement des versions moins saturées des couleurs principales du thème clair.

Pour améliorer le confort d'utilisation du thème sombre, il est recommandé d'utiliser des tons plus clairs (200-50) pour ce thème, plutôt que votre thème de couleurs par défaut (tons saturés 900-500). Précédemment, vous avez choisi les couleurs claires Green200 (vert clair) et Lightblue200 (bleu clair). Pour votre application, les couleurs claires seront principalement utilisées, et les couleurs principales feront office de variantes.

Modifier la version sombre de votre thème

  1. Ouvrez themes.xml (night). Dans le volet Project (Projet), sélectionnez Android, puis accédez à app > res > values > topics > topics.xml (night).
  1. Remplacez colorPrimary par la variante claire de la couleur principale que vous avez sélectionnée, @color/green_light.
  2. Remplacez colorPrimaryVariant par @color/green.
  3. Remplacez colorSecondary par @color/blue_light.
  4. Remplacez colorSecondaryVariant par @color/blue_light. Notez que colorSecondaryVariant peut être de la même couleur que colorSecondary.

Lorsque vous avez terminé, votre fichier themes.xml (night) doit se présenter comme suit :

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>
  1. À ce stade, les couleurs d'origine définies dans colors.xml, par exemple purple_200, ne sont plus utilisées. Vous pouvez donc les supprimer.

Essayer le thème sombre

Pour voir à quoi ressemble votre thème, activez le mode sombre sur votre appareil.

Pour l'API 28 (Android 9)

  1. Exécutez à nouveau votre application.
  2. Accédez à l'application Paramètres.
  3. Dans la section Batterie et maintenance, recherchez l'option Économie d'énergie.

5f5098d8d63acfa9.png

  1. Appuyez sur Activer maintenant.

Passez à l'étape ci-dessous.

Pour l'API 29 (Android 10) ou version ultérieure

  1. Exécutez à nouveau votre application.
  2. Accédez à l'application Paramètres.
  3. Dans la section Écran, activez le thème Sombre.

6d9dc1ab3d19f8e6.png

  1. Activez le thème sombre. L'appareil passe alors en mode Nuit.

75f134ecb7c1322a.png

Pour les API

  1. Revenez à votre application et regardez la différence.

6cc918d7c3613539.png

Le changement la plus flagrante est l'inversement des couleurs : on observe un fond sombre avec un texte clair, au lieu d'un fond clair avec un texte sombre. Par ailleurs, les couleurs des boutons sont moins vives dans le thème sombre que dans le thème clair.

Félicitations ! Vous venez de créer un thème d'application, incluant à la fois un thème clair et un thème sombre.

6. Code de solution

Cet atelier de programmation porte sur la personnalisation des couleurs du thème, mais de nombreux attributs peuvent être personnalisés, comme le texte, la forme, le style du bouton, etc. Consultez cet article pour découvrir d'autres façons de personnaliser un thème d'application. Styles Android : attributs de thème courants.

Vous trouverez ci-dessous le code de solution de cet atelier de programmation.

colors.xml (app > res > values > colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

values/themes.xml (app > res > values > topics > topics.xml)

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- 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>
        <!-- Customize your theme here. -->
    </style>
</resources>

values-night/themes.xml (app > res > values > topics > topics.xml (night))

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

7. Résumé

  • Utilisez l'outil Color de Material pour choisir les couleurs du thème de votre application.
  • Vous pouvez également utiliser le générateur de palettes Material pour sélectionner une palette de couleurs.
  • Déclarez des ressources de couleur dans le fichier colors.xml pour pouvoir les réutiliser plus facilement.
  • Le thème sombre peut réduire votre consommation d'énergie et faciliter la lecture de votre application en situation de faible luminosité.

8. En savoir plus