Le composant MaterialButton est un bouton personnalisable avec différent styles visuel. Ce composant bouton a plusieurs styles intégrés pour prendre en charge différents niveaux d’accentuation pour répondre à différent cas d’utilisation.
Si c’est votre premier tuto sur les composants material,je vous recommande de lire ce tutoriel et celui-ci.
Table des matières
Ajouter la dépendance de la librairie des composant material
Vous devez d’abord ajouter la librairie des composants material comme dépendance dans votre projet dans le fichier build.gradle(app) de votre projet comme suit
..... ..... implementation 'com.google.android.material:material:1.1.0-alpha10' ..... .....
Ensuite vous devez faire hériter votre thème d’un thème de la librairie des composant material comme suit
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
Usage du composant MaterialButton
Le composant MaterialButton fourni une implémentation complète d’un composant bouton material .Voici un exemple du composant MaterialButton
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" android:layout_height="wrap_content" />
Pour les boutons remplis(avec arrière plan coloré), la couleur colorPrimary de votre thème est utilisé comme couleur d’arrière-plan par défaut du composant et la couleur du texte est la couleur définit dans la propriété colorOnPrimary de votre thème.
Style d’un composant MaterialButton
La librairie des composants fournit plusieurs styles de bouton que vous pouvez utiliser dans votre application.
Bouton rempli et surélevé (style par défaut)
Il s’agit du style par défaut représentant un bouton surélevé avec un arrière-plan coloré.Vous devez constater que lorsque vous cliquez sur ce bouton,il est légèrement surélevé. Si aucun attribut de style n’est spécifié pour un MaterialButton, c’est le style qui sera utilisé.
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" style="@style/Widget.MaterialComponents.Button" android:layout_height="wrap_content" />
Bouton rempli(avec arrière plan coloré) et Non surélevé
Ce style de bouton n’est pas surélevé lorsqu’il est cliqué
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" style="@style/Widget.MaterialComponents.Button.UnelevatedButton" android:layout_height="wrap_content" />
Bouton avec contour
Le style OutlinedButton a un fond transparent avec du texte en couleur et une fine bordure autour du bouton.
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" style="@style/Widget.MaterialComponents.Button.OutlinedButton" android:layout_height="wrap_content" />
Bouton texte
Le style TextButton a un fond transparent avec du texte en couleur.
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" style="@style/Widget.MaterialComponents.Button.TextButton" android:layout_height="wrap_content" />
Bouton avec icon
Tous les style du composant MaterialButton ont un style qui se termine par .Icon.
- Widget.MaterialComponents.Button.Icon
- Widget.MaterialComponents.Button.TextButton.Icon
- Widget.MaterialComponents.Button.OutlinedButton.Icon
- Widget.MaterialComponents.Button.UnelevatedButton.Icon
Ce style est destiné à être utilisé lorsque l’attribut icon du bouton est défini et que l’attribut iconGravity est défini à start.
Remarque:Le style .Icon ne doit être utilisé que pour les boutons d’icône avec gravité à start.
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:icon="@drawable/call" style="@style/Widget.MaterialComponents.Button.Icon" app:iconGravity="start" android:layout_height="wrap_content" />
Vous pouvez définir un bouton avec icon uniquement
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:icon="@drawable/call" style="@style/Widget.MaterialComponents.Button.OutlinedButton" android:layout_height="wrap_content" />
Voici d’autres attributs du composant MaterialButton que vous pouvez changez
Description | Attributs essentiels |
---|---|
marge interne du bouton | android:padding android:paddingLeft android:paddingRight android:paddingStart android:paddingEnd android:paddingTop android:paddingBottom |
Ces 4 attributs créent un rectangle sur l’écran qui entoure le bouton pour déterminer la zone ou le bouton peut être placé.Ces valeurs sont différentes des marges internes(padding) et externes(margin). Voir l’image suivante pour voir à quoi cela ressemble | android:insetLeft android:insetRight android:insetTop android:insetBottom |
Couleur d’arrière plan | app:backgroundTint app:backgroundTintMode |
attribut pour manipuler l’icon | app:icon app:iconSize app:iconGravity |
Marge interne entre l’icon et le texte du bouton | app:iconPadding |
La couleur de l’icon | app:iconTint app:iconTintMode |
Contour | app:strokeColor app:strokeWidth |
Le rayon des quatre coins du bouton | app:cornerRadius |
Ripple | app:rippleColor |
Inset du composant materialbutton
Vous devez voir le rectangle gris qui entour le bouton .
Voici le fichier xml correspondant
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" android:insetTop="10dp" android:id="@+id/btn" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" android:insetBottom="20dp" android:layout_height="wrap_content" /> <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" android:insetTop="10dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/btn" android:insetBottom="20dp" android:layout_height="wrap_content" /> </androidx.constraintlayout.widget.ConstraintLayout>
marge Interne(padding)
Comme pour un bouton normal , vous pouvez changer les marges internes d’un composant bouton.
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" android:paddingLeft="2dp" android:paddingRight="2dp" style="@style/Widget.MaterialComponents.Button" android:layout_height="wrap_content" />
Couleur d’arrière plan
Vous pouvez changer la couleur d’arrière plan avec les attributs app:backgroundTint
app:backgroundTintMode
. Voir l’exemple suivant
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" android:paddingLeft="2dp" android:backgroundTint="@color/colorAccent" android:paddingRight="2dp" style="@style/Widget.MaterialComponents.Button" android:layout_height="wrap_content" />
Espace entre l’icon et le texte du bouton
Vous pouvez changer l’espace entre l’icon et le texte du composant avec l’attribut app:iconPadding .Voir l’exemple
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" android:paddingLeft="2dp" app:icon="@drawable/call" app:iconGravity="start" android:backgroundTint="@color/colorAccent" android:paddingRight="2dp" app:iconPadding="5dp" style="@style/Widget.MaterialComponents.Button.Icon" android:layout_height="wrap_content" />
Changer la taille de l’icon
Vous pouvez changer la taille de l’icon avec la propriété app:iconSize .Voir l’exemple
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" android:paddingLeft="2dp" app:icon="@drawable/call" app:iconGravity="start" android:backgroundTint="@color/colorAccent" android:paddingRight="2dp" app:iconPadding="5dp" app:iconSize="30dp" style="@style/Widget.MaterialComponents.Button.Icon" android:layout_height="wrap_content" />
Changer la gravité de l’icon
Vous pouvez aussi changer la gravité de l’icon avec l’attribut app:iconGravity. Cet attribut peu prendre comme valeur start,end ,textStart ,textEnd .Voir l’exemple
app:iconGravity= »start »
<com.google.android.material.button.MaterialButton android:layout_width="0dp" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" android:paddingLeft="2dp" app:icon="@drawable/call" app:iconGravity="start" android:backgroundTint="@color/colorAccent" android:paddingRight="2dp" app:iconPadding="5dp" app:iconSize="30dp" style="@style/Widget.MaterialComponents.Button.Icon" android:layout_height="wrap_content" />
app:iconGravity= »end »
<com.google.android.material.button.MaterialButton android:layout_width="0dp" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" android:paddingLeft="2dp" app:icon="@drawable/call" app:iconGravity="end" android:backgroundTint="@color/colorAccent" android:paddingRight="2dp" app:iconPadding="5dp" app:iconSize="30dp" style="@style/Widget.MaterialComponents.Button" android:layout_height="wrap_content" />
app:iconGravity= »textEnd »
<com.google.android.material.button.MaterialButton android:layout_width="0dp" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" android:paddingLeft="2dp" app:icon="@drawable/call" app:iconGravity="textEnd" android:backgroundTint="@color/colorAccent" android:paddingRight="2dp" app:iconPadding="5dp" app:iconSize="30dp" style="@style/Widget.MaterialComponents.Button" android:layout_height="wrap_content" />
La couleur de l’icon
Vous pouvez changer la couleur de l’icon avec les attributs app:iconTint ou app:iconTintMode .voir l’exemple
<com.google.android.material.button.MaterialButton android:layout_width="0dp" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" android:paddingLeft="2dp" app:icon="@drawable/call" app:iconTint="@color/colorPrimary" app:iconGravity="textEnd" android:backgroundTint="@color/colorAccent" android:paddingRight="2dp" app:iconPadding="5dp" app:iconSize="30dp" style="@style/Widget.MaterialComponents.Button" android:layout_height="wrap_content" />
Les contours
Vous pouvez changer la couleur et l’épaisseur des contours du boutons avec les attributs app:strokeColor
et app:strokeWidth
.Voir l’exemple
<com.google.android.material.button.MaterialButton android:layout_width="0dp" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" android:paddingLeft="2dp" app:icon="@drawable/call" app:iconTint="@color/colorPrimary" app:iconGravity="textEnd" app:iconSize="30dp" app:strokeColor="@color/colorPrimary" app:strokeWidth="4dp" style="@style/Widget.MaterialComponents.Button.OutlinedButton" android:layout_height="wrap_content" />
L’effet ripple lors du clic
Vous pouvez changer la couleur de l’effet ripple avec l’attribut app:rippleColor. Voir l’image
<com.google.android.material.button.MaterialButton android:layout_width="0dp" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:rippleColor="@color/colorAccent" style="@style/Widget.MaterialComponents.Button.OutlinedButton" android:layout_height="wrap_content" />
Le rayons des coins
Vous pouvez changer les coins du composant avec l’attribut app:cornerRadius. Voir l’exemple
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:cornerRadius="20dp" style="@style/Widget.MaterialComponents.Button.OutlinedButton" android:layout_height="wrap_content" />
Vous pouvez aussi personnaliser les coins avec un ShapeApperance comme suit
<style name="MyWidget.MaterialComponent.Button" parent="Widget.MaterialComponents.Button.OutlinedButton"> <item name="shapeAppearance">@style/MyShapeAppearance</item> </style> <style name="MyShapeAppearance"> <item name="cornerFamilyTopLeft">cut</item> <item name="cornerFamilyBottomLeft">cut</item> <item name="cornerFamilyTopRight">cut</item> <item name="cornerFamilyBottomRight">cut</item> <item name="cornerSize">8dp</item> </style>
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Clic Moi" android:id="@+id/btn" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" style="@style/MyWidget.MaterialComponent.Button" android:layout_height="wrap_content" />
La valeur par défaut des attribut de thème de chaque style de bouton
Bouton rempli
style= »@style/Widget.MaterialComponents.Button » (default)
style= »@style/Widget.MaterialComponents.Button.Icon »
style= »@style/Widget.MaterialComponents.Button.UnelevatedButton »
style= »@style/Widget.MaterialComponents.Button.UnelevatedButton.Icon »
Attributs de composant | Valeur par défaut des attributs de thème |
---|---|
android:textAppearance | textAppearanceButton |
android:textColor | colorOnPrimary |
iconTint | colorOnPrimary |
rippleColor | colorOnPrimary at 32% opacity (pressed) |
backgroundTint | colorPrimary |
Bouton avec contour
style= »@style/Widget.MaterialComponents.Button.OutlinedButton »
style= »@style/Widget.MaterialComponents.Button.OutlinedButton.Icon »
Attributs des composants | Valeur par défaut des attributs de thème |
---|---|
android:textAppearance | textAppearanceButton |
android:textColor | colorPrimary |
iconTint | colorPrimary |
rippleColor | colorPrimary at 16% opacity (pressed) |
strokeColor | colorOnSurface at 12% opacity |
backgroundTint | Transparent |
Bouton de style texte
style= »@style/Widget.MaterialComponents.Button.TextButton »
style= »@style/Widget.MaterialComponents.Button.TextButton.Icon »
Attributs des composants | Valeur par défaut des attributs de thème |
---|---|
android:textAppearance | textAppearanceButton |
android:textColor | colorPrimary |
iconTint | colorPrimary |
rippleColor | colorPrimary at 12% opacity (pressed) |
backgroundTint | Transparent |
Autres Ressources
https://material.io/go/design-buttons
https://developer.android.com/reference/com/google/android/material/button/MaterialButton
Conclusion
Voila, nous sommes à la fin de ce tutoriel sur le composant MaterialButton. J’espère que ce tutoriel vous aidera à utiliser ce composant dans votre application.
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.