♪
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 :
<?xmlversion="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, afin de personnaliser ce bouton. Voici le code correspondant à notre personnalisation :
<?xmlversion="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ée 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 :
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<color name="textColor">#000</color>
<color name="btnBackground">#fff</color>
</resources><?xmlversion="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.
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.
<?xmlversion="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"/>
<EditTextandroid: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 :
<?xmlversion="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.
<?xmlversion="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éjà existante :
<?xmlversion="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>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 :
<?xmlversion="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 peut surcharger ou non un thème déjà 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 :
<application android:icon="@drawable/icon" android:label="@string/app_name"
android:theme="@style/MyCustomTheme">Voici le résultat obtenu :
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.