Set com.google.android.material.chip.Chip selected color

Question

How do I set the selected com.google.android.material.chip.Chip color? I don't want it to be the default gray. This is a single selection chip group.

Original documentation here

<com.google.android.material.chip.ChipGroup     android:id="@+id/chipgroup"     android:layout_width="0dp"     android:layout_height="wrap_content"     android:layout_marginStart="16dp"     android:layout_marginTop="16dp"     android:layout_marginEnd="16dp"     app:checkedChip="@+id/chip_program"     app:chipSpacingHorizontal="32dp"     app:chipSpacingVertical="8dp"     app:layout_constraintEnd_toEndOf="parent"     app:layout_constraintStart_toStartOf="parent"     app:layout_constraintTop_toBottomOf="@+id/detailText"     app:singleSelection="true">      <com.google.android.material.chip.Chip         android:id="@+id/chip_program"         style="@style/Widget.MaterialComponents.Chip.Choice"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Program"         app:chipEndPadding="16dp"         app:chipStartPadding="16dp" />      <com.google.android.material.chip.Chip         android:id="@+id/chip_normal"         style="@style/Widget.MaterialComponents.Chip.Choice"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="@string/program_normal"         app:chipEndPadding="16dp"         app:chipStartPadding="16dp" /> </com.google.android.material.chip.ChipGroup> 

Answer 1

Just set an attribute app:chipBackgroundColor and pass a color state list to it:

<android.support.design.chip.Chip     android:id="@+id/test"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:checkable="true"     android:clickable="true"     android:focusable="true"     app:chipBackgroundColor="@color/bg_chip_state_list"     app:chipText="Test" /> 

bg_chip_state_list looks like this:

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:color="@color/colorSecondaryLight" android:state_checked="true" />     <item android:color="@color/colorPrimaryDark" /> </selector> 

However I also had to set android:clickable to true to make this work

Answer 2

Using a ColorStateList is a proper way. The only thing I want to add is using custom defined style much more clear to read especially if you want to customise a bunch of properties.

Among other things, one common style applied to all views allows you to make changes in one place that apply immediately to all views

styles.xml

<style name="CustomChipChoice" parent="@style/Widget.MaterialComponents.Chip.Choice">         <item name="chipBackgroundColor">@color/background_color_chip_state_list</item>         <item name="android:textColor">@color/text_color_chip_state_list</item> </style> 

text_color_chip_state_list.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:state_checked="true"         android:color="@color/color_checked" />     <item android:state_checked="false"         android:color="@color/color_unchecked" /> </selector> 

background_color_chip_state_list.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:color="@color/color1" android:state_checked="true" />     <item android:color="@color/color2" /> </selector> 

After that all you need is apply your custom style for all the Chip views like this.

<android.support.design.chip.Chip     android:layout_width="wrap_content"     android:layout_height="match_parent"     style="@style/CustomChipChoice"     android:checkable="true"     android:clickable="true"     android:focusable="true"     android:text="Chip text" />