Android - Styles et thèmes

UNE styleresource définit le format et recherche une interface utilisateur. Un style peut être appliqué à une vue individuelle (à partir d'un fichier de mise en page) ou à une activité ou une application entière (à partir du fichier manifeste).

Définition des styles

Un style est défini dans une ressource XML distincte du XML qui spécifie la mise en page. Ce fichier XML réside sousres/values/ répertoire de votre projet et aura <resources>comme nœud racine qui est obligatoire pour le fichier de style. Le nom du fichier XML est arbitraire, mais il doit utiliser l'extension .xml.

Vous pouvez définir plusieurs styles par fichier en utilisant <style>mais chaque style aura son nom qui identifie le style de manière unique. Les attributs de style Android sont définis à l'aide de<item> étiquette comme indiqué ci-dessous -

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="CustomFontStyle">
      <item name="android:layout_width">fill_parent</item>
      <item name="android:layout_height">wrap_content</item>
      <item name="android:capitalize">characters</item>
      <item name="android:typeface">monospace</item>
      <item name="android:textSize">12pt</item>
      <item name="android:textColor">#00FF00</item>/> 
   </style>
</resources>
La valeur de <item> peut être une chaîne de mots-clés, une couleur hexadécimale, une référence à un autre type de ressource ou une autre valeur en fonction de la propriété de style.

Utilisation des styles

Une fois votre style défini, vous pouvez l'utiliser dans votre fichier de mise en page XML en utilisant style attribut comme suit -

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

   <TextView
      android:id="@+id/text_id"
      style="@style/CustomFontStyle"
      android:text="@string/hello_world" />

</LinearLayout>

Pour comprendre le concept lié au style Android, vous pouvez consulter l' exemple de démonstration de style .

Héritage de style

Android prend en charge l'héritage de style de manière très similaire à la feuille de style en cascade dans la conception Web. Vous pouvez l'utiliser pour hériter des propriétés d'un style existant, puis définir uniquement les propriétés que vous souhaitez modifier ou ajouter.

Pour implémenter un thème personnalisé, créez ou modifiez MyAndroidApp / res / values ​​/ themes.xml et ajoutez ce qui suit -

<resources>
   ...
   <style name="MyCustomTheme" parent="android:style/Theme">
   <item name="android:textColorPrimary">#ffff0000</item>
   </style>
   ...
</resources>

Dans votre AndroidManifest.xml, appliquez le thème aux activités que vous souhaitez styliser -

<activity
   android:name="com.myapp.MyActivity"
   ...
   android:theme="@style/MyCustomTheme"
   />

Votre nouveau thème sera appliqué à votre activité et le texte est désormais rouge vif.

Application de couleurs aux attributs de thème

Votre ressource de couleur peut ensuite être appliquée à certains attributs de thème, tels que l'arrière-plan de la fenêtre et la couleur principale du texte, en ajoutant des éléments <item> à votre thème personnalisé. Ces attributs sont définis dans votre fichier styles.xml. Par exemple, pour appliquer la couleur personnalisée à l'arrière-plan de la fenêtre, ajoutez les deux éléments <item> suivants à votre thème personnalisé, défini dans le fichier MyAndroidApp / res / values ​​/ styles.xml -

<resources>
   ...
   <style name="MyCustomTheme" ...>
      <item name="android:windowBackground">@color/my_custom_color</item>
      <item name="android:colorBackgroundCacheHint">@color/my_custom_color</item>
   </style>
   ...
</resources>

Utilisation d'un neuf patch personnalisé avec des boutons

Un dessin à neuf patchs est un type d'image spécial qui peut être mis à l'échelle en largeur et en hauteur tout en conservant son intégrité visuelle. Les neuf correctifs sont le moyen le plus courant de spécifier l'apparence des boutons Android, bien que n'importe quel type pouvant être dessiné puisse être utilisé.

un bouton Sample of Nine-Patch

Étapes pour créer des boutons à neuf patchs

  • Enregistrez ce bitmap sous /res/drawable/my_nine_patch.9.png
  • Définissez un nouveau style
  • Appliquer le nouveau style de bouton à l'attribut buttonStyle de votre thème personnalisé

Define a new Style

<resources>
   ...
      <style name="MyCustomButton" parent="android:Widget.Button">
      <item name="android:background">@drawable/my_nine_patch</item>
      </style>
   ...
</resources>

Apply the theme

<resources>
   ...
      <style name="MyCustomTheme" parent=...>
         ...
         <item name="android:buttonStyle">@style/MyCustomButton</item>
      </style>
   ...
</resources>

Thèmes Android

J'espère que vous avez compris le concept de style, alors essayons maintenant de comprendre ce qu'est un Theme. Un thème n'est rien d'autre qu'un style Android appliqué à une activité ou une application entière, plutôt qu'à une vue individuelle.

Ainsi, lorsqu'un style est appliqué en tant que thème, chaque Viewdans l'activité ou l'application appliquera chaque propriété de style qu'elle prend en charge. Par exemple, vous pouvez appliquer le mêmeCustomFontStyle style comme thème pour une activité, puis tout le texte à l'intérieur Activity aura une police verte monospace.

Pour définir un thème pour toutes les activités de votre application, ouvrez le AndroidManifest.xml fichier et modifiez le <application> balise pour inclure le android:themeattribut avec le nom du style. Par exemple -

<application android:theme="@style/CustomFontStyle">

Mais si vous souhaitez qu'un thème soit appliqué à une seule activité dans votre application, ajoutez l'attribut android: theme uniquement à la balise <activity>. Par exemple -

<activity android:theme="@style/CustomFontStyle">

Il existe un certain nombre de thèmes par défaut définis par Android que vous pouvez utiliser directement ou en hériter en utilisant parent attribut comme suit -

<style name="CustomTheme" parent="android:Theme.Light">
   ...
</style>

Pour comprendre le concept lié au thème Android, vous pouvez consulter l' exemple de démonstration du thème .

Styliser la palette de couleurs

La conception de la mise en page peut être mise en œuvre en fonction de leurs couleurs basées, par exemple, la conception suivante étant conçue en fonction de leur couleur (bleu)

La mise en page ci-dessus a été conçue sur la base du fichier style.xml, qui a été placé à res/values/

<resource>
   <style name="AppTheme" parent="android:Theme.Material">	
      <item name ="android:color/primary">@color/primary</item>
      <item name ="android:color/primaryDark">@color/primary_dark</item>
      <item name ="android:colorAccent/primary">@color/accent</item>
   </style>
<resource>

Styles et thèmes par défaut

La plate-forme Android fournit une large collection de styles et de thèmes que vous pouvez utiliser dans vos applications. Vous pouvez trouver une référence de tous les styles disponibles dans leR.styleclasse. Pour utiliser les styles répertoriés ici, remplacez tous les traits de soulignement dans le nom du style par un point. Par exemple, vous pouvez appliquer le thème Theme_NoTitleBar avec "@android: style / Theme.NoTitleBar". Vous pouvez voir le code source suivant pour les styles et thèmes Android -