MaterialCheckBox

Dans ce tutoriel, vous allez découvrir comment utiliser une case à cocher avec le nouveau style material d’android.

case à cocher

Un case à cocher encore appelée checkbox représente un bouton avec deux états, sélectionné et non sélectionné.Les modifications des états d’une case à cocher n’affectent généralement pas les autres cases à cocher. Une case à cocher est un bouton carré arrondi avec une coche pour indiquer son état actuel.

Vous pouvez inclure une case à cocher dans une vue comme suit.

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

Thème material

Lorsque vous utilisez un des nouveaux thèmes material d’android ,l’instance de la classe MaterialComponentsViewInflater remplace certains widgets android par leur correspondant composants material à l’exécution .

Par exemple lorsque vous utilisez un des nouveaux thèmes material d’android , une CheckBox est remplacé par un widget MaterialCheckbox. Donc il n’ y pas de différence entre un simple widget CheckBox et un widget MaterialCheckBox lorsque vous utilisez un des nouveaux thèmes material

Style material

En utilisant un des nouveaux thèmes material ( thème de la librairie des composants material) avec un widget MaterialCheckBox, android fera correspondre les couleurs du widget CheckBox à la palette de couleur du thème de votre application.

Si vous souhaitez remplacer ce comportement, pour utiliser des ressources drawables personnalisées, définissez l’attribut useMaterialThemeColors  de la case à cocher à false comme suit.

<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:useMaterialThemeColors="false"/>

Style d’un case à cocher

Pour définir un style personnalisé pour l’ensemble des cases à cocher dans votre application procédez comme suit

<item name="checkboxStyle">@style/Widget.MaterialComponents.CompoundButton.CheckBox</item>

Par exemple, pour définir l’attribut useMaterialThemeColors précédent à false sur l’ensemble des cases à cocher dans votre application ,vous pouvez créer un style personnalisé en héritant du style de base des cases à cocher comme suit

<style name="MyMaterialCheckBox.Style" parent="Widget.MaterialComponents.CompoundButton.CheckBox">
       <item name="useMaterialThemeColors">false</item>
  </style>

Ensuite vous définissez ce style comme style de l’ensemble des cases à cocher comme suit.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        ...
        <item name="checkboxStyle">@style/MyMaterialCheckBox.Style</item>
        ...
    </style>

Nous allons utiliser dans un exemple le composant MaterialCheckBox.Pour cela:

Cliquez sur File->New->New Project dans le menu principale d’android studio. Dans la fenêtre qui s’affiche ,sélectionnez Empty Activity, cliquez ensuite sur Next. Dans la nouvelle fenêtre qui s’affiche nommez votre projet MaterialCheckBox,choisissez le langage de programmation avec lequel vous souhaitez coder puis cliquez sur Finish.

Ajouter la librairie des composants material comme dépendance

Avant d’utiliser la widget MaterialCheckBox, vous devez d’abord ajouter la librairie des composants material comme dépendance dans votre projet.Pour cela ouvrez le fichier build.gradle (Module: app) puis ajouter la dépendance suivante

implementation 'com.google.android.material:material:1.1.0-alpha10'

Faire hériter votre thèmes d’un des nouveaux thèmes material

Vous pouvez faire hériter le thème de votre application par un des nouveaux thèmes material comme suit

 <style name="AppTheme" parent="Theme.MaterialComponents.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>

Ajouter le composant MaterialCheckBox

Ouvrez le fichier res/layout/activity_main.xml puis ajoutez le contenu suivant

<?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.checkbox.MaterialCheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enregister"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Après exécution, voici le résultat que vous devez obtenir

Autres ressources

https://material.io/components/selection-controls/#checkboxes

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/checkbox/MaterialCheckBox.java

https://developer.android.com/reference/android/widget/CheckBox

Conclusion

Voila,nous sommes à la fin de ce tutoriel, j’espère que ce tutoriel vous aidera à utiliser le composant MaterialCheckbox. A bientôt pour un nouveau tutoriel.