• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 04/05/2018

Appliquez des styles à vos vues

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

Maintenant que nous avons créé différents thèmes pour notre application et nos activités, nous allons dans ce chapitre nous intéresser à la création de styles.

Euh... c'est quoi déjà un style ? :honte:

Un style est une collection d'attributs qui définit l'apparence d'une vue. Contrairement à un thème qui s'applique de manière générale, un style sera généralement utilisé pour personnaliser un seul et même type de vue.

Trêve de blabla et passons au code ! Nous allons créer différents styles dans le but de personnaliser les composants graphiques suivants :  TextView  et  Button. En effet, nous souhaiterions définir automatiquement l'apparence des textes et des boutons que nous créons dans notre mini-application Wonder.

Ainsi, nous allons dans un premier temps créer le fichier qui sera responsable de la centralisation des dimensions utilisées à travers notre application Android :  dimens.xml.

Fichier res/values/dimens.xml :

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

    <dimen name="text_title">22sp</dimen>
    <dimen name="padding_normal">8dip</dimen>
    <dimen name="margin_small">2dip</dimen>
    <dimen name="margin_huge">56dip</dimen>

</resources>

Explications : A l'intérieur de ce fichier nouvellement créé, nous allons ajouter différentes dimensions que nous utiliserons pour ajouter des marges et du rembourrage à notre application. Nous ajoutons également une taille de titre qui nous servira pour les  TextView  que nous souhaiterions définir comme titre. 

Modifions maintenant notre fichier  styles.xml  afin d'y ajouter des styles personnalisant nos textes et boutons.

Extrait du fichier styles.xml :

<resources>
    ...

    <!-- | STYLES | -->

    <!-- TEXT VIEW -->
    <style name="WonderText" parent="@style/TextAppearance.AppCompat">
        <item name="android:padding">@dimen/padding_normal</item>
        <item name="android:textColor">@color/text_normal_dark</item>
    </style>

    <style name="WonderText.Title">
        <item name="android:textSize">@dimen/text_title</item>
    </style>

    <!-- BUTTON -->
    <style name="WonderButton" parent="Widget.AppCompat.Button.Colored">
        <item name="android:textColor">@color/background_light</item>
        <item name="colorButtonNormal">@color/colorAccent</item>
    </style>

</resources>

Explications : Nous avons ici déclaré un style principal pour les TextView de notre application que nous avons appelé WonderText et qui hérite du style parent TextAppearance.AppCompat d'Android. Nous lui avons défini un rembourrage ainsi qu'une couleur pour son texte.

Nous avons également créé un second style pour nos TextView, héritant de  WonderText, que nous avons appelé  WonderText.Title  et qui possèdera une taille de 22sp.

Et enfin, nous avons créé un style pour nos boutons afin de modifier leur apparence, que nous avons appelé  WonderButton  et qui hérite de  Widget.AppCompat.Button.Colored.

Comme nous souhaitons appliquer ces styles automatiquement à toutes nos vues Button et TextView, nous allons les combiner... avec notre thème principal ! :-°

Extrait de styles.xml :

<resources>

    <!-- | THEMES | -->

    <!-- Base application theme -->
    <style name="Wonder" parent="Theme.AppCompat.Light.DarkActionBar">
        
        ...
        
        <item name="android:textViewStyle">@style/WonderText</item>
        <item name="android:buttonStyle">@style/WonderButton</item>
    </style>

    ...

</resources>

Explications : En ajoutant les attributs  android:textViewStyle  et  android:buttonStyle  à notre thème principal, nous pouvons appliquer automatiquement les deux styles que nous avons précédemment créé à l'ensemble des TextView et Button de notre application. Pratique non ? :)

Pour terminer, nous allons définir notre nouveau style  WonderText.Title  au TextView de l'écran  FragmentDetail  affichant le titre d'un projet "Design" que l'utilisateur aura choisi. 

Extrait de fragment_detail.xml :

<LinearLayout
    android:id="@+id/fragment_detail_root_view"
    ... >

    <LinearLayout
        ... >
        
        ...

        <LinearLayout
            android:id="@+id/fragment_detail_layout_detail"
            ... >

            <TextView
                android:id="@+id/fragment_detail_title"
                ...
                style="@style/WonderText.Title"/>

            ...

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Explications : Comme vous pouvez le voir, nous appliquons un style à une vue (ici un TextView) grâce à l'attribut  style  suivi du nom de notre style. Rien de plus simple ! :)

Pensons également à modifier certains layouts de notre interface graphique afin de retirer les valeurs XML qui ne sont plus nécessaires, comme les marges ou tailles de texte écrites en dur, en les remplaçant directement par les identifiants des dimensions de notre fichier  dimens.xml.

Fichier fragment_detail.xml :

<LinearLayout
    android:id="@+id/fragment_detail_root_view"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.openclassrooms.wonder.controllers.activities.DetailActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/fragment_detail_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.5"
            android:scaleType="centerCrop"/>

        <LinearLayout
            android:id="@+id/fragment_detail_layout_detail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_weight="0.5">

            <TextView
                android:id="@+id/fragment_detail_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginRight="@dimen/margin_huge"
                style="@style/WonderText.Title"/>

            <TextView
                android:id="@+id/fragment_detail_description"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxLines="3"
                android:layout_weight="1"
                android:ellipsize="end"/>

            <TextView
                android:id="@+id/fragment_detail_views"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>

            <TextView
                android:id="@+id/fragment_detail_likes"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>

            <TextView
                android:id="@+id/fragment_detail_comments"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/fragment_detail_share"
                android:layout_gravity="bottom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Share"/>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Explications : Nous avons retiré pour chacun des TextViews la propriété android:textSize  et  android: padding  car ces derniers sont déjà définis dans notre thème  Wonder  ainsi que le style  WonderText.

Fichier fragment_main_item.xml :

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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/margin_small"
    android:layout_marginTop="@dimen/margin_small"
    android:layout_marginRight="@dimen/margin_small">

    <ImageView
        android:id="@+id/fragment_main_item_image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop"/>

</LinearLayout>

Explications : Nous avons simplement remplacé la valeur 2dip pour la marge du LinearLayout par la même valeur se trouvant dans notre fichier de dimensions  dimens.xml. On centralise, on centralise ! :D

Et voilà ! Lancez maintenant votre application.

Résultat obtenu
Résultat obtenu

Le design de notre application commence à prendre forme petit à petit, et on remarque que les styles que nous avons créés sont bien pris en compte. Top ! :)

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