Les styles et les thèmes sur Android vous permettent de séparer les détails de la conception de votre application de l'UI une structure et un comportement similaires aux feuilles de style de la conception Web.
Un style est un ensemble d'attributs qui spécifient l'apparence d'un seul
View Un style peut spécifier des attributs
telles que la couleur et la taille de la police,
la couleur de l'arrière-plan, etc.
Un thème est une collection d'attributs qui s'appliquent à l'ensemble d'une application, d'une activité ou d'une vue et pas seulement une vue individuelle. Lorsque vous appliquez un thème, chaque vue de l'application ou l'activité applique chacun des attributs du thème qu'il prend en charge. Les thèmes peuvent également appliquer des styles à les éléments non visibles, tels que la barre d'état et l'arrière-plan de la fenêtre.
Les styles et les thèmes sont déclarés dans une
fichier de ressources de style dans
res/values/, généralement appelé styles.xml.
Figure 1 : Deux thèmes appliqués à la même activité:
Theme.AppCompat (à gauche) et Theme.AppCompat.Light (à droite).
Thèmes et styles
Les thèmes et les styles ont de nombreuses similitudes, mais ils sont utilisés à des fins différentes. Thèmes et ont la même structure de base, autrement dit une paire clé-valeur qui mappe les attributs ressources.
Un style définit les attributs d'un type de vue particulier. Par exemple, un style peut spécifier les attributs d'un bouton. Chaque attribut spécifié dans un style est un attribut que vous pouvez définir le fichier de mise en page. Extraire tous les attributs d'un style facilite leur utilisation et leur gestion sur plusieurs widgets.
Un thème définit une collection de ressources nommées pouvant être référencées par des styles, des mises en page,
des widgets, etc. Les thèmes attribuent des noms sémantiques, comme colorPrimary, à Android
ressources.
Les styles et les thèmes sont conçus pour fonctionner ensemble. Par exemple, vous pouvez avoir un style qui spécifie
qu'une partie d'un bouton est colorPrimary et une autre partie
colorSecondary Les définitions réelles de ces couleurs sont fournies dans le thème. Quand ?
l'appareil passe en mode Nuit, l'application peut passer du mode "lumière" le thème "sombre" d'un thème,
modifier les valeurs de
tous ces noms de ressources. Vous n'avez pas besoin de modifier les styles, car le
styles utilisent les noms sémantiques et non des définitions de couleurs spécifiques.
Pour en savoir plus sur la façon dont les thèmes et les styles fonctionnent ensemble, consultez l'article de blog Styles Android: thèmes et styles.
Créer et appliquer un style
Pour créer un style, ouvrez le fichier res/values/styles.xml de votre projet. Pour
chaque style que vous souhaitez créer, procédez comme suit:
- Ajoutez un élément
<style>dont le nom identifie le style de manière unique. - Ajoutez un élément
<item>pour chaque attribut de style que vous souhaitez définir. La Dans chaque article,namespécifie un attribut que vous utilisez normalement en tant qu'attribut XML dans votre mise en page. La valeur de l'élément<item>correspond à celle de cet attribut.
Par exemple, supposons que vous définissiez le style suivant:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="GreenText" parent="TextAppearance.AppCompat">
<item name="android:textColor">#00FF00</item>
</style>
</resources>
Pour appliquer le style à une vue, procédez comme suit:
<TextView
style="@style/GreenText"
... />
Chaque attribut spécifié dans le style est appliqué à cette vue si celle-ci l'accepte. Vue ignore les attributs qu'il n'accepte pas.
<ph type="x-smartling-placeholder">Toutefois, au lieu d'appliquer un style à des vues individuelles, appliquer des styles en tant que thème à l'ensemble de votre application, de votre activité ou de votre des vues, comme décrit dans une autre section de ce guide.
Étendre et personnaliser un style
Lorsque vous créez vos propres styles, étendez toujours un style existant à partir du framework ou de l'assistance
pour assurer la compatibilité avec les styles d'UI de la plate-forme. Pour étendre un style, spécifiez
style que vous souhaitez étendre avec l'attribut parent. Vous pouvez ensuite remplacer les paramètres
attributs de style et en ajouter de nouveaux.
Par exemple, vous pouvez hériter de l'apparence du texte par défaut de la plate-forme Android et le modifier en tant que ce qui suit:
<style name="GreenText" parent="@android:style/TextAppearance">
<item name="android:textColor">#00FF00</item>
</style>
Toutefois, vous devez toujours hériter de vos styles d'application principaux à partir de la bibliothèque Android Support. Les styles
La bibliothèque Support assure la compatibilité en optimisant chaque style pour les attributs d'UI disponibles dans
chaque version. Les styles de la bibliothèque Support ont souvent un nom
similaire à celui de la plate-forme.
mais avec AppCompat.
Pour hériter des styles d'une bibliothèque ou de votre propre projet, déclarez le nom du style parent
sans la partie @android:style/ indiquée dans l'exemple précédent. Par exemple :
l'exemple suivant hérite des styles d'apparence du texte de la bibliothèque Support:
<style name="GreenText" parent="TextAppearance.AppCompat">
<item name="android:textColor">#00FF00</item>
</style>
Vous pouvez également hériter des styles (sauf ceux de la plate-forme) en étendant la propriété
avec une notation par points, au lieu d'utiliser l'attribut parent. Autrement dit, ajoutez le préfixe
nom de votre style avec le nom du style dont vous souhaitez hériter, séparés par un point. Toi
Cela ne concerne généralement que l'extension de vos propres styles, et non les styles d'autres bibliothèques. Par exemple :
Le style suivant hérite de tous les styles de GreenText dans l'exemple précédent.
puis augmente la taille du texte:
<style name="GreenText.Large">
<item name="android:textSize">22dp</item>
</style>
Vous pouvez continuer à hériter de styles comme celui-ci autant de fois que vous le souhaitez en enchaînant davantage noms.
<ph type="x-smartling-placeholder">Pour connaître les attributs que vous pouvez déclarer avec une balise <item>, consultez le document
"Attributs" dans les différentes références de classe. Toutes les vues sont acceptées
Attributs XML à partir de la base
View, et de nombreuses vues ajoutent leurs propres attributs spéciaux. Par exemple,
TextView attributs XML
inclure les
android:inputType
que vous pouvez appliquer à un affichage de texte qui reçoit des entrées, comme un
Widget EditText.
Appliquer un style en tant que thème
Vous pouvez créer un thème de la même manière que des styles. La différence réside dans la façon dont vous l'appliquez:
au lieu d'appliquer un style avec l'attribut style à une vue, vous appliquez un thème avec
l'attribut android:theme soit sur la balise <application>, soit sur une
Balise <activity> dans le fichier AndroidManifest.xml.
Par exemple, voici comment appliquer le style Material Design "dark" de la bibliothèque Android Support thème sur l'ensemble de l'application:
<manifest ... >
<application android:theme="@style/Theme.AppCompat" ... >
</application>
</manifest>
Voici comment appliquer le paramètre "light" du thème à une seule activité:
<manifest ... >
<application ... >
<activity android:theme="@style/Theme.AppCompat.Light" ... >
</activity>
</application>
</manifest>
Chaque vue de l'application ou de l'activité applique les styles compatibles par rapport à ceux définis dans un thème donné. Si une vue n'accepte que certains attributs déclarés dans le style, elle s'applique. uniquement ces attributs et ignore ceux qu'il ne prend pas en charge.
À partir d'Android 5.0 (niveau d'API 21) et de la bibliothèque Android Support version 22.1, vous pouvez également spécifier
l'attribut android:theme à une vue de votre fichier de mise en page. Cela modifie
le thème de
cette vue et toutes les vues enfants, ce qui est utile pour modifier les palettes de couleurs d'un thème
de votre interface.
Les exemples précédents montrent comment appliquer un thème tel que Theme.AppCompat
fournies par la bibliothèque Android Support. Toutefois, vous préférez généralement
personnaliser le thème pour l'adapter
la marque de votre application. Le meilleur moyen de le faire est d'étendre
ces styles depuis la bibliothèque Support
remplacer certains attributs, comme décrit dans la section suivante.
Hiérarchie des styles
Android propose plusieurs méthodes pour définir des attributs dans votre application Android. Par exemple : vous pouvez définir des attributs directement dans une mise en page, appliquer un style à une vue ou appliquer un thème à une mise en page, et même définir des attributs de manière programmatique.
Lorsque vous choisissez le style de votre application, tenez compte de la hiérarchie des styles d'Android. En général, utilisez thèmes et styles autant que possible pour assurer la cohérence. Si vous spécifiez les mêmes attributs dans plusieurs lieux, la liste suivante détermine les attributs à appliquer au final. La liste est classées par ordre décroissant de priorité.
- Appliquer un style au niveau du caractère ou du paragraphe à l'aide d'espaces de texte aux valeurs dérivées de
TextViewclasses. - Appliquer des attributs de manière programmatique.
- Appliquer des attributs individuels directement à une vue
- Application d'un style à une vue
- Style par défaut
- Appliquer un thème à une collection de vues, à une activité ou à l'ensemble de votre application
- appliquer certains styles spécifiques à la vue, comme la définition d'un
TextAppearancesur unTextView.
Figure 2. Le style d'une span remplace le style d'un
textAppearance
Apparence du texte
L'une des limites des styles est que vous ne pouvez appliquer qu'un seul style à une View. Dans un
TextView, vous pouvez aussi spécifier
Attribut TextAppearance
qui fonctionne de la même manière qu'un style, comme illustré dans l'exemple suivant:
<TextView
...
android:textAppearance="@android:style/TextAppearance.Material.Headline"
android:text="This text is styled via textAppearance!" />
TextAppearance vous permet de définir un style spécifique au texte tout en conservant le style d'un
View disponible pour d'autres utilisations. Notez toutefois que si vous définissez des attributs de texte
directement sur View ou dans un style, ces valeurs remplacent les
Valeurs TextAppearance.
TextAppearance est compatible avec un sous-ensemble d'attributs de style que TextView
. Pour obtenir la liste complète des attributs, consultez
TextAppearance
Certains attributs TextView courants ne sont pas inclus :
lineHeight[Multiplier|Extra],
lines,
breakStrategy
hyphenationFrequency
TextAppearance fonctionne au niveau des caractères et non au niveau des paragraphes.
qui affectent l'ensemble de la mise en page ne sont pas acceptés.
Personnaliser le thème par défaut
Lorsque vous créez un projet avec Android Studio, celui-ci applique un thème Material Design à votre application
par défaut, comme défini dans le fichier styles.xml de votre projet. Ce style AppTheme
étend un thème de la bibliothèque Support et inclut des forçages pour les attributs de couleur utilisés
par des éléments clés de l'interface utilisateur, comme la barre d'application et le
Bouton d'action flottant, le cas échéant Donc, vous
pouvez rapidement personnaliser les couleurs de votre application en modifiant les couleurs fournies.
Par exemple, votre fichier styles.xml se présente comme suit:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
Les valeurs de style sont en fait des références à d'autres
ressources de couleur, définies dans
le fichier res/values/colors.xml du projet. Il s'agit du fichier que vous modifiez pour changer les couleurs.
Consultez le
Présentation des couleurs de Material Design
pour améliorer l'expérience utilisateur grâce à des couleurs dynamiques et personnalisées supplémentaires.
Une fois que vous connaissez vos couleurs, mettez à jour les valeurs dans res/values/colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Color for the app bar and other primary UI elements. -->
<color name="colorPrimary">#3F51B5</color>
<!-- A darker variant of the primary color, used for
the status bar (on Android 5.0+) and contextual app bars. -->
<color name="colorPrimaryDark">#303F9F</color>
<!-- a secondary color for controls like checkboxes and text fields. -->
<color name="colorAccent">#FF4081</color>
</resources>
Vous pouvez ensuite remplacer les autres styles de votre choix. Par exemple, vous pouvez modifier l'activité comme suit:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="android:windowBackground">@color/activityBackground</item>
</style>
Pour obtenir la liste des attributs que vous pouvez utiliser dans votre thème, consultez le tableau des attributs à l'adresse
R.styleable.Theme Lors de l'ajout
des vues de votre mise en page, vous pouvez également trouver des attributs en consultant la section "Attributs XML"
dans les références de classe de la vue. Par exemple, toutes les vues
Attributs XML à partir du View de base
la classe.
La plupart des attributs sont appliqués à des types de vues spécifiques, et certains s'appliquent à toutes les vues. Toutefois,
certains attributs de thème
répertoriés dans
Les R.styleable.Theme s'appliquent
et non les vues de la mise en page. Par exemple, windowBackground modifie
l'arrière-plan de la fenêtre et windowEnterTransition définit une animation de transition à utiliser lorsque
l'activité commence. Pour en savoir plus, consultez la section Commencer
une activité à l'aide d'une animation.
La bibliothèque Android Support fournit également d'autres attributs que vous pouvez utiliser pour personnaliser votre thème
étendu à partir de Theme.AppCompat, comme l'attribut colorPrimary affiché dans
l'exemple précédent. Les annonces sont plus visibles dans la
fichier attrs.xml de la bibliothèque.
Il existe également différents thèmes disponibles dans la bibliothèque Support que vous pouvez étendre
au lieu de ceux de l'exemple précédent. Le meilleur endroit pour voir les thèmes disponibles est
la
fichier themes.xml de la bibliothèque.
Ajouter des styles spécifiques à la version
Si une nouvelle version d'Android ajoute les attributs de thème que vous souhaitez utiliser, vous pouvez les ajouter à votre thème
tout en étant compatible avec les anciennes versions. Vous n'avez besoin que d'un autre fichier styles.xml
enregistré dans un répertoire values qui inclut
version de la ressource
qualificatif:
res/values/styles.xml # themes for all versions res/values-v21/styles.xml # themes for API level 21+ only
Étant donné que les styles du fichier values/styles.xml sont disponibles pour toutes les versions,
vos thèmes dans values-v21/styles.xml peuvent en hériter. Cela signifie que vous
pouvez éviter
en dupliquant des styles en commençant par une "base" puis à l'étendre dans un environnement spécifique
.
Par exemple, pour déclarer des transitions de fenêtres sur Android 5.0 (niveau d'API 21) ou version ultérieure, vous devez :
pour utiliser de nouveaux attributs. Ainsi, votre thème de base dans res/values/styles.xml peut se présenter comme suit :
ceci:
<resources>
<!-- Base set of styles that apply to all versions. -->
<style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryTextColor</item>
<item name="colorAccent">@color/secondaryColor</item>
</style>
<!-- Declare the theme name that's actually applied in the manifest file. -->
<style name="AppTheme" parent="BaseAppTheme" />
</resources>
Ajoutez ensuite les styles spécifiques à la version dans res/values-v21/styles.xml, comme suit:
<resources>
<!-- extend the base theme to add styles available only with API level 21+ -->
<style name="AppTheme" parent="BaseAppTheme">
<item name="android:windowActivityTransitions">true</item>
<item name="android:windowEnterTransition">@android:transition/slide_right</item>
<item name="android:windowExitTransition">@android:transition/slide_left</item>
</style>
</resources>
Vous pouvez maintenant appliquer AppTheme à votre fichier manifeste et le système sélectionnera les styles
disponibles pour chaque version du système.
Pour en savoir plus sur l'utilisation d'autres ressources pour différents appareils, consultez En proposant d'autres ressources.
Personnaliser les styles de widgets
Chaque widget du framework et de la bibliothèque Support possède un style par défaut. Par exemple, lorsque vous
Appliquez un style à votre application à l'aide d'un thème de la bibliothèque Support, une instance de
Le style de Button est appliqué à l'aide de la
Style Widget.AppCompat.Button. Si vous souhaitez appliquer un style de widget différent
vous pouvez le faire avec l'attribut style dans votre fichier de mise en page. Par exemple,
ce qui suit applique le style de bouton sans bordure de la bibliothèque:
<Button
style="@style/Widget.AppCompat.Button.Borderless"
... />
Si vous souhaitez appliquer ce style à tous les boutons, vous pouvez le déclarer dans le
buttonStyle comme suit:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
...
</style>
Vous pouvez également étendre les styles de widgets, comme vous pouvez étendre n'importe quel autre style, puis appliquez votre style de widget personnalisé à votre mise en page ou à votre thème.
Ressources supplémentaires
Pour en savoir plus sur les thèmes et les styles, consultez les ressources supplémentaires suivantes:
Articles de blog
- Styles Android: thèmes et styles
- Styles Android: attributs de thème courants
- Styles Android: privilégiez les attributs de thème