Utiliser les thèmes et les styles

Les « styles » permettent de transformer des éléments structurés (HTML, XML) simples et pas forcément très lisibles en une version formatée et affichable. On pense bien entendu aux « Cascading Style Sheet » (CSS) du langage HTML (SGML) qui remontent aux années 1980.

Le style permet donc de définir un certain nombre d'attributs (cosmétiques ou non) qui seront les valeurs par défaut des éléments auxquels le style est appliqué.

L'intérêt est double : d'une part permettre d'automatiquement fournir des attributs cosmétiques à des éléments, mais surtout de maintenir, à un seul endroit, ce qu'on appelle le « Look'n Feel », c'est-à-dire la marque visuelle du site (ou de l'application).

I-B-1. Petit rappel sur les ressources▲

I-B-2. Utilisation des Styles▲

<LinearLayout>
	<TextView id='id1' android:style='@style/MyStyle'/>
	<TextView id='id2'/>
</LinearLayout>

I-B-3. Définir son propre style▲

<resource>
	<color name="light_grey">#e6eced</color>    
	<style name="MyStyle">
		<item name="android:background">@color/light_grey</item>
	</style>
</resource>

I-B-4. Définition en Cascade▲

<resource>
	<style name="Layout">
		<item name="android:background">@color/light_grey</item>
		<item name="android:padding">5sp</item>
	</style>
	<style name="Layout.Bar">
		<item name="android:background">@color/dark_grey</item>
	</style>
<resource>

<resource>
	<style name="MyButton" parent="@android:style/Widget.Button">
		<item name="android:background">@drawable/yellow_button</item>
		<item name="android:textAppearance">@style/TextAppearance.Label</item>
		<item name="android:textColor">@color/red</item>
		<item name="android:minWidth">80dp</item>
	</style>
</resource>

I-B-5. Que peut-on « styliser » ?▲

I-B-6. Le cas particulier de textAppearance▲

Normalement, à ce point, vous devriez pouvoir assigner un style à vos éléments d'interface, et ainsi vous éviter de modifier tous vos éléments quand vous décidez de changer la fonte de votre application.

Un thème n'est rien de plus qu'une liste de valeurs d'attributs (un peu comme les styles au demeurant). La liste de ces attributs (de thème) est accessible dans android.R.attr. Mais nous verrons plus loin qu'on peut y rajouter des attributs propres à l'application.

Pour des raisons de simplicité (mais pas forcément de lisibilité et/ou compréhension), Google a décidé de représenter les thèmes comme des ressources de type « style » qui doivent avoir comme parent le style « Theme » d'une manière ou d'une autre (directement ou non donc). Ainsi, si vous déclarez un style « Toto » dont le parent est Theme.Holo.Dark, vous aurez déclaré un thème !

Chaque activité reçoit un thème unique. Si une activité n'a pas de thème spécifique, le thème est celui par défaut de l'application.

Ce thème est utilisé pendant la construction de l'interface (inflater, setContentView) pour récupérer certains attributs par défaut (y compris le style). Ceci est aussi vrai pour les « layouts » système. Plutôt que de définir votre propre R.layout. list_item pour utiliser vos attributs cosmétiques, vous pourrez utiliser celui d'Android (android.R.layout.single_list_item), qui sera customisé en fonction du thème !

Les valeurs des attributs du thème sont accessibles depuis tout fichier XML par l'utilisation de  « ?attr/nom_de_lattribut » ou « ?android:attr/nom_de_lattribut » s'il est natif à Android.

Ainsi,

<LinearLayout>
	<TextView id='id1' android :textAppearance=' ?android:attr/textAppearanceSmall'/>
</LinearLayout>

va indiquer que l'attribut « textAppearanceSmall » du thème en cours doit être utilisé. Dans le cas d'un thème « Holo.Dark », le texte sera blanc, dans le cas de « Holo.Light », il sera donc noir.

Il y a bien sûr de fortes chances pour que la valeur de cet attribut soit simplement « @android:style/TextAppearance.Small  ». 

Comme nous l'avons vu, les thèmes sont définis exactement comme les styles. Mais pour vous aider à vous y retrouver, je vous conseille vivement de séparer vos fichiers de thème et vos fichiers de styles.

II-B-1. Surcharger un thème existant▲

<resource>
	<style name="MyTheme" parent="@android:style/Theme.Holo.Light">
		<item name="android:colorBackground">@color/light_grey</item>
		<item name="android:colorBackgroundCacheHint">@color/light_grey</item>
	</style>
</resource>

II-B-2. Surcharger les styles par défaut▲

<resource>
	<style name="MyButton" parent="@android:style/Widget.Button">
		<item name="android:background">@drawable/MyButton</item>
	</style>
</resource>

<resource>
	<style name="MyTheme" parent="@android:style/Theme.Holo">
		<item name="android:buttonStyle">@style/MyButton</item>
	</style>
</resource>

II-B-3. Créer ses propres attributs▲

<resource>
	<attr name="generalMargin" format="reference|dimension"/>
	<style name="MyTheme" parent="@android:style/Theme.Holo">
		<item name="generalMargin">5sp</item>
	</style>
</resource>

<resource>
	<style name="MyButton" parent="@android:style/Widget.Button">
		<item name="android:padding">?attr/generalMargin</item>
	</style>
</resource>

Bien entendu, l'éditeur d'interface d'Eclipse vous permet de choisir le thème pour afficher tel ou tel layout, mais il vous faudra éditer le 'manifest' (là où est déclarée votre activité) pour lui attribuer un thème. C'est d'ailleurs comme cela qu'on fait une véritable boite de dialogue.

Bien entendu, si l'ensemble de votre application n'utilise qu'un seul thème, libre à vous de l'utiliser comme thème par défaut au niveau de l'application.

Il est possible de modifier le thème depuis Java, en utilisant la ressource ad hoc R.style.MyTheme : setTheme() dans l'activité. À noter que le thème ne modifie pas l'UI en cours, il faut donc reconstruire la vue, et appeler la fonction avant le setContentView. C'est la seule méthode pour proposer plusieurs thèmes à l'utilisateur dans la même application.

Prenons un exemple, j'ai une activité qui peut s'afficher sous forme de dialogue ('PICK'), ou 'normalement' ('VIEW').

J'ai donc deux thèmes : « MyTheme » qui hérite de « @android :style/Theme.Holo » et « MyTheme.Dialog » qui hérite de « @android :style/Theme.Holo.Dialog ». Il suffit dans mon activité que j'écrive :

@Override
public void onCreate(Bundle savedInstanceState)
{
	super.onCreate(savedInstanceState); // <= toujours en premier
	boolean isDialogCall = getIntent().getName().equals(Intent.ACTION_PICK);    
	setTheme(isDialogCall ? R.style.MyTheme.Dialog : R.style.MyTheme);
	setContentView(R.layout.my_layout); // <= maintenant on peut créer les views
}

À noter qu'il n'est pas nécessaire d'avoir surchargé le thème pour le faire, on aurait très bien pu utiliser android.R.style.Holo_Dark et android.R.style.Holo_Dark_Dialog par exemple.

Créer le thème dans un fichier « themes.xml » :

Le contenu est simple :

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="ThemeTest" parent="@android:style/Theme.Holo">
	</style>
</resources>

Une fois le fichier enregistré, vous pourrez voir le thème apparaitre dans l'éditeur de layouts, mais avant, nous allons modifier le 'manifest' de notre application pour que l'activité utilise ce thème par défaut.

Nous allons donc rajouter l'attribut suivant dans la déclaration de l'activité :

android:theme="@style/ThemeTest"

Pour l'instant, rien n'a changé, puisque nous héritons simplement de 'Theme.Holo'.

Ici, nous allons commencer par modifier le 'background', et la couleur du texte.

Pour le background, déjà, première complication, il nous faut passer par un nom de couleur. Qu'à cela ne tienne, on définit une ressource de type « color » (dans le même fichier), et on y fait référence avec @color/le_nom_de_la_couleur.

Il en est de même pour la couleur du texte.

Voici le fichier themes.xml après modification et le résultat :

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<color name="dark_green">#002000</color>
	<color name="yellow">#ffff00</color>
	<style name="ThemeTest" parent="@android:style/Theme.Holo">        
		<item name="android:background">@color/dark_green</item>        
		<item name="android:textColor">@color/yellow</item>
	</style>
</resources>

Premiers constats : la couleur du fond a bien été changée partout, mais la couleur de texte n'a été appliquée que sur les TextViews ! Voici pourquoi.

Si on regarde le style Widget.Holo.Button (le style par défaut des boutons), celui-ci fait directement référence à une couleur : @android:color/primary_text_holo_dark, qui est en fait un sélecteur de couleur (un peu comme un sélecteur de background) dont je vous mets le code ici :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_enabled="false" android:color="@android:color/bright_foreground_disabled_holo_dark"/>
	<item android:state_window_focused="false" android:color="@android:color/bright_foreground_holo_dark"/>
	<item android:state_pressed="true" android:color="@android:color/bright_foreground_holo_dark"/>
	<item android:state_selected="true" android:color="@android:color/bright_foreground_holo_dark"/>
	<item android:state_activated="true" android:color="@android:color/bright_foreground_holo_dark"/>
	<item android:color="@android:color/bright_foreground_holo_dark"/>
	<!-- not selected -->
</selector>

Ce qui veut dire, qu'en fonction de l'état du bouton, la couleur ne sera pas la même, et que le style du bouton va définir en dur la couleur du texte !

Il va donc falloir que nous surchargions, les styles de boutons. Pour les faire pointer sur notre couleur.

On commence par créer le style de bouton  (on va en profiter pour faire de même avec les CheckBoxes et radio-buttons). Voici donc le nouveau fichier de thème :

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<color name="dark_green">#002000</color>
	<color name="yellow">#ffff00</color>
	<style name="Widget.ThemeTest.Button" parent="@android:style/Widget.Holo.Button">
		<item name="android:textColor">?android:attr/textColor</item>
	</style>
	<style name="Widget.ThemeTest.Button.Small" parent="@android:style/Widget.Holo.Button.Small">
		<item name="android:textColor">?android:attr/textColor</item>
	</style>
	<style name="Widget.ThemeTest.Button.Toggle" parent="@android:style/Widget.Holo.Button.Toggle">
		<item name="android:textColor">?android:attr/textColor</item>
	</style>
	<style name="Widget.ThemeTest.CompoundButton.CheckBox" parent="@android:style/Widget.Holo.CompoundButton.CheckBox">
		<item name="android:textColor">?android:attr/textColor</item>
	</style>
	<style name="Widget.ThemeTest.CompoundButton.RadioButton" parent="@android:style/Widget.Holo.CompoundButton.RadioButton">
		<item name="android:textColor">?android:attr/textColor</item>
	</style>
	<style name="ThemeTest" parent="@android:style/Theme.Holo">
		<item name="android:background">@color/dark_green</item>
		<item name="android:textColor">@color/yellow</item>
		<item name="android:buttonStyle">@style/Widget.ThemeTest.Button</item>
		<item name="android:buttonStyleSmall">@style/Widget.ThemeTest.Button.Small</item>
		<item name="android:buttonStyleToggle">@style/Widget.ThemeTest.Button.Toggle</item>
		<item name="android:checkboxStyle">@style/Widget.ThemeTest.CompoundButton.CheckBox</item>
		<item name="android:radioButtonStyle">@style/Widget.ThemeTest.CompoundButton.RadioButton</item>
	</style>
</resources>

Et le résultat :

Finalement, nous avons bien la bonne couleur partout, et il suffit de la changer dans le thème (textColor) !

On pourrait dire : tant de code que ça dans les thèmes et styles, juste pour changer les couleurs ? Oui sans doute, pour une seule fenêtre dans une application de test, il vaut probablement mieux utiliser les attributs de style directement. Mais si vous avez une dizaine de layouts, et que vous utilisez ceux du système (ListView ?), le passage par le thème devient bien vite nécessaire (et vous évite de réinventer la roue dans bien des cas).