Material Button


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

DescriptionAttributs essentiels
marge interne du boutonandroid: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’iconapp:icon
app:iconSize
app:iconGravity
Marge interne entre l’icon et le texte du boutonapp:iconPadding
La couleur de l’iconapp:iconTint
app:iconTintMode
Contourapp:strokeColor
app:strokeWidth
Le rayon des quatre coins du boutonapp:cornerRadius
Rippleapp: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 composantValeur par défaut des attributs de thème
android:textAppearancetextAppearanceButton
android:textColorcolorOnPrimary
iconTintcolorOnPrimary
rippleColorcolorOnPrimary at 32% opacity (pressed)
backgroundTintcolorPrimary

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:textAppearancetextAppearanceButton
android:textColorcolorPrimary
iconTintcolorPrimary
rippleColorcolorPrimary at 16% opacity (pressed)
strokeColorcolorOnSurface at 12% opacity
backgroundTintTransparent

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:textAppearancetextAppearanceButton
android:textColorcolorPrimary
iconTintcolorPrimary
rippleColorcolorPrimary at 12% opacity (pressed)
backgroundTintTransparent

Autres Ressources

https://material.io/go/design-buttons

https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java

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.


Laisser un commentaire

Résoudre : *
5 × 22 =


%d