• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 04/05/2018

Ajoutez des thèmes visuels

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce chapitre, nous allons nous intéresser plus particulièrement à la notion de thème et en ajouter plusieurs à notre mini-application Wonder.

Pour rappel, un thème est un type de style qui s'applique à une application entière, une activité ou un groupe de vues, et pas uniquement à une vue de manière individuelle. Quand vous définissez un style en tant que thème, chaque vue de votre application ou de votre activité appliquera les attributs de styles que vous aurez défini dans celui-ci.

Les styles et les thèmes sont déclarés dans le fichier de ressources  /res/values/styles.xml. Actuellement, pour notre mini-application Wonder, ce fichier devrait ressembler à cela :

Fichier styles.xml :

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Explications : Nous avons ici un thème généré automatiquement et déclaré grâce aux balises  </style> , appelé AppTheme et héritant du style parent  Theme.AppCompat.Light.DarkActionBar  grâce à l'attribut  parent .

Ce thème re-définit actuellement les couleurs du thème parent en utilisant les couleurs présentes dans le fichier  colors.xml. Ces couleurs seront ensuite utilisées par notre application à travers la Toolbar, les différents composants graphiques, etc... afin de leur donner une apparence uniforme.

Couleurs actuelles
Couleurs actuelles

D'ailleurs, vous pouvez également visualiser le rendu de ces couleurs avec le module "Theme Editor" présent sur Android Studio. Pour cela, depuis l'écran affichant votre fichier  styles.xml, cliquez sur "Open Editor". La vue suivante devrait apparaître :

L'éditeur de thème sous Android Studio
L'éditeur de thème sous Android Studio

Cet éditeur est assez pratique et peut vous faire gagner beaucoup de temps dans la création et la modification des thèmes de votre application. La prise en main de cette interface étant très simple et accessible, nous ne l'expliquerons pas plus... ;)

Ainsi dans un premier temps, nous allons modifier les couleurs de notre mini-application Wonder afin de lui donner une apparence un peu plus sympa.

Aperçu de l'outil
Aperçu de l'outil "Color Tool"

Modifiez ainsi le fichier  colors.xml  de votre application Android pour y ajouter les couleurs suivantes :

Fichier colors.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- APP BASE -->
    <color name="colorPrimary">#333333</color>
    <color name="colorPrimaryDark">#292929</color>
    <color name="colorAccent">#69F0AE</color>

    <!-- BACKGROUND -->
    <color name="background_light">#fafafa</color>
    <color name="background_gray">#eeeeee</color>
    
    <!-- TEXTVIEW -->
    <color name="text_normal_dark">#8a000000</color>

    <!-- BUTTON -->
    <color name="button_favorite">#F06292</color>

</resources>

Explications : Nous avons simplement modifié notre fichier  colors.xml  afin de lui renseigner des nouvelles couleurs que nous utiliserons par la suite dans notre application.

Puis, nous allons créer différents thèmes afin d'appliquer un style unique et différent à chacune de nos activités.

Fichier styles.xml :

<!-- | THEMES | -->

    <!-- Base application theme -->
    <style name="Wonder" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!-- Home Screen Theme -->
    <style name="Wonder.Home">
        <item name="android:windowBackground">@color/background_light</item>
    </style>

    <!-- Detail Screen Theme -->
    <style name="Wonder.Detail">
        <item name="android:windowBackground">@color/background_gray</item>
    </style>

Explications : Nous avons renommé notre thème  AppTheme  en  Wonder  afin que cela soit plus "parlant". Puis, nous avons créé deux thèmes  Wonder.Home  et  Wonder.Detail , qui auront pour rôle de définir une apparence par défaut pour les activités MainActivity ainsi que DetailActivity, et plus particulièrement leur couleur de fond.

Vous remarquez l'annotation avec le "point"  .  ? En fait, ce point est l'équivalent de l'attribut  parent  et nous permet de gérer l'héritage de styles plus rapidement. Ainsi, le thème  Wonder.Home  héritera du thème Wonder , etc...

Maintenant, dirigeons-nous vers le manifeste de l'application afin d'appliquer les différents styles que nous venons de créer.

Extrait du fichier AndroidManifest.xml : 

<?xml version="1.0" encoding="utf-8"?>
<manifest
    ... >

    ...

    <application
        ...
        android:theme="@style/Wonder">

        <!-- MAIN ACTIVITY -->
        <activity
            ...
            android:theme="@style/Wonder.Home">
            ...
        </activity>

        <!-- DETAIL ACTIVITY -->
        <activity
            ...
            android:theme="@style/Wonder.Detail"/>

    </application>

</manifest>

Explications : Comme vous pouvez le voir, nous attribuons, à travers le manifeste de notre application, les différents thèmes que nous avons créés grâce à l'attribut  android:theme. C'est aussi simple que cela... :) 

Vous remarquez également que l'on définit un thème global (Wonder) pour notre application ainsi que des thèmes enfants (Wonder.Home et Wonder.Detail) plus spécifiques pour chacune de nos activités.

Exécutez votre application, le résultat suivant devrait s'afficher.

Résultat obtenu
Résultat obtenu 

La couleur de la Toolbar a changé ainsi que la couleur de barre de statut. La couleur de fond de nos deux activités est également différente. Bon je l'avoue, rien de bien exotique pour le moment ! Le design est une affaire de précision et de petites touches, patience... :p

Exemple de certificat de réussite
Exemple de certificat de réussite