Set com.google.android.material.chip.Chip selected color
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
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" />
To change the colors in the Chip
you can use a custom style:
<com.google.android.material.chip.Chip style="@style/My_Widget.MaterialComponents.Chip.Choice" ../>
With this style:
<style name="My_Widget.MaterialComponents.Chip.Choice" parent="Widget.MaterialComponents.Chip.Choice"> <!-- Chip background color selector --> <item name="chipBackgroundColor">@color/my_choice_chip_background_color</item> <!-- Border color --> <item name="chipStrokeColor">@color/primaryDarkColor</item> <!-- Chip text color selector --> <item name="android:textColor">@color/mtrl_choice_chip_text_color</item> <!-- Chip close icon color selector --> <item name="closeIconTint">@color/mtrl_chip_close_icon_tint</item> </style>
For the chipBackgroundColor
you can use a selector like this:
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 24% opacity --> <item android:alpha="0.24" android:color="@color/custom" android:state_enabled="true" android:state_selected="true"/> <item android:alpha="0.24" android:color="@color/secondaryDarkColor" android:state_enabled="true" android:state_checked="true"/> <!-- 12% of 87% opacity --> <item android:alpha="0.10" android:color="@color/primaryLightColor" android:state_enabled="true"/> <item android:alpha="0.12" android:color="@color/colorPrimary"/></selector>
For the text color you can use something like:
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/colorAccent" android:state_enabled="true" android:state_selected="true"/> <item android:color="?attr/colorPrimary" android:state_enabled="true" android:state_checked="true"/> <!-- 87% opacity. --> <item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_enabled="true"/> <!-- 38% of 87% opacity. --> <item android:alpha="0.33" android:color="?attr/colorOnSurface"/></selector>
Result for normal/selected state: