Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

enter image description here

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> 
like image 642
Jeffrey Liu Avatar asked Jun 28 '18 18:06

Jeffrey Liu


People also ask

How do you change the color of a chip when selected?

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.

How can I change background color of chip in Android?

Chip chip = new Chip(context); chip. setBackgroundcolor(getResources(). getColor(R. color.

What is an android chip?

Chips are compact elements that represent an attribute, text, entity, or action. They allow users to enter information, select a choice, filter content, or trigger an action. The Chip widget is a thin view wrapper around the ChipDrawable , which contains all of the layout and draw logic.


2 Answers

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

like image 151
Dizarray Avatar answered Oct 13 '22 15:10

Dizarray


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" /> 
like image 44
Konstantin Kuznetsov Avatar answered Oct 13 '22 16:10

Konstantin Kuznetsov