1

Use Case: I am making a category selector where a user must select 5 chips from a chipgroup having a number of chips. User should not be allowed to select more than 5 chips.

My chip group code:

<com.google.android.material.chip.ChipGroup
        android:id="@+id/category_chip_group"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="16dp"
        >
        <com.google.android.material.chip.Chip
            android:id="@+id/tech_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"
            android:text="Technology"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/sports_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sports and Fitness"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"/>

        <com.google.android.material.chip.Chip
            android:id="@+id/public_speakin_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"

            android:text="Public Speaking"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/biz_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"

            app:chipBackgroundColor="@drawable/bg_chip_list"
            android:text="Business and careers"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/read_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"
            android:text="Reading and Writing"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/yoga_med_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"
            android:text="Yoga and meditation"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/sing_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"
            android:text="Singing"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/dance_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"
            android:text="Dancing"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/food_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"

            android:text="Food Blogging"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/gaming_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"
            android:text="Gaming"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/beauty_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"

            android:text="Beauty and Makeup"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/fashion_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"
            android:text="Fashion and Lifestyle"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/photography_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"

            android:text="Photography"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/music_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"

            android:text="Music"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/movies_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"

            android:text="Movies and TV shows"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/travel_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"

            android:text="Travel"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/art_and_design_chip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            app:chipBackgroundColor="@drawable/bg_chip_list"

            android:text="Art and design"/>


    </com.google.android.material.chip.ChipGroup>

My java code for chip selection

Chip chip = (Chip) category_chips.getChildAt(i);
if (chip.isChecked()) {
    Log.e("i", "" + i);
    i = i + 1;
    categories.add(chip.getText().toString());
    if (i > 5) {
        chip.setChecked(false);
        chip.setSelected(false);
    }
}

I want to add the String from the selected chips to an arraylist This code is one of the tries that I made. I am a beginner and I am not getting how this feature can be implemented

Please help me on how I can implement this use case in java. I have tried many answers on stackoverflow but didn't found one that satisfied my use case.

MayorJay
  • 89
  • 7
Aryan Soni
  • 236
  • 4
  • 15

2 Answers2

1

You can add a OnCheckedChangeListener in your chips and check the number of checked chips in the ChipGroup. Something like:

  ChipGroup chipGroup = findViewById(R.id.category_chip_group);
  ..
  chip.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override public void onCheckedChanged(CompoundButton compoundButton, boolean checked) {
      if (checked) {
        //Get all checked chips in the group
        List<Integer> ids = chipGroup.getCheckedChipIds();
        if (ids.size() > 5) { 
          chip.setChecked(false);  //force to unchecked the chip
        }
      }
    }
  });
Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
0

Change chip style like this:

<com.google.android.material.chip.Chip
    ...
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/Widget.MaterialComponents.Chip.Filter"
    ...
 />

Add checked listener to the all chips:

tech_chip.setOnCheckedChangeListener(this);
....
art_and_design_chip.setOnCheckedChangeListener(this);

onCheckedChanged method:

@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
    Chip chip = findViewById(compoundButton.getId());
    String chipText = chip.getText().toString();

    if(categories.size()< 5){
        categories.add(chipText);
    }else {
        if(categories.contains(chipText)){
            categories.remove(chipText);
        }else{
            chip.setChecked(false);
        }
    }
}
Kasım Özdemir
  • 5,414
  • 3
  • 18
  • 35