How do I make a ChipGroup to act like a radioGroup?

Question

How do I make a ChipGroup to act like a radioButton where one item can be selected at a time while changing the background color.

I saw this link for something like this but it did not help me since because am using a layoutInflater to show my chip item.

firebaseFirestore.collection("Categories").addSnapshotListener((queryDocumentSnapshots, e) -> {
            for (DocumentChange doc: queryDocumentSnapshots.getDocumentChanges()){
                if (doc.getType() == DocumentChange.Type.ADDED){
                    Categories categories = doc.getDocument().toObject(Categories.class);
                    post_list.add(categories);
                    Chip chip = (Chip) getLayoutInflater().inflate(R.layout.chip_item_layout, chipGroup, false);
                    chip.setText(categories.getTitle());
                    chipGroup.addView(chip);
                    chipGroup.setOnCheckedChangeListener((chipGroup, id) -> {
                        Chip chip2 = ((Chip) chipGroup.getChildAt(chipGroup.getCheckedChipId()));
                        if (chip2 != null) {
                            for (int i = 0; i < chipGroup.getChildCount(); ++i) {
                                chipGroup.getChildAt(i).setClickable(true);
                                chip2.setChipBackgroundColorResource(R.color.customOrange);
                            }
                            chip2.setClickable(false);
                        }
                    });

                }
            }
        });

Gabriele Mariotti · Answer 1 · 2019-11-20T07:43:09.047

6

In your ChipGroup use the app:singleSelection="true" attribute. In this way the ChipGroup can be configured to only allow a single chip to be checked at a time.

<com.google.android.material.chip.ChipGroup
    app:singleSelection="true"
    ..>

Then you can set a selector color using the app:chipBackgroundColor attribute in your layout chip_item_layout.xml.

Something like:

<com.google.android.material.chip.Chip
    style="@style/Widget.MaterialComponents.Chip.Choice"
    app:chipBackgroundColor="@color/chip_background_color"
    ..>

Pay attention to style="@style/Widget.MaterialComponents.Chip.Choice" because it defines the chip as android:checkable="true".

The chip_background_color is a selector where you can define your favorite colors in the different states. It is the default selector, you can change it:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- 24% opacity -->
  <item android:alpha="0.24" android:color="?attr/colorPrimary" android:state_enabled="true" android:state_selected="true"/>
  <item android:alpha="0.24" android:color="?attr/colorPrimary" android:state_enabled="true" android:state_checked="true"/>
  <!-- 12% of 87% opacity -->
  <item android:alpha="0.10" android:color="?attr/colorOnSurface" android:state_enabled="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface"/>

</selector>

The selected chip is define by the color in your case is the first line (android:state_selected="true").

If you would like to do it programmatically just use (not in the OnCheckedChangeListener) the setChipBackgroundColorResource method.

chip.setChipBackgroundColorResource(R.color.chip_background_color);

Also if you want to require at least one selection you can use the app:selectionRequired attribute. This attribute requires the 1.2.0 (starting from 1.2.0-alpha02)

edited Nov 20 '19 at 07:43

answered Oct 05 '19 at 06:11

Gabriele Mariotti

320,139
94
887
841

I would like the chip group to act like a radio button with background color on ever pressed chipped item whereby there is a toggling effect when of the items are clicked. – bensofter Oct 05 '19 at 06:42
this would set background color for all the chip items – bensofter Oct 05 '19 at 06:48
It is not totally clear what you looking for. If you want a single selection use in the `ChipGroup` the `app:singleSelection="true"` attribute. If you want custom color for the different states (selected, enable, normal) you have to set a selector color for each `Chip`. – Gabriele Mariotti Oct 05 '19 at 06:49
@bensofter *this would set background color for all the chip items*. Yes but it is a selector, not just a color. It means that each chip uses a different color based on its own state – Gabriele Mariotti Oct 05 '19 at 06:50
how do I make it such that once I select a new item, the previous items lose their selected state and color. I want just one selected state – bensofter Oct 05 '19 at 07:03
Also, maybe I could get the index of an item inside the chip group and set background color of that item accordingly – bensofter Oct 05 '19 at 07:04
It is managed by the components itself.Just define the selector at beginning not when you click the single chip (it means not inside the OnCheckedChangeListener) Then you have only to define if you would like a single selection (app:singleSelection="true") or a multiple selection (app:singleSelection="false"). – Gabriele Mariotti Oct 05 '19 at 07:10
I am able to select chip items. However, how. do I ensure only one item can be highlighted at a time? Which. means, once a new chip is selected, the others automatically resets to default color – bensofter Oct 05 '19 at 07:34
@bensofter just add `app:singleSelection="true"` in the layout of the `ChipGroup` – Gabriele Mariotti Oct 05 '19 at 07:51
@bensofter sorry, my bad, but I really don't understand what you are trying to achieve. In any case use the latest 1.1.0-alpha10. – Gabriele Mariotti Oct 05 '19 at 08:08
please review my question above. I have added a screenshot and I have updated my. code. It might give you a clue on what am trying to achieve. Thanks in advance – bensofter Oct 05 '19 at 09:27
Furthermore, to be able to uncheck any chip if there is new chip has been selected – bensofter Oct 05 '19 at 09:37
@bensofter I've added some details to my answer, but it is the same. Check if your Chip is using the style="@style/Widget.MaterialComponents.Chip.Choice" – Gabriele Mariotti Oct 05 '19 at 09:49
thank you. I really appreciate your time and effort. One more thing though, from your illustration, if I select Text 2, would Text 1 change to default color? – bensofter Oct 05 '19 at 13:56
Yes Text1 becomes as the others (text3,text4...) automatically. – Gabriele Mariotti Oct 05 '19 at 14:38

How do I make a ChipGroup to act like a radioGroup?

1 Answers1