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

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:

enter image description hereenter image description here