Les thèmes disponible dans la librairie des composants material ajoutent plusieurs attributs aux attributs disponible dans la library de support et peuvent être utilisé pour créer :
- Un thème de couleur (une ensemble de couleur appliqué sur différent composants ou différente partie dans l’application) qui reflété ou identifie votre marque
- un thème de forme(une type ou une catégorie de forme géométrique) qui reflète ou identifie votre marque
- Une typographique qui reflète votre marque ou votre style.
Si vous n’avez pas encore lu mon tutoriel sur l’introduction au material design 2 cliquez ici
Table des matières
Le système de thème de couleur à utiliser dans votre application
Le système de thème de couleur du material design utilise une approche organisé pour vos différents interfaces utilisateur.Dans ce système deux couleurs sont utilisé pour exprimer différentes partie d’une interface utilisateur.Les composants material utilisent ces couleurs de thème et leurs variations pour appliquer un style à leurs arrière plan , texte etc..
Tous les composants material utilisent le style Widget.MaterialComponents , ces styles font référence à des attributs de couleur du thème Theme.MaterialComponents .
Il est donc facile de recolorer les attributs de votre application en modifiant simplement les attributs de couleur de votre thème. Ces attributs sont:
| Nom d’attribut | Description | Valeur par défaut |
| colorPrimary | La couleur affichée le plus souvent sur les fenêtres et les composants de votre application. | #6200EE |
| colorPrimaryVariant | Une variation tonale de la couleur primaire. | #3700B3 |
| colorOnPrimary | Une couleur qui satisfait les directives d’accessibilité pour le texte / icon lorsqu’elle est dessinée au-dessus de la couleur principale. | #FFFFFF |
| colorSecondary | La couleur de secondaire de votre marque dans l’application, généralement un complément accentué à la couleur principale. | #03DAC6 |
| colorSecondaryVariant | Une variation tonale de la couleur secondaire. | #018786 |
| colorOnSecondary | Une couleur qui satisfait les directives d’accessibilité pour le texte / icon lorsqu’elle est dessinée par-dessus la couleur secondaire. | #000000 |
En changeant ces six attributs couleurs, vous pouvez facilement changer le style de tous les composants matérial auquel est appliqué votre thème.
Le système de thème de couleur du material design fournit d’autres couleurs qui ne représente pas votre marque mais définissent votre interface utilisateur et garantissent des combinaisons de couleur d’acceptabilité. Ces attributs sont les suivants.
| Nom d’attribut | Description | Valeur par défaut |
| android:colorBackground | La couleur d’arrière-plan qui apparaît derrière le contenu déroulant. | #FFFFFF |
| colorOnBackground | Une couleur qui passe les directives d’accessibilité pour le texte / iconographie lorsqu’elle est dessinée au-dessus de la couleur d’arrière-plan. | #000000 |
| colorSurface | Les couleurs de surface affectant les surfaces des composants, telles que les cartes, les feuilles et les menus. | #FFFFFF |
| colorOnSurface | Une couleur qui passe les directives d’accessibilité pour le texte / iconographie lorsqu’elle est dessinée au-dessus de la couleur de surface. | #000000 |
| colorError | La couleur d’erreur indiquant les états d’erreur, pour les composants tels que les champs de texte | #C51162 |
| colorOnError | Une couleur qui passe les directives d’accessibilité pour le texte / iconographie lorsqu’elle est dessinée au-dessus de la couleur d’erreur. | #FFFFFF |
Pour sélectionner les couleurs primaires et secondaires et générer leurs variations , utilisez le générateur de palette du material design, ou le plugin Sketch du material design ou les palettes du material Design de 2014.
Appliquer un thème à chaque composant
Tous les composants material utilisent un style Widget.MaterialComponents, et ces styles font référence aux attributs de couleur du thème (Theme.MaterialComponents). Il est donc facile de recolorer les attributs de votre application en modifiant simplement les attributs de couleur de votre thème.
Cependant, si vous souhaitez modifier la couleur d’une seul composant sans modifier les attributs au niveau du thème, cela peut être fait en créant un nouveau style qui étend le style Widget.MaterialComponents.
Par exemple, si vous souhaitez modifier le style d’un MaterialButton pour qu’il utilise la couleur secondaire pour sa couleur d’arrière-plan plutôt que la couleur primaire, il vous suffit de définir votre propre style de bouton qui étend le style Widget.MaterialComponents.Button comme suit
<style name="Widget.MyApp.MyButton" parent="Widget.MaterialComponents.Button"> <item name="backgroundTint">?attr/colorSecondary</item> </style>
Vous pouvez maintenant appliquer ce style Widget.MyApp.MyButton à tous les boutons que vous souhaitez pour qu’il aient un style différent
Appliquer un style à tous les instances d’un composant
Si vous souhaitez changer le style de toutes les instances d’un composant donnée par exemple un MaterialButton, vous devez modifier l’attribut materialButtonStyle dans votre thème.
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light"> ... <item name="materialButtonStyle">@style/Widget.MyApp.MyButton</item> ... </style>
L’exemple précédent appliquera le style Widget.MyApp.MyButton à tous les composants MaterialButton de votre application.Il existe aussi un attribut simialire pour tous les autres composants material ex. tabStyle, chipStyle, textInputStyle
Définir des thème de formes qui reflète votre marque
La librairie de composant material propose une libraire de forme qui peut être utiliser pour créer des formes non standard à l’aide de la classe MaterialShapeDrawables, il s’agit d’un drawable qui peut dessiner des formes personnalisées tout en tenant compte des ombres, de l’élévation, de l’échelle et de la couleur.
MaterialShapeDrawable et ShapeAppearanceModel
MaterialShapeDrawable se dessine à l’aide d’un chemin (path) généré par un ShapeAppearanceModel . ShapeAppearanceModel est composé de CornerTreatments et EdgeTreatments qui se combine pour créer un chemin de forme personnalisé pour être passé au constructeur de la classe MaterialShapeDrawable.
La librairie de forme fournit des sous classes de CornerTreatment et EdgeTreatment pour créer facilement de nouvelles formes tel que:
Les classes CornerTreatment et EdgeTreatment peuvent être hérité pour créer des coins et des bords personnalisés.
Construire un thème avec la classe MaterialShapeDrawable
les composants qui supportent la classe MaterialShapeDrawable peuvent décrire votre thème par leurs formes dans votre application .
Les attributs de style dans un thème
Les attributs de style sont fournis pour être définis au niveau du thème afin de modifier les valeurs des attribut de forme que les composants lisent pour définir leurs formes.
| Nom d’attribut | Description | Valeur par défaut |
| shapeAppearanceSmallComponent | Référence de style contenant des valeurs de forme utilisées pour définir un style aux petits composants | arrondi 4dp |
| shapeAppearanceMediumComponent | Référence de style contenant des valeurs de forme utilisées pour définir un style aux composants moyens | arrondi 4dp |
| shapeAppearanceLargeComponent | Référence de style contenant des valeurs de forme utilisées pour définir un style aux grand composants | arrondi 0dp |
Construire la forme d’un composant qui décrit votre thème
Dans Android, les formes des composants sont représentés par des « shape appearances (apparences de forme)», qui sont des références de style qui définissent les aspects de la forme. ShapeAppearanceModel lit un style shapeAppearance et crée des traitements d’angle et de bord à partir des valeurs d’un shapeAppearance.
Les attributs suivant peuvent être utilisé dans un style shapeAppearance
| Nom d’attribut | Format | Description | Valeurs supportées |
| cornerFamily | enum | famille de coins à utiliser pour les quatre coins | rounded, cut |
cornerFamilyTopLeft | enum | famille de coins à utiliser pour le coin supérieur gauche | rounded, cut |
| cornerFamilyTopRight | enum | famille de coins à utiliser pour le coin supérieur droit | rounded, cut |
| cornerFamilyBottomRight | enum | famille de coins à utiliser pour le coin inférieur droit | rounded, cut |
| cornerFamilyBottomLeft | enum | famille de coins à utiliser pour le coin inférieur gauche | rounded, cut |
| cornerSize | dimension | taille de coin à utiliser pour les quatre coins | dp values |
| cornerSizeTopLeft | dimension | taille de coin à utiliser pour le coin supérieur gauche | dp values |
| cornerSizeTopRight | dimension | taille de coin à utiliser pour le coin supérieur droit | dp values |
| cornerSizeBottomRight | dimension | taille de coin à utiliser pour le coin inférieur droit | dp values |
| cornerSizeBottomLeft | dimension | taille de coin à utiliser pour le coin inférieur gauche | dp values |
Pour créer un shapeAppearance , vous avez besoin d’au moins une valeur cornerSize et cornerFamily spécifiée pour chaque coin.
Les attributs de style ShapeAppearance et shapeAppearanceOverlay
Les attributs de style shapeAppearance et shapeAppearanceOverlay sont fournis pour définir le style de forme aux composants.
| Nom d’attribut | Description |
| shapeAppearance | Référence de style contenant des valeurs de forme utilisées pour styliser le composant. Doit pointer vers une référence de style d’attribut de thème telle que ? Attr / shapeAppearanceSmallComponent. |
| shapeAppearanceOverlay | Référence de style contenant des valeurs de forme qui se superposent au-dessus d’un style de forme. Cet attribut est destiné aux remplacements des valeurs de forme de forme du thème et doit correspondre à une référence de style personnalisée plutôt qu’à une référence de style à thème. |
L’attribut shapeAppearanceOverlay est fourni pour remplacer le style de formes des composants au cas par cas.
Cet attribut se superpose les valeurs des attributs de forme de l’attribut de style shapeAppearance; le shapeAppearance est lue en premier, puis s’il y a un style de forme défini dans l’attribut shapeAppearanceOverlay, il remplace ce qui est défini dans l’attribut de style shapeAppearance .
Remarque: Lorsque que vous définissez un styles de forme avec un shapeAppearance , cornerSize et cornerFamily doivent être définis, contrairement à shapeAppearanceOverlay.
Cela signifie que, lors de la définition d’un style de forme personnalisé avec shapeAppearance , vous devez soit hériter d’un parent s’il en existe un, soit définir à la fois cornerSize et cornerFamily.
Cependant, lorsque vous définissez un style de forme à utiliser en tant que shapeAppearanceOverlay, vous devez généralement définir un parent vide en définissant le parent comme suit :parent = « ».
les valeurs des attributs de forme d’un shapeAppearanceOverlay se superpose aux valeurs des attributs de forme d’un shapeAppearance, donc toutes les valeurs doivent être définies dans un style shapeAppearance pour que le valeurs des attributs de formes d’un shapeAppearanceOverlay superpose seulement les valeurs qu’il a besoin de redéfinir.
Utiliser l’attribut de style shapeAppearance dans un thème
La librairie des composants material vous permet de définir un thème de forme pour tous les composant dans votre application en fonction de la catégorie du composant; qu’il soit petit, moyen ou grand.
Pour appliquer un thème de forme dans toute votre application,spécifiez les attributs de style dans votre thème
Supposons que vous souhaitiez modifier les coins de votre application en réduisant les coins des composants. Pour ce faire, définissez les attributs de forme du thème qui pointera vers des références de style personnalisé qui contiennent des valeurs de forme:
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light"> ... <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.MyApp.SmallComponent</item> <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.MyApp.MediumComponent</item> <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.MyApp.LargeComponent</item> ... </style>
Les attributs de style de forme d’un thème doivent pointer vers des styles shapeAppearance personnalisés qui définissent à la fois cornerSize et cornerFamily. Ces styles de forme peuvent ressembler à ceci:
<style name="ShapeAppearance.MyApp.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent"> <item name="cornerFamily">cut</item> <item name="cornerSize">4dp</item> </style> <style name="ShapeAppearance.MyApp.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent"> <item name="cornerFamily">cut</item> <item name="cornerSize">8dp</item> </style> <style name="ShapeAppearance.MyApp.LargeComponent" parent="ShapeAppearance.MaterialComponents.LargeComponent"> <item name="cornerFamily">rounded</item> <item name="cornerSize">4dp</item> </style>
Les composants material qui prennent en charge le thème de forme lisent dans les attributs de thème et applique un style en fonction des valeurs de forme du thème.
Personnalisé la forme des composants
Personnalisé la forme des composants dans tout le thème
Vous pouvez modifier la forme d’un composant dans l’ensemble de l’application en remplaçant le composant et en définissant un shapeAppearanceOverlay .
Supposons que vous voulez modifier un MaterialCardView pour qu’il utilise des coins arrondis de 16dp dans l’ensemble de l’application. Tout ce que vous avez à faire est de définir votre propre style de CardView qui étend un style de widget et de définir les attributs appropriés sur les attributs de forme du thème souhaités:
<style name="Widget.MyApp.MaterialCardView" parent="Widget.MaterialComponents.MaterialCardView"> <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.MaterialCardView</item> </style>
Puis définissez un ShapeAppearanceOverlay.MyApp.MaterialCardView comme suit
<style name="ShapeAppearanceOverlay.MyApp.MaterialCardView" parent=""> <item name="cornerFamily">rounded</item> <item name="cornerSize">16dp</item> </style>
Définissez ensuite un style personnalisé pour les MaterialCardView comme suit
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light"> ... <item name="materialCardViewStyle">@style/Widget.MyApp.MaterialCardView</item> ... </style>
Toutes les CardView de votre application devraient maintenant avoir des coins arrondis de 16dp.
Personnalisé la forme des composants de manière individuel
Vous pouvez également modifier la forme d’un composant individuel au cas par cas. Disons que les Cardview de votre thème ont des coins arrondis de 16dp, mais il y a une CardView qui devrait avoir des coins coupés de 16dp. Pour modifier le cornerFamily de cet Cardview , vous pouvez définir l’attribut de style shapeAppearanceOverlay sur le Cardview dans votre vue .
Définissez un style shapeAppearanceOverlay personnalisé avec uniquement l’attribut de forme que vous souhaitez superposer au-dessus du shapeAppearance existant:
<style name="ShapeAppearanceOverlay.MyApp.MaterialCardView.Cut" parent=""> <item name="cornerFamily">cut</item> </style>
Ensuite, définissez dans l’attribut shapeAppearanceOverlay du Cardview à ce style ShapeAppearanceOverlay dans votre vue:
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/mtrl_card_spacing"
android:layout_marginTop="@dimen/mtrl_card_spacing"
android:layout_marginRight="@dimen/mtrl_card_spacing"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.MaterialCardView.Cut">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/card_text"/>
</com.google.android.material.card.MaterialCardView>
La CardView devrait maintenant avoir des coins coupés de 16dp.
Les composant supportés
La liste suivante répertorie les composants material qui prennent en charge le thème de forme.
Les composants qui prennent en charge le thème de forme ont un attribut shapeAppearance, un attribut shapeAppearanceOverlay et sont soutenus par un MaterialShapeDrawable
La typographie dans un thème
Le material Design permet d’appliquer des typographies dans votre thème qui peut être utilisé pour créer des styles typographiques qui reflètent votre marque ou votre style en définissant différent taille qui seront utilisées dans votre application.
Les composants material utilisent ces taille de texte pour appliquer une apparence de texte différente.
| Nom d’attribut | style par défaut |
|---|---|
textAppearanceHeadline1 | Light 96sp |
textAppearanceHeadline2 | Light 60sp |
textAppearanceHeadline3 | Regular 48sp |
textAppearanceHeadline4 | Regular 34sp |
textAppearanceHeadline5 | Regular 24sp |
textAppearanceHeadline6 | Regular 20sp |
textAppearanceSubtitle1 | Regular 16sp |
textAppearanceSubtitle2 | Medium 14sp |
textAppearanceBody1 | Regular 16sp |
textAppearanceBody2 | Regular 14sp |
textAppearanceCaption | Regular 12sp |
textAppearanceButton | Medium all caps 14sp |
textAppearanceOverline | Medium all caps 12sp |
Les valeurs de tyle
Les valeurs de style de texte sont une combinaison des éléments suivants:
- Nom de la police
- eépaisseur de la police
- Taille de la police
- L’espacement des lettres
- Transformation de texte ( tous en majuscules)
Personnalisation
Vous pouvez changer l’apparence de n’importe quel style de texte en créant un nouveau style et en le définissant dans votre thème comme suit
<style name="TextAppearance.MyApp.Headline1" parent="TextAppearance.MaterialComponents.Headline1"> ... <item name="fontFamily">@font/custom_font</item> <item name="android:textStyle">normal</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">64sp</item> <item name="android:letterSpacing">0</item> ... </style>
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light"> ... <item name="textAppearanceHeadline1">@style/TextAppearance.MyApp.Headline1</item> ... </style>
Remarque: AppCompat doit être utilisé pour gérer la compatibilité descendante pour le sdk <16. Si vous n’avez pas besoin de prendre en charge les appareils <16 et que vous n’utilisez pas AppCompat, vous devez définir android: fontFamily au lieu de fontFamily ou app: fontFamily.
Conclusion
Voila, nous somme à la fin de ce tutoriel sur les thème avec les composant material. J’espère que ce tutoriel vous aidera.A bientôt pour un nouveau tutoriel.
Noe Joel Vigan, auteur de ce blog, est passionné par la programmation Android. Il a créé ce blog pour partager ses connaissances sur le développement d’application android. Il est Développeur Android Fullstack, ce qui lui permet de complètement mettre en place le Backend de ses applications sur Google Cloud à défaut d’utiliser FireBase.