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>

Bermudez

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

Alcine

It's working, how did you figure this out? Is this the doc? developer.android.com/guide/topics/resources/… – Bermudez

Better mention the file location is res/color/bg_chip_state_list.xml – Bermudez

I don't need set clickable to true though. – Bermudez

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

@JeffreyLiu The docs don't mention all available attributes, so I discovered it in the source code – Alcine

@JeffreyLiu Did you ever figure it out? – Cyanohydrin

@Cyanohydrin well, with the source code provided now, yes. – Bermudez

I had to use state_selected instead of state_checked to make it to work. I'm using Choice Chip style though. – Tapir

and what about checkedIconVisible checked icon is still black how to change that too? – Ascomycete

medium.com/@werder630/… – Steddman

No need to add clickable and focusable if you use a style inheriting from one of the Widget.MaterialComponents.Chip... – Courses

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" />

Sadfaced

how about set up programatically the style? I'm not able to set it properly – Dusty

Sorry for keeping you waiting... I have an answer, but not sure if this is the best way of applying the style programatically to views. 1. values/attrs.xml <resources> <attr name="CustomChipChoiceStyle" format="reference" /> </resources> 2. styles.xml <!-- Base application theme. --> <style name="AppTheme" parent="Base.Theme.MaterialComponents.Light"> ... <item name="CustomChipChoiceStyle">@style/CustomChipChoice</item> </style> 3. in code val chip = Chip(requireContext(), null, R.attr.CustomChipChoiceStyle) – Sadfaced

and what about checkedIconVisible checked icon is still black how to change that too? – Ascomycete

app:checkedIconVisible="true" app:checkedIcon="@drawable/your_custom_icon" – Sadfaced

Answer 3

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:

Mylan

Answer 4

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>

Shaven

and what about checkedIconVisible checked icon is still black how to change that too? – Ascomycete

Answer 5

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)

Larimor

Answer 6

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)

Smithereens

Answer 7

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.

Scholasticism

Answer 8

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>

Drawbar

Answer 9

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.

Trellas