Android Chips: Dynamicaly add remove tags ( Chips View)

Chips are material design components. Chips can be used to enter information, make selections, filter content, or trigger actions

There are four types of chips 1. Entry Chips, 2.Filter Chips 3.Choice Chips 4. Action Chips

We will make a tag add and remove like functionality using entry chip.

We have defined a ChipGroup in XML file to add Chip view dynamically.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/filter_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
   >
    <android.support.design.chip.ChipGroup
        android:id="@+id/tag_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
   />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

android:id="@+id/filter_container"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

<android.support.design.chip.ChipGroup

android:id="@+id/tag_group"

android:layout_width="match_parent"

android:layout_height="wrap_content"

</LinearLayout>

Add Chip View to ChipGroup

Entry chip has a remove icon along with a chip Thumbnail. We have set setOnCloseIconClickListener on entry Chip instance to remove tags.

import android.os.Bundle;
import android.support.design.chip.Chip;
import android.support.design.chip.ChipGroup;
import android.support.v7.app.AppCompatActivity;
import android.util.TypedValue;
import android.view.View;

import java.util.ArrayList;
import java.util.List;


public class TagActivity extends AppCompatActivity {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tag);
        setTag(tagList); //Pass tag list to show tag view.
    }
    
    private void setTag(final List<String> tagList) {
        final ChipGroup chipGroup = findViewById(R.id.tag_group);
        for (int index = 0; index < tagList.size(); index++) {
            final String tagName = tagList.get(index);
            final Chip chip = new Chip(this);
            int paddingDp = (int) TypedValue.applyDimension(
                    TypedValue.COMPLEX_UNIT_DIP, 10,
                    getResources().getDisplayMetrics()
            );
            chip.setPadding(paddingDp, paddingDp, paddingDp, paddingDp);
            chip.setText(tagName);
            chip.setCloseIconResource(R.drawable.ic_action_navigation_close);
            chip.setCloseIconEnabled(true);
           //Added click listener on close icon to remove tag from ChipGroup
            chip.setOnCloseIconClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    tagList.remove(tagName);
                    chipGroup.removeView(chip);
                }
            });

            chipGroup.addView(chip);
        }
    }
}

import android.os.Bundle;

import android.support.design.chip.Chip;

import android.support.design.chip.ChipGroup;

import android.support.v7.app.AppCompatActivity;

import android.util.TypedValue;

import android.view.View;

import java.util.ArrayList;

import java.util.List;

public class TagActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_tag);

setTag(tagList); //Pass tag list to show tag view.

}

private void setTag(final List<String> tagList) {

final ChipGroup chipGroup = findViewById(R.id.tag_group);

for (int index = 0; index < tagList.size(); index++) {

final String tagName = tagList.get(index);

final Chip chip = new Chip(this);

int paddingDp = (int) TypedValue.applyDimension(

TypedValue.COMPLEX_UNIT_DIP, 10,

getResources().getDisplayMetrics()

);

chip.setPadding(paddingDp, paddingDp, paddingDp, paddingDp);

chip.setText(tagName);

chip.setCloseIconResource(R.drawable.ic_action_navigation_close);

chip.setCloseIconEnabled(true);

//Added click listener on close icon to remove tag from ChipGroup

chip.setOnCloseIconClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

tagList.remove(tagName);

chipGroup.removeView(chip);

}

});

chipGroup.addView(chip);

}

yogendra singh 30 April 2019

. . .

6 comments

Deepak gupta Nov 6, 2019 at 4:47 pm

thanks !!
Nice tutorial

yogendra singh (Moderator) Nov 14, 2019 at 11:07 am
Thanks for reading the blog.

Reply

Ayesh Dec 12, 2019 at 6:20 pm

Thanks for your efforts. 🙂

yogendra singh (Moderator) Dec 19, 2019 at 9:57 am
Thanks for the appreciation. It means a lot.

Reply

Foram Shah Dec 18, 2019 at 9:30 pm

I do my code from this example
But now I have only one query
From recyclerview click I add chip
And from chip clone icon I remove chip…..
But now question is how I remove particular chip from click of recycler view item.

yogendra singh (Moderator) Dec 19, 2019 at 10:06 am
Thanks for reading the blog.
But now question is how I remove particular chip from click of recycler view item.
>>I did not get your implementation. Can you share your code or functionality screenshot here so that I can understand it?

Reply

Android Chips: Dynamicaly add remove tags ( Chips View)

Leave a Comment Cancel Reply

6 comments

Message Sent!