material chip selection change not working in android

Question

I have created group of chips and when i try try to click on chips below listener is not calling. I want to update the code based on chip selection.

chipGroup.setOnCheckedStateChangeListener

Below is the code i am using. Can you help me what is missing in below code?

class MainFragment : Fragment() {

    private var _binding: FragmentLayoutBinding? = null
    private val binding get() = _binding!!

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View {
    _binding = FragmentLayoutBinding.inflate(inflater, container, false)
    return binding.root
}

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {

    binding.chipGroup.setOnCheckedStateChangeListener { _, checkedIds ->
        val chip: Chip? = view.findViewById(checkedIds[checkedIds.size - 1])
        chip?.let {
            when (chip.id) {
            }
        }
    }
}

XML Layout

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<HorizontalScrollView
    android:id="@+id/chips_list"
    android:layout_width="match_parent"
    android:layout_below="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20.dp"
    android:scrollbars="none">

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chip_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleLine="true"
        app:singleSelection="true">

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="One" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Two" />

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

Answer 1

The problem occurs because you are not using Style. You can use a special style for the solution.

themes.xml (You can change the color values.)

<style name="StatsWidget.MaterialComponents.Chip.Choice" parent="Widget.MaterialComponents.Chip.Choice">
        <item name="chipBackgroundColor">@android:color/darker_gray</item>
        <item name="android:textColor">@color/white</item>
    </style>

Your Layout (The defined style value has been added.)

...
        <com.google.android.material.chip.ChipGroup
                    android:id="@+id/chip_group"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:singleLine="true"
                    app:singleSelection="true">
        
                    <com.google.android.material.chip.Chip
                        android:id="@+id/chip_one"
                        style="@style/StatsWidget.MaterialComponents.Chip.Choice"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:checked="true"
                        android:text="One" />
        
                    <com.google.android.material.chip.Chip
                        android:id="@+id/chip_two"
              style="@style/StatsWidget.MaterialComponents.Chip.Choice"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Two" />
        
                </com.google.android.material.chip.ChipGroup>
...

Usecase setOnCheckedStateChangeListener ( You can use your own structure.)

val chipGroup = findViewById<ChipGroup>(R.id.chip_group)
        chipGroup.setOnCheckedStateChangeListener { group, checkedIds ->
            checkedIds.forEach { checkedId ->
                val checkedChip = group.findViewById<Chip>(checkedId)
                Log.e("TAG","Clicked chip ${checkedChip.id}")
            }
        }