Introduction aux styles sous Android

Image non disponible

Dans ce tutoriel, vous allez apprendre comment personnaliser votre application Android à l'aide de styles.
Les styles vous permettent de changer l'aspect général de votre application, d'un élément (par exemple les boutons) ou d'une partie de votre application (l'apparence de tous les textes de votre application).

5 commentaires Donner une note à l'article (4.5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

1. Qu'est-ce qu'un style ?

Un style est une collection de propriétés qui spécifient le design d'une vue, d'un élément ou d'une application. Il peut spécifier différentes propriétés :

  • Padding ;
  • Margin ;
  • Hauteur ;
  • Largeur ;
  • Couleur du texte ;
  • Taille du texte ;
  • etc.

Un style se définit dans un fichier ressource XML séparé du fichier XML de votre vue. Ce fichier se nomme en général styles.xml et se situe dans le dossier values.

2. Personnaliser un bouton

Nous allons créer un projet Android qui ne se compose que d'un bouton. Voici le code correspondant à la vue :

 
Sélectionnez
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout
&#160;&#160;&#160;&#160;xmlns:android="http://schemas.android.com/apk/res/android"
&#160;&#160;&#160;&#160;android:orientation="vertical"
&#160;&#160;&#160;&#160;android:layout_width="fill_parent"
&#160;&#160;&#160;&#160;android:layout_height="fill_parent">

<Button&#160; android:layout_width="fill_parent"
&#160;&#160;&#160;&#160;android:layout_height="fill_parent"
&#160;&#160;&#160;&#160;android:text="@string/hello"/>

</LinearLayout>

Nous allons créer notre premier style, afin de personnaliser ce bouton. Voici le code correspondant à notre personnalisation :

 
Sélectionnez
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<style name="MyBtnStyle">
&#160;&#160;&#160;&#160;<item name="android:layout_width">wrap_content</item>
&#160;&#160;&#160;&#160;<item name="android:layout_height">wrap_content</item>
&#160;&#160;&#160;&#160;<item name="android:textColor">@color/textColor</item>
&#160;&#160;&#160;&#160;<item name="android:textSize">@dimen/textSize</item>
&#160;&#160;&#160;&#160;<item name="android:background">@color/btnBackground</item>
&#160;&#160;&#160;&#160;<item name="android:layout_marginTop">@dimen/layoutMarginTop</item>
&#160;&#160;&#160;&#160;<item name="android:layout_gravity">center_horizontal</item>
</style>
</resources>

Le code est assez simple, on créé un style en lui spécifiant un nom, puis on liste les différents items que l'on souhaite personnaliser dans ce style (hauteur, largeur, textColor, textSize, margin, etc.)

Vous remarquez que les différentes couleurs et les dimensions ne sont pas mentionnées explicitement mais dans des fichiers à part. Ceci est une best practice dans la programmation Android.

Nous allons créer deux fichiers dans le dossier values :

colors.xml
Sélectionnez
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
&#160;&#160;&#160;&#160;<color name="textColor">#000</color>
&#160;&#160;&#160;&#160;<color name="btnBackground">#fff</color>
</resources>
dims.xml
Sélectionnez
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
&#160;&#160;&#160;&#160;<dimen name="textSize">18dp</dimen>
&#160;&#160;&#160;&#160;<dimen name="layoutMarginTop">30dp</dimen>
</resources>

Voici le résultat obtenu :

Image non disponible

De la même manière vous pouvez personnaliser un TextView, EditText ou un Button.

3. Personnaliser le style de tous les textes

Les styles vous permettent de personnaliser par exemple tous les textes se trouvant dans votre application.

Prenons l'exemple d'une vue contenant un TextView, un EditText et Button. Nous allons personnaliser tous les textes qui composent cette vue.

 
Sélectionnez
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
&#160;&#160;&#160;&#160;android:orientation="vertical"android:layout_width="fill_parent"
&#160;&#160;&#160;&#160;android:layout_height="fill_parent">

&#160;&#160;&#160;&#160;<TextView android:layout_width="wrap_content"
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;android:layout_height="wrap_content"android:text="@string/hello"/>

&#160;&#160;&#160;&#160;<EditTextandroid:layout_width="wrap_content"
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;android:layout_height="wrap_content"android:text="@string/hello"/>

&#160;&#160;&#160;&#160;<Button android:layout_width="wrap_content"
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;android:layout_height="wrap_content"android:text="@string/hello"/>

</LinearLayout>

Voici comment définir ce nouveau style pour les textes :

 
Sélectionnez
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
&#160;&#160;&#160;&#160;<style name="GreenText"parent="@android:style/TextAppearance">
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:textColor">@color/textColor</item>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:textSize">@dimen/textSize</item>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:textStyle">italic</item>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:typeface">serif</item>
&#160;&#160;&#160;&#160;</style>
</resources>

Puis il suffit de rajouter un attribut sur les textes dont vous souhaitez changer l'apparence.

 
Sélectionnez
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
&#160;&#160;&#160;&#160;android:orientation="vertical"android:layout_width="fill_parent"
&#160;&#160;&#160;&#160;android:layout_height="fill_parent">

&#160;&#160;&#160;&#160;<TextView android:layout_width="wrap_content"android:textAppearance="@style/GreenText"
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;android:layout_height="wrap_content"android:text="@string/hello"/>

&#160;&#160;&#160;&#160;<EditText android:layout_width="wrap_content"android:textAppearance="@style/GreenText"
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;android:layout_height="wrap_content"android:text="@string/hello"/>

&#160;&#160;&#160;&#160;<Button android:layout_width="wrap_content"android:textAppearance="@style/GreenText"
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;android:layout_height="wrap_content"android:text="@string/hello"/>

</LinearLayout>
Image non disponible

Vous pouvez aussi surcharger une apparence déja existante :

 
Sélectionnez
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
&#160;&#160;&#160;&#160;<style name="GreenText"parent="@android:style/TextAppearance.Medium">
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:textColor">@color/textColor</item>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:textSize">@dimen/textSize</item>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:textStyle">italic</item>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:typeface">serif</item>
&#160;&#160;&#160;&#160;</style>
</resources>

4. Définir un style général pour votre application

Vous pouvez surcharger le style par défaut et ainsi appliquer tout un nouveau style à votre application.

Voici un petit exemple :

 
Sélectionnez
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
&#160;&#160;&#160;&#160;<style name="MyCustomTheme"parent="android:Theme.Light.NoTitleBar">
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:textColor">@color/textColor</item>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:textSize">@dimen/textSize</item>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:textStyle">italic</item>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:typeface">serif</item>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<item name="android:background">@color/background</item>
&#160;&#160;&#160;&#160;</style>
</resources>

Dans ce cas, on peut surcharger ou non un thème déja existant sur Android.
Vous pouvez rajouter le mot NoTitleBar à la fin du thème surchargé pour supprimer la TitleBar de votre application.

Une fois votre thème défini, il suffit d'ouvrir votre AndroidManifest.xml et modifier votre balise comme ci-dessous :

 
Sélectionnez
<application android:icon="@drawable/icon" android:label="@string/app_name"
&#160;&#160;&#160;&#160;android:theme="@style/MyCustomTheme">

Voici le résultat obtenu :

Image non disponible

5. Conclusion

Merci d'avoir lu ce tutoriel, en espérant qu'il vous ait facilité la compréhension du fonctionnement des styles et la personnalisation d'une application.

6. Remerciements

Je tiens à remercier tout particulièrement djibril qui a mis ce tutoriel au format Developpez.com.
Merci également à Kaera et jacques_jean d'avoir pris le temps de le relire et de le corriger.

7. Liens

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 Benbourahla Nazim. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.