Le Tutoriel de Android Chip et ChipGroup

View more Tutorials:

1- Chip

Chip  est un nouveau composant introduit dans Android à partir du SDK 28, qui est essentiellement un composant d'interface composé d'un symbol (icon) ​​​​​​​et de texte, placé dans un arrière-plan rectangulaire avec des coins arrondis.
Pour pouvoir utiliser l'objet Chip dans le projet, vous devez l'installer.
Une fois l'installation terminée, une bibliothèque comprenant Chip sera déclarée dans le fichier build.gradle (Module app).
implementation 'com.google.android.material:material:1.1.0'
 
Code XML d'une  Chip simple:
Chip Sample
<!-- IMPORTANT: android:theme is required -->

<com.google.android.material.chip.Chip
    android:id="@+id/chip1"
    style="@style/Widget.MaterialComponents.Chip.Action"

    android:theme="@style/Theme.MaterialComponents.Light"

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Chip Action" />

theme attribute

Attribut android:theme est requis pour une Chip, sans cet attribut, votre application entière ne fonctionnera pas sans préavis, j'ai été surpris à cause de cela dans le premier d'Utilisation  Chip.

  • android:theme="@style/Theme.MaterialComponents"
  • android:theme="@style/Theme.MaterialComponents.Light"
  • android:theme="@style/Theme.MaterialComponents.***"

style attribute:

L'attribut style a 4 valeurs, il vous aide à spécifier le type de la Chip:
  • @style/Widget.MaterialComponents.Chip.Action (Default)
  • @style/Widget.MaterialComponents.Chip.Entry
  • @style/Widget.MaterialComponents.Chip.Choice
  • @style/Widget.MaterialComponents.Chip.Filter

Style Default

L'attribut style est facultatif, sa valeur par défaut est "@style/Widget.MaterialComponents.Chip.Action".
Chip Default Sample
<?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.chip.Chip
        android:id="@+id/chip1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="50dp"
        android:text="Chip Default"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Default + (Checkable)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip1" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Default + (Checkable, Close Icon Visible)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:closeIconVisible="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip2" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="32dp"
        android:checkable="true"
        android:text="Chip Default + (Icon)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip3" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Default + (Icon, Checkable)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip4" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Default + (Icon, Checkable, Close Icon Visible)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:closeIconVisible="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip5" />

</androidx.constraintlayout.widget.ConstraintLayout>

style="@style/Widget.MaterialComponents.Chip.Action"

Il s'agit de la valeur par défaut du style.

style="@style/Widget.MaterialComponents.Chip.Entry"

Chip Entry = Chip Default + Close Icon + Checkable
Chip Entry Sample
<?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.chip.Chip
        android:id="@+id/chip1"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="50dp"
        android:text="Chip Entry"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip2"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Entry + (Checkable)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip1" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip3"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Entry + (Checkable, Close Icon Visible)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:closeIconVisible="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip2" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip4"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="32dp"
        android:checkable="true"
        android:text="Chip Entry + (Icon)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip3" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip5"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Entry + (Icon, Checkable)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip4" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip6"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Entry + (Icon, Checkable, Close Icon Visible)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:closeIconVisible="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip5" />

</androidx.constraintlayout.widget.ConstraintLayout>

style="@style/Widget.MaterialComponents.Chip.Choice"

Caractéristiques de Chip Choice:
  • Lorsque Chip Choice est sélectionné (selected), sa couleur d'arrière-plan est plus sombre.
  • ​​​​​​​Il n'y a pas d'icône de check sur la gauche, même si vous définissez checkable = true.
  • Icon - Ne s'affiche pas même si vous en définissez la valeur.
Chip Choice Sample
<?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.chip.Chip
        android:id="@+id/chip1"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="50dp"
        android:text="Chip Choice"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip2"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Choice + (Checkable)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip1" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip3"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Choice + (Checkable, Close Icon Visible)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:closeIconVisible="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip2" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip4"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="32dp"
        android:checkable="true"
        android:text="Chip Choice + (Icon)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip3" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip5"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Choice + (Icon, Checkable)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip4" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip6"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Choice + (Icon, Checkable, Close Icon Visible)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:closeIconVisible="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip5" />

</androidx.constraintlayout.widget.ConstraintLayout>

style="@style/Widget.MaterialComponents.Chip.Filter"

Caractéristiques du  Chip Filter
  • Chip Filter = Chip Default + Checkable
  • Icon - Ne s'affichera pas même si vous lui avez défini une valeur.
Chip Filter Sample
<?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.chip.Chip
        android:id="@+id/chip1"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="50dp"
        android:text="Chip Filter"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip2"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Filter + (Checkable)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip1" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip3"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Filter + (Checkable, Close Icon Visible)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:closeIconVisible="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip2" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip4"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="32dp"
        android:checkable="true"
        android:text="Chip Filter + (Icon)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip3" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip5"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Filter + (Icon, Checkable)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip4" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip6"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="Chip Filter + (Icon, Checkable, Close Icon Visible)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:chipIcon="@drawable/my_icon"
        app:closeIconVisible="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip5" />

</androidx.constraintlayout.widget.ConstraintLayout>

2- Chip Theme

Attribut android:theme est requis pour une Chip.Votre application peut ne pas fonctionner si la Chip ne possède pas cette propriété ou si vous lui définissez une valeur non valide.
Les valeurs possibles sont:
  • android:theme="@style/Theme.MaterialComponents.Light"
  • android:theme="@style/Theme.MaterialComponents.Bridge"
  • android:theme="@style/Theme.MaterialComponents.DayNight"
  • .....
android:theme="@style/Theme.MaterialComponents.Light"
android:theme="@style/Theme.MaterialComponents.Bridge"

3- Chip Listener

Il existe de nombreux événements liés à Chip, mais il existe essentiellement 3 événements courants:
  1. chip.setOnClickListener(View.OnClickListener)
  2. chip.setOnCloseIconClickListener(View.OnClickListener)
  3. chip.setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener)
main_activity.xml
<?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.chip.Chip
        android:id="@+id/chip_action"
        style="@style/Widget.MaterialComponents.Chip.Action"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:clickable="true"
        android:text="Chip Action"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip_choice"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Chip Choice"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip_action" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip_filter"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Chip Filter"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip_choice" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip_entry"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Chip Entry"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip_filter" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip_custom"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:checkable="true"
        android:text="Chip Default + (Checkable, Close Icon Visible)"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:closeIconVisible="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip_entry" />

    <Button
        android:id="@+id/button_clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Clear Log"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chip_custom" />

    <EditText
        android:id="@+id/editText_log"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:background="#F8EFEF"
        android:ems="10"
        android:gravity="top|left"
        android:inputType="textMultiLine"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button_clear" />

</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.androidchipdemo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.EditText;

import com.google.android.material.chip.Chip;

public class MainActivity extends AppCompatActivity  {

    private Chip chipAction;
    private Chip chipChoice;
    private Chip chipEntry;
    private Chip chipFilter;
    private Chip chipCustom;

    private EditText editTextLog;
    private Button buttonClear;

    private View.OnClickListener clickListener;
    private View.OnClickListener closeIconClickListener;
    private CompoundButton.OnCheckedChangeListener checkedChangeListener;

    private static final String LOG_TAG = "AndroidChipDemo";


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.chipAction = (Chip) this.findViewById(R.id.chip_action);
        this.chipChoice = (Chip) this.findViewById(R.id.chip_choice);
        this.chipEntry = (Chip) this.findViewById(R.id.chip_entry);
        this.chipFilter = (Chip) this.findViewById(R.id.chip_filter);
        this.chipCustom = (Chip) this.findViewById(R.id.chip_custom);
        this.editTextLog = (EditText) this.findViewById(R.id.editText_log);
        this.buttonClear = (Button) this.findViewById(R.id.button_clear);

        //

        this.clickListener= new ClickListenerImpl();
        this.closeIconClickListener = new CloseIconClickListenerImpl();
        this.checkedChangeListener = new CheckedChangeListenerImpl();

        //
        this.chipAction.setOnClickListener( clickListener);
        this.chipAction.setOnCloseIconClickListener(closeIconClickListener);
        this.chipAction.setOnCheckedChangeListener(checkedChangeListener);
        //
        this.chipChoice.setOnClickListener( clickListener);
        this.chipChoice.setOnCloseIconClickListener(closeIconClickListener);
        this.chipChoice.setOnCheckedChangeListener(checkedChangeListener);
        //
        this.chipEntry.setOnClickListener( clickListener);
        this.chipEntry.setOnCloseIconClickListener(closeIconClickListener);
        this.chipEntry.setOnCheckedChangeListener(checkedChangeListener);
        //
        this.chipFilter.setOnClickListener( clickListener);
        this.chipFilter.setOnCloseIconClickListener(closeIconClickListener);
        this.chipFilter.setOnCheckedChangeListener(checkedChangeListener);
        //
        this.chipCustom.setOnClickListener( clickListener);
        this.chipCustom.setOnCloseIconClickListener(closeIconClickListener);
        this.chipCustom.setOnCheckedChangeListener(checkedChangeListener);
        //
        this.buttonClear.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                editTextLog.setText("");
            }
        });
    }

    private void appendLog(String text)  {
        this.editTextLog.append(text) ;
        this.editTextLog.append("\n");
        Log.i(LOG_TAG, text);
    }

    class  ClickListenerImpl implements View.OnClickListener {

        @Override
        public void onClick(View v) {
            appendLog("Clicked");
        }
    }


    class CloseIconClickListenerImpl implements View.OnClickListener {

        @Override
        public void onClick(View v) {
            appendLog("Close Icon Clicked");
        }
    }

    class CheckedChangeListenerImpl implements  CompoundButton.OnCheckedChangeListener {

        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            appendLog("Checked Changed! isChecked? " + isChecked);
        }
    }
}

 

4- ChipGroup

ChipGroup est utilisé pour contenir de nombreux Chip. Par défaut, les Chips seront triées sur plusieurs lignes si une seule ligne ne peut pas contenir toutes les Chips.
Cependant, vous pouvez le configurer pour vous assurer que les Chips seront placées sur une seule ligne.
<com.google.android.material.chip.ChipGroup
   app:singleLine="true"  
   ...>
   
</com.google.android.material.chip.ChipGroup>
ChipGroup peut également agir comme un RadioGroup, ce qui signifie que si l'une de ses Chips est définie sur checked, toutes ses autres Chips seront unchecked.
<com.google.android.material.chip.ChipGroup
   app:singleSelection="true"
   ...>
   
</com.google.android.material.chip.ChipGroup>

5- L'exemple avec Chip et ChipGroup

Voici quelques exemples de Chip & ChipGroup qui pourraient vous intéresser:

View more Tutorials: