Material design 2:Intégrer le widget Chip dans votre application Android(Kotlin/Java)

Partage

Dans ce tutoriel, vous allez découvrir un autre composant de la librairie des composants material appelé Chip.Il s’agit d’un widget texte qui s’affiche avec un arrière plan arrondi , plus son icon qui peut être optionnelle et enfin une icon de suppression permettant de le supprimer .Vous pouvez encore voir se composant comme un bouton arrondi.Il peux être cochable et placer dans groupe.

Il est généralement utilisé pour filtrer un ensemble d’information , pour représenter un choix de l’utilisateur ou pour représenter une catégorie d’information.

A présent nous allons voir comment l’utiliser dans une application android.

Créer un nouveau projet

Créez un nouveau projet dans android studio en cliquant sur File dans le menu principale d’android studio puis sur New->New Project.Dans la fenêtre qui s’affiche sélectionnez Empty Activity puis cliquez sur Next .Dans la nouvelle fenêtre qui apparaît, nommez le projet WidgetChip, choisissez le langage de programmation avec lequel vous souhaitez travailler puis cliquez sur Finish.

Ajouter la librairie des composants material comme dépendance

Comme nous l’avons dit précédemment, le widget Chip est disponible dans la librairie des composants material. Avant de pouvoir l’utiliser, vous devez ajouter la librairie des composants material comme dépendance dans votre projet.Pour cela ouvrez le fichier build.gradle(Module:app) de votre projet puis ajoutez la dépendance suivante.

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

Usage basic

Le widget Chip fournit une implémentation complète d’un composant Chip du material design. Des styles, des attributs pour facilement l’adapter au thème de votre application. Vous pouvez ajouter un widget Chip comme suit

<com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str_chip1"/>

Vous pouvez aussi l’ajouter depuis le code en kotlin ou en java comme suit.

 val chip:Chip=Chip(this)
    chip.text=getText(R.string.str_chip1)
    chip.chipIcon=ContextCompat.getDrawable(this,R.drawable.ic_person)

 Chip chip=new Chip(this);
        chip.setText(getText(R.string.str_chip1));
        chip.setChipIcon(ContextCompat.getDrawable(this,R.drawable.ic_person));

Les attributs d’un widget Chip

Le widget Chip dispose de plusieurs attributs pour facilement le personnaliser et l’adapter au thème de votre application.Nous allons découvrir quelque attributs que vous pouvez utiliser pour personnalisé ce widget.

Attributs	Description
android:text	Le texte du widget Chip
`android:textAppearance`:	Permet de définir l’apparence du texte du widget Chip
app:chipCornerRadius	Définir la forme ou le rayon des coins arrondis
app:chipBackgroundColor	Définir la couleur d’arrière plan du widget
app:chipStrokeColor	La couleur des contours
app:chipStrokeWidth	L’épaisseur des contours
app:rippleColor	La couleur de l’effet ripple
app:chipIconVisible	La visibilité de l’icon du widget
app:chipIcon	Permet de définir l’icon
app:chipIconTint	Permet de définir la couleur de l’icon
app:chipIconSize	Permet définir la taille de l’icon
app:closeIconVisible	Définir la visibilité de l’icon de suppression
app:closeIcon	Permet de définir l’icon
app:closeIconSize	Permet de définir la taille de l’icon de suppression
app:closeIconTint	Définir la couleur de l’icon de suppression
android:checkable	Si le widget peut être coché ou pas
app:checkedIconVisible	Si l’icon du widget sera visible lorsque le widget sera coché
app:checkedIcon	L’icon du widget lorsqu’il est coché
`app:chipStartPadding` `app:iconStartPadding` `app:iconEndPadding` `app:textStartPadding` `app:textEndPadding` `app:closeIconStartPadding` `app:closeIconEndPadding` `app:chipEndPadding`	Définir les marges internes gauches et droites du widget, de l’icon du widget, du texte du widget, de l’icon de suppression du widget

Voici quelques exemples d’utilisations des attributs d’un widget Chip.

app:chipCornerRadius

 <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipCornerRadius="10dp"
            android:text="@string/str_chip1"/>

app:chipBackgroundColor

 <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipBackgroundColor="@color/colorPrimary"
            android:textColor="@android:color/white"
            android:text="@string/str_chip1"/>

app:chipStrokeWidth

 <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipStrokeWidth="2dp"
            android:text="@string/str_chip1"/>

app:chipStrokeColor

  <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipStrokeWidth="2dp"
            app:chipStrokeColor="@color/colorAccent"
            android:text="@string/str_chip1"/>

app:rippleColor

 <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:rippleColor="@color/colorAccent"
            android:text="@string/str_chip1"/>

app:chipIconVisible et app:chipIcon

ic_person.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,12c2.21,0 4,-1.79 4,-4s-1.79,-4 -4,-4 -4,1.79 -4,4 1.79,4 4,4zM12,14c-2.67,0 -8,1.34 -8,4v2h16v-2c0,-2.66 -5.33,-4 -8,-4z"/>
</vector>

  <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIconVisible="true"
            app:chipIcon="@drawable/ic_person"
            android:text="@string/str_chip1"/>

app:chipIconTint

<com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIconVisible="true"
            app:chipIconTint="@color/colorAccent"
            app:chipIcon="@drawable/ic_person"
            android:text="@string/str_chip1"/>

app:chipIconSize

<com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIconVisible="true"
            app:chipIconTint="@color/colorAccent"
            app:chipIconSize="15dp"
            app:chipIcon="@drawable/ic_person"
            android:text="@string/str_chip1"/>

app:closeIconVisible

 <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIconVisible="true"
            app:chipIconTint="@color/colorAccent"
            app:chipIcon="@drawable/ic_person"

            app:closeIconVisible="true"
            android:text="@string/str_chip1"/>

app:closeIcon

ic_close.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>
</vector>

  <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIconVisible="true"
            app:chipIconTint="@color/colorAccent"
            app:chipIcon="@drawable/ic_person"
            app:closeIconVisible="true"
            app:closeIcon="@drawable/ic_close"
            android:text="@string/str_chip1"/>

app:closeIconSize

 <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIconVisible="true"
            app:chipIconTint="@color/colorAccent"
            app:chipIcon="@drawable/ic_person"
            app:closeIconVisible="true"
            app:closeIcon="@drawable/ic_close"
            app:closeIconSize="15dp"
            android:text="@string/str_chip1"/>

app:closeIconTint

  <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIconVisible="true"
            app:chipIconTint="@color/colorAccent"
            app:chipIcon="@drawable/ic_person"
            app:closeIconVisible="true"
            app:closeIcon="@drawable/ic_close"
            app:closeIconTint="@color/colorAccent"
            android:text="@string/str_chip1"/>

android:checkable

 <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:text="@string/str_chip1"/>

app:checkedIcon

checked_icon.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M14,10L2,10v2h12v-2zM14,6L2,6v2h12L14,6zM2,16h8v-2L2,14v2zM21.5,11.5L23,13l-6.99,7 -4.51,-4.5L13,14l3.01,3 5.49,-5.5z"/>
</vector>

  <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            app:checkedIcon="@drawable/checked_icon"
            android:text="@string/str_chip1"/>

app:checkedIconVisible

 <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            app:checkedIconVisible="false"
            android:text="@string/str_chip1"/>

Les types de widget Chip et le style material

Utilisé le widget Chip avec l’un des nouveaux thèmes material commençant par Theme.MaterialComponents fournira au widget Chip le nouveau style material d’un widget Chip .

Si vous souhaitez quand même avoir le nouveau style material pour les widgets Chip dans votre application et que votre application n’hérite pas d’un des nouveaux thème material commençant par Theme.MaterialComponents , vous pouvez appliquer le nouveau style material directement au widget dans votre application.

Chaque style du widget Chip définit une valeurs par défaut aux attributs et un certains comportements au widget Chip

La nouvelle version du material design fournit quatre style que vous pouvez utiliser dans différents cas d’utilisation.

Entry Chip:Widget.MaterialComponents.Chip.Entry

Avec ce style, le widget Chip peut avoir une icon optionnelle, une autre icon pour se supprimer et peut être optionnellement cochable .Il peut être utilisé dans un widget comme un editText pour faire plusieurs sélections

Voici un exemple d’utilisation du widget Chip avec ce style

<com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIcon="@drawable/ic_person"
            android:text="@string/str_chip_entry"/>

Vous devez constater que le widget peut aussi être cochable lorsque vous le cliquez.

Filter Chip:Widget.MaterialComponents.Chip.Filter

Vous pouvez utiliser ce style lorsque vous souhaitez que le widget Chip soit utilisé comme tag pour filtrer du contenu.Avec ce style le widget Chip peut avoir une icon optionnelle, une autre icon pour se supprimer et peut être optionnellement cochable.

 <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIcon="@drawable/ic_person"
            android:text="@string/str_chip_entry"/>

Vous devez constater que le widget est cochable lorsque vous cliquez sur lui.

Choice Chip: Widget.MaterialComponents.Chip.Choice

Utiliser ce style lorsque vous souhaitez que l’utilisateur fait un seul choix parmi plusieurs options.Avec ce style le widget Chip est toujours cochable par défaut et peut avoir optionnellement une icon.

<com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIcon="@drawable/ic_person"
            android:text="@string/str_chip_entry"/>

Action Chip (Par Default):Widget.MaterialComponents.Chip.Action

Ce style du widget chip est utilisé pour exécuter une action lorsque le widget chip est cliqué.Il peut avoir une icon optionnelle mais ne peut jamais être cliquable.

Voici un exemple d’utilise du style Action avec le widget Chip.

<com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIcon="@drawable/ic_person"
            android:text="@string/str_chip_entry"/>

Les valeur par défaut des attributs de style du widget Chip.

Les styles précédents que nous avons exploré, définissent des valeurs par défaut pour les attributs du widget Chip.

Attribut du composant	Valeur par défaut
`android:textAppearance`	`textAppearanceBody2`
`android:textColor` (enabled)	`colorOnSurface` at 87% opacity
`android:textColor`	`colorOnSurface` at 33% opacity
`chipBackgroundColor`	`colorOnSurface`
`chipSurfaceColor`	`colorSurface`
`chipStrokeColor`	`colorOnSurface`
`rippleColor`	`colorOnSurface`
`closeIconTint`	`colorOnSurface`

Gestion du clic

Pour savoir lorsqu’un widget Chip est cliqué, vous pouvez enregistrer un gestionnaire d’événement sur le widget Chip avec la méthode setOnClickListener(OnClickListener) comme suit.

  val chip:Chip=findViewById(R.id.chip)
        chip.setOnClickListener { 
            
        }

Chip chip = (Chip) findViewById(R.id.chip);

chip.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // Handle the click.
    }
});

Ou vous pouvez appelez la méthode setOnCheckedChangeListener(OnCheckedChangeListener) du Chip pour enregistrer une méthode de rappelle qui sera appelé lorsque le widget sera coché ou décoché

  val chip:Chip=findViewById(R.id.chip)
        chip.setOnCheckedChangeListener { compoundButton, b ->
            
        }

Chip chip = (Chip) findViewById(R.id.chip);

chip.setOnCheckedChangeListener(new setOnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton view, boolean isChecked) {
        // Handle the toggle.
    }
});

Ou Vous pouvez appeler la méthode setOnCloseIconClickListener(OnClickListener) du widget Chip pour enregistrer une méthode de rappel qui sera invoqué lorsque l’icon de suppression du widget sera cliqué.

 val chip: Chip = findViewById(R.id.chip)
        chip.setOnCloseIconClickListener { }

Chip chip = (Chip) findViewById(R.id.chip);

chip.setOnCloseIconClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // Handle the click on the close icon.
    }
});

Diposition RTL des widget Chips

Pour pouvoir afficher le widget Chip dans la direction RTL(Right to left:Pour les textes qui se lisent de la droit vers la gauche ,les textes comme les texte de langue arabe), vous devez d’abord appelé la méthode setLayoutDirection(int) en définissant l’argument de cette fonction à View.LAYOUT_DIRECTION_LOCALE pour s’assurer que le texte du widget Chip s’affiche avec des marges internes approprié(Par rapport à la direction RTL).

Sans cela, le rendu initial peut sembler que les marges interne du texte sont défini par rapport à la direction LTR.

   val chip: Chip = findViewById(R.id.chip)
        chip.layoutDirection= View.LAYOUT_DIRECTION_LOCALE

Chip chip = (Chip) findViewById(R.id.chip);
chip.setLayoutDirection(View.LAYOUT_DIRECTION_LOCALE);

ChipGroup

Comme un RadioGroup,Un ChipGroup contient un ensemble de widget Chip et gère leur positionnement.Il Peut aussi cocher un seul widget Chip qui appartient à un ChipGroup et désélectionner tous les autres widgets comme le fait un RadioGroup.

Mode de positionnement

Par défaut un ChipGroup distribuera les widgets Chip sur plusieurs ligne

 <com.google.android.material.chip.ChipGroup
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option1"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option2"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option3"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option4"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option5"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option6"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option7"/>
   </com.google.android.material.chip.ChipGroup>

Vous pouvez ajouter les widgets Chip statiquement dans un fichier xml ou dynamiquement dans le code.

Un ChipGroup peut aussi contraindre les widgets Chip qu’il contient sur une seul ligne horizontal avec l’attribut app:singleLine .

Dès qu’on le fait , on enveloppe aussi le ChipGroup dans un HorizontalScrollView comme suit

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:context=".MainActivity">

   <com.google.android.material.chip.ChipGroup
           android:layout_width="match_parent"
           app:singleLine="true"
           android:layout_height="wrap_content">
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option1"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option2"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option3"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option4"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option5"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option6"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option7"/>
   </com.google.android.material.chip.ChipGroup>

</HorizontalScrollView>

widget chip chipgroup alignement horizontal

Espacement des widgets Chip

Un ChipGroup peut insérer un espacement entre les widgets Chip d’une même ligne ou entre les lignes de widgets Chip à l’aide de l’attribut app: chipSpacing. Différents espacements horizontaux et verticaux peuvent être définis à l’aide des attributs app: chipSpacingHorizontal et app: chipSpacingVertical.

Sélection unique

Un ChipGroup peut être configuré pour permettre à ce que un seul widget Chip soit coché à la fois à l’aide de l’attribut app: singleSelection.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:context=".MainActivity">

   <com.google.android.material.chip.ChipGroup
           android:layout_width="match_parent"
          app:singleSelection="true"
           android:layout_height="wrap_content">
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Filter"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option1"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Filter"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option2"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Filter"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option3"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Filter"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option4"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Filter"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option5"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Filter"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option6"/>
       <com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Filter"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/str_chip_option7"/>
   </com.google.android.material.chip.ChipGroup>

</LinearLayout>

Gestion des widget Chip cochables dans un ChipGroup

Appelez la méthode setOnCheckedChangeListener(OnCheckedChangeListener) pour enregistrer un méthode de rappel qui sera invoqué lorsque l’état d’un widget cochable changera.

Cette méthode de rappel est appelée unique lors d’une sélection unique d’un widget Chip avec un ChipGroup

    val chipGroup:ChipGroup=findViewById(R.id.chip_group)
        chipGroup.setOnCheckedChangeListener { group, checkedId ->  }

ChipGroup chipGroup = (ChipGroup) findViewById(R.id.chip_group);

chipGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(ChipGroup group, @IdRes int checkedId) {
        // Handle the checked chip change.
    }
});

Vous pouvez appeler dans le code la méthode getCheckedChipId() d’une instance d’un ChipGroup à n’importe quel moment pour récupérer le widget Chip Coché.La valeur de retour est valide uniquement dans un mode de sélection unique d’un widget Chip.

Les widgets Chip Autonome

Un ChipDrawable autonome peut être utilisé dans des contextes qui nécessitent un Drawable. Le cas d’utilisation le plus évident est celui d’un champ de texte qui affiche les nom des contacts sélectionnés dans des widget Chip, que l’on trouve couramment dans les applications de communication.

Pour utiliser un ChipDrawable, vous devez d’abord créer une ressource Chip dans le répertoire res/xml. Notez que vous devez utiliser un tag Chip pour représenter une ressource chip dans le fichier ressource.

res/xml/first_chip.

<chip xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:chipIcon="@drawable/ic_person"
android:text="@string/str_chip_option1"/>

Dès que vous l’avez inflater dynamiquement dans le code comme dans le cas suivant , vous pouvez ensuite le traiter aussi comme un drawable.

  editText.setText(resources.getString(R.string.str_chip1))
        val chip:ChipDrawable = ChipDrawable.createFromResource(this,R.xml.first_chip)
        chip.setBounds(0,0,chip.intrinsicWidth,chip.intrinsicHeight)
        val span: ImageSpan= ImageSpan(chip)
        val text: Editable =editText.text
        text.setSpan(span,0,text.length,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

  editText.setText(getResources().getText(R.string.str_chip1));

        ChipDrawable chip = ChipDrawable.createFromResource(this, R.xml.first_chip);
        chip.setBounds(0, 0, chip.getIntrinsicWidth(), chip.getIntrinsicHeight());
        ImageSpan span = new ImageSpan(chip);
        Editable text = editText.getText();
        text.setSpan(span, 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

Style d’un widget Chip autonome

Le style .Entry d’un widget Chip est le style material par défaut d’un widget Chip autonome.Mais vous pouvez attribuer n’importe quel autre style du widget Chip avec l’attribut style comme suit.

<chip
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.MaterialComponents.Chip.Filter"
    app:chipIcon="@drawable/ic_avatar_circle_24"
    android:text="@string/hello_world"/>

Note:Tous les attributs d’un widget Chip peuvent être appliquer à une ressource ChipDrawable .

Autres ressources

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

https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/chip/Chip.java

https://developer.android.com/reference/com/google/android/material/chip/Chip

Conclusion

Nous sommes à la fin de ce tutoriel sur le widget Chip.J’espère que ce tutoriel vous aidera à intégrer ce widget dans votre application.A bientôt pour un autre tutoriel.

Noé Joel VIGAN

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.

Widget Chip