Set com.google.android.material.chip.Chip selected color
AndroidMaterial DesignMaterial Components-AndroidAndroid ChipsAndroid Problem Overview
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>
Android Solutions
Solution 1 - Android
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
Solution 2 - Android
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" />
Solution 3 - Android
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:
Solution 4 - Android
For those using alpha-05
, I found that state_checked
was being ignored on the filterable (parent="Widget.MaterialComponents.Chip.Filter"
) Chips. Instead, you need state_selected
:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/apricot" android:state_selected="true"/>
<item android:color="@color/apricotSubtle"/>
</selector>
Solution 5 - Android
As others mentioned, you need to set the background color property of the chip element to a ColorStateList that you define. But I just wanted to point out an important note on how to do that since I ran into issues getting the different states to work.
When defining your own ColorStateList (xml resource) you need to make sure you set the different state options in the ColorStateList BEFORE the default color! This was tripping me up for a few days before I figured it out, so I hope this helps someone else as well.
Also, your chip needs to be clickable and focusable (checkable didn't work for me) so set these properties to true as well.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:color="@color/chipColorLight" />
<item android:color="@color/chipColorDefault"/>
</selector>
If you want to programmatically set different ColorStateOptions you can do that like so:
binding.myChip.chipBackgroundColor = resources.getColorStateList(R.color.chip_color_state_list)
Solution 6 - Android
Somehow changing android:textColor
in styles
doesn't work for me. I have to change the chip's text color programmatically (as I also create chips programmatically).
val chip = Chip(context)
// Apply custom MyChipChoice style to the chip
val drawable = ChipDrawable.createFromAttributes(context!!, null, 0, R.style.MyChipChoice)
chip.setChipDrawable(drawable)
// Apply text color to the chip
val colorStateList = ContextCompat.getColorStateList(context!!, R.color.my_choice_chip_text_color)
chip.setTextColor(colorStateList)
Solution 7 - Android
If you are creating the Chip items in code use a state list like mentioned above and the following methods (in Java of course):
chip.setClickable(true);
chip.setCheckable(true);
chip.setChipBackgroundColor(getColorStateList(R.color.chip_background_color));
chip.setCheckedIconVisible(false);
Note: getColorStateList requires minSdkVersion to be 23 in the build.gradle script.
Solution 8 - Android
Check out this...
<com.google.android.material.chip.ChipGroup
android:id="@+id/chipGroupFilter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="@style/Theme.MaterialComponents.Light.DarkActionBar"
app:selectionRequired="true"
app:singleLine="true"
app:singleSelection="true">
<com.google.android.material.chip.Chip
android:id="@+id/chipAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="All"
android:checkable="true"
android:clickable="true"
android:focusable="true"
app:chipBackgroundColor="@color/bg_chip_state_list"
app:checkedIconEnabled="false"
android:textColor="@color/whiteBlackSwitchColor"
app:chipIcon="@drawable/ic_all"
app:chipIconTint="#4D4F55"
app:chipIconVisible="true" />
</com.google.android.material.chip.ChipGroup>
Solution 9 - Android
So you can use the setChipBackgroundColor(ColorStateList cl)
method to set the color of your chip and then you can add an setOnClickListener(new ...)
to toggle with selection and non-selection like the following code:
yourchip.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (((Chip)v).getChipBackgroundColor().equals(getResources().getColorStateList(R.color.colorPrimaryDark,null))) {
((Chip)v).setChipBackgroundColor(getResources().getColorStateList(R.color.colorPrimary, null));
} else {
((Chip) v).setChipBackgroundColor(getResources().getColorStateList(R.color.colorPrimaryDark, null));
}
}
});
where i have used colorPrimaryDark
for selection and colorPrimary
for non-selection.