Material-components-android: How to set chip selected color? (single selection)

Created on 28 Jun 2018 · 7Comments · Source: material-components/material-components-android

How to set chip selected color? (single selection)

On https://material.io/develop/android/components/chip/, there is only app:chipBackgroundColor, which is when is the color even when it is not selected.

https://stackoverflow.com/questions/51089150/set-com-google-android-material-chip-chip-selected-color

Source

jeffreyliu8

👍3

Most helpful comment

I answered on StackOverflow, but I will repeat it here just in case.

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

lebeshev on 6 Jul 2018

👍13

All 7 comments

I answered on StackOverflow, but I will repeat it here just in case.

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

lebeshev on 6 Jul 2018

👍13

Cool, it's working. Thanks.
https://developer.android.com/guide/topics/resources/color-list-resource

jeffreyliu8 on 10 Jul 2018

Now almost the same question, how to do the same with text color?

jeffreyliu8 on 10 Jul 2018

@jeffreyliu8
in Chip's xml:
android:textAppearance="@style/ChipUncheckedText"

and then in styles.xml

    <style name="ChipUncheckedText" parent="TextAppearance.MaterialComponents.Chip"">
        <item name="android:textColor">@color/colorWhite</item>
    </style>