Get selected Chips from a ChipGroup

Question

I'm new to working with Chips in Android. I want to get the selected Chips from a ChipGroup when I click a button. Made is someway work with checking every Chip and add it to a Set, but want to make it more efficient. Somehow I didn't find an answer to my question myself.

There is also an error when I check 2 Chips and uncheck the first one I checked.

Here my code:

<com.google.android.material.chip.ChipGroup
                android:id="@+id/chipGroup"
                android:layout_width="300dp"
                android:layout_height="wrap_content"

                >

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip1"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="1"
                    android:backgroundTint="#99FFFFFF"
                    />

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip2"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="2"
                    android:backgroundTint="#99FFFFFF"/>


                <com.google.android.material.chip.Chip
                    android:id="@+id/chip3"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="3"
                    android:backgroundTint="#99FFFFFF"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip4"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="4"
                    android:backgroundTint="#99FFFFFF"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip5"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="5"
                    android:backgroundTint="#99FFFFFF"/>

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

Set<Integer> chipIds = new HashSet<>();

int chip1Id= 1;
int chip2Id= 2;
int chip3Id= 3;
int chip4Id= 4;
int chip5Id= 5;

chip1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    chipIds.add(chip1Id);
                } else {
                    for (int i : chipIds) {
                        if (i == chip1Id) {
                            chipIds.remove(i);
                        }
                    }
                }
            }
        });

        chip2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    chipIds.add(chip2Id);
                } else {
                    for (int i : chipIds) {
                        if (i == chip2Id) {
                            chipIds.remove(i);
                        }
                    }
                }
            }
        });

        chip3.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    chipIds.add(chip3Id);
                } else {
                    for (int i : chipIds) {
                        if (i == chip3Id) {
                            chipIds.remove(i);
                        }
                    }
                }
            }
        });

        chip4.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    chipIds.add(chip4Id);
                } else {
                    for (int i : chipIds) {
                        if (i == chip4Id) {
                            chipIds.remove(i);
                        }
                    }
                }
            }
        });

        chip5.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    chipIds.add(chip5Id);
                } else {
                    for (int i : chipIds) {
                        if (i == chip5Id) {
                            chipIds.remove(i);
                        }
                    }
                }
            }
        });

score 6 · Answer 1 · answered Sep 29 '19 at 01:35

Here is my solution:

just for test results, I´ve added a button in XML

<Button
  android:id="@+id/bShow"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_below="@id/chipGroup"
  android:layout_margin="10dp"
  android:text="Show Checked"  
  android:onClick="buttonPressed"/>

Java: just for the test, be sure you include:

import android.widget.Button;
import android.widget.Toast;
import android.view.View;

Java: add the following code

showResult = (Button) findViewById(R.id.bShow);
showResult.setOnClickListener(new View.OnClickListener() 
{
    @Override
    public void onClick(View v) {
        String msg = "Chips checked are:";
        ChipGroup chg = findViewById(R.id.chipGroup);
        int chipsCount = chg.getChildCount();
        if (chipsCount == 0) {
            msg += " None!!";
        } else {
            int i = 0;
            while (i < chipsCount) {
              Chip chip = (Chip) chg.getChildAt(i);
              if (chip.isChecked() ) {
                msg += chip.getText().toString() + " " ;  
              }
              i++;
            };  
        }
        // show message
        Toast.makeText(getApplicationContext(),msg, Toast.LENGTH_LONG).show();
    }
});

score 5 · Answer 2 · answered Jul 21 '20 at 19:56

For those looking for the Kotlin equivalent, it looks much simpler. This version uses Sequence as well, so its more efficient than the usual Java counterparts:

val chipGroup = // get the ChipGroup view via your favorite inflation mechanism (view bindind, android extensions, etc)
val selectedChips = chipGroup.children
                .filter { (it as Chip).isChecked }
                .map { (it as Chip).text.toString() }

score 2 · Answer 3 · answered May 17 '19 at 09:33

ChipGroup does not have any method to return multiple selected chips. So you can use the traditional way by looping all child inside the parent and check whether it is checked or not.

 for (index in 0 until mBinding.bookingIncludeCg.childCount) {
      val chip:Chip = mBinding.bookingIncludeCg.getChildAt(index) as Chip
          when(chip.id) {
              R.id.free_cancellation_chip -> hotelFilter.freeCancellation = chip.isChecked
              R.id.free_breakfast_chip -> hotelFilter.freeBreakfast = chip.isChecked
              R.id.free_wifi -> hotelFilter.freeWifi = chip.isChecked
          }
 }

And the XML

<android.support.design.chip.ChipGroup
        android:id="@+id/booking_include_cg"
        android:layout_marginTop="@dimen/spacing_16"
        app:layout_constraintTop_toBottomOf="@+id/booking_include_label"
        app:layout_constraintLeft_toLeftOf="@id/guidelineLeft"
        app:layout_constraintRight_toRightOf="@id/guidelineRight"
        android:layout_width="0dp"
        android:layout_height="wrap_content">

        <android.support.design.chip.Chip
            android:id="@+id/free_cancellation_chip"
            style="@style/HotelFilterChipStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="@string/free_cancellation" />

        <android.support.design.chip.Chip
            android:id="@+id/free_breakfast_chip"
            style="@style/HotelFilterChipStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="@string/free_breakfast" />

        <android.support.design.chip.Chip
            android:id="@+id/free_wifi"
            style="@style/HotelFilterChipStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="@string/free_wifi" />

    </android.support.design.chip.ChipGroup>

P.S. Please consider adapting your code to use Java as per the language that OP is using. — Edric, May 23 '19 at 01:07

Get selected Chips from a ChipGroup

3 Answers3

Linked