Introduction aux styles sous Android

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).

Qu’est ce qu’un style ?

Un style est une collection de propriétés qui spécifie 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éfini 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.

Personnaliser un bouton

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

1 2 3 4 5 6 7 8 9 10 11 12

<?xml version="1.0" encoding="utf-8"?> <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent">   <Button  android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:text="@string/hello" />   </LinearLayout>

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

1 2 3 4 5 6 7 8 9 10 11 12

<?xml version="1.0" encoding="utf-8"?> <resources> <style name="MyBtnStyle">     <item name="android:layout_width">wrap_content</item>     <item name="android:layout_height">wrap_content</item>     <item name="android:textColor">@color/textColor</item>     <item name="android:textSize">@dimen/textSize</item>     <item name="android:background">@color/btnBackground</item>     <item name="android:layout_marginTop">@dimen/layoutMarginTop</item>     <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 qu’on souhaite personnaliser dans ce style (hauter, largeur, textColor, textSize, margin etc…)

Vous remarquez que les différentes couleurs et les dimensions 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

1 2 3 4 5

<?xml version="1.0" encoding="utf-8"?> <resources>     <color name="textColor">#000</color>     <color name="btnBackground">#fff</color> </resources>

dims.xml

1 2 3 4 5

<?xml version="1.0" encoding="utf-8"?> <resources>     <dimen name="textSize">18dp</dimen>     <dimen name="layoutMarginTop">30dp</dimen> </resources>

Voici le résultat obtenu :

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

Personnaliser le style de tout les textes

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

Prenons l’exemple d’une vue content un TextView, un EditText et Button.Nous allons personnaliser tout les textes qui composent cette vue.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical" android:layout_width="fill_parent"     android:layout_height="fill_parent">       <TextView android:layout_width="wrap_content"         android:layout_height="wrap_content" android:text="@string/hello" />       <EditText android:layout_width="wrap_content"         android:layout_height="wrap_content" android:text="@string/hello" />       <Button android:layout_width="wrap_content"         android:layout_height="wrap_content" android:text="@string/hello" />   </LinearLayout>

Voici comment définir ce nouveau style pour les textes

1 2 3 4 5 6 7 8 9

<?xml version="1.0" encoding="utf-8"?> <resources>     <style name="GreenText" parent="@android:style/TextAppearance">         <item name="android:textColor">@color/textColor</item>         <item name="android:textSize">@dimen/textSize</item>         <item name="android:textStyle">italic</item>         <item name="android:typeface">serif</item>     </style> </resources>

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical" android:layout_width="fill_parent"     android:layout_height="fill_parent">       <TextView android:layout_width="wrap_content" android:textAppearance="@style/GreenText"         android:layout_height="wrap_content" android:text="@string/hello" />       <EditText android:layout_width="wrap_content" android:textAppearance="@style/GreenText"         android:layout_height="wrap_content" android:text="@string/hello" />       <Button android:layout_width="wrap_content" android:textAppearance="@style/GreenText"         android:layout_height="wrap_content" android:text="@string/hello" />   </LinearLayout>

Vous pouvez aussi surcharger une apparence déja existante :

1 2 3 4 5 6 7 8 9

<?xml version="1.0" encoding="utf-8"?> <resources>     <style name="GreenText" parent="@android:style/TextAppearance.Medium">         <item name="android:textColor">@color/textColor</item>         <item name="android:textSize">@dimen/textSize</item>         <item name="android:textStyle">italic</item>         <item name="android:typeface">serif</item>     </style> </resources>

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 :

1 2 3 4 5 6 7 8 9 10

<?xml version="1.0" encoding="utf-8"?> <resources>     <style name="MyCustomTheme" parent="android:Theme.Light.NoTitleBar">         <item name="android:textColor">@color/textColor</item>         <item name="android:textSize">@dimen/textSize</item>         <item name="android:textStyle">italic</item>         <item name="android:typeface">serif</item>         <item name="android:background">@color/background</item>     </style> </resources>

Dans ce cas, on peux 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 çi-dessous :

1 2	<application android:icon="@drawable/icon" android:label="@string/app_name"     android:theme="@style/MyCustomTheme">

Voici le résultat obtenu :

Conclusion

Voici ce tutoriel se fini ici, en espérant qu’il vous a aidez à comprendre comment fonctionne les styles et comment personnaliser votre application.