设置 com.google.android.material.chip.Chip 选中颜色

Question

我该如何设置所选的com.google.android.material.chip.Chip颜色？我不想使用默认的灰色。这是单选Chip组。

原始文档在这里

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

- Jeffrey Liu

Answer 1

只需设置属性app:chipBackgroundColor，并将颜色状态列表传递给它：

<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 的样子是这样的：

<?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>

然而，我还必须将android:clickable设置为true才能使其正常工作。

- Dizarray

---

建议提到文件位置为 res/color/bg_chip_state_list.xml。 - Jeffrey Liu

我不需要将 clickable 设置为 true。 - Jeffrey Liu

几乎相同的问题，如何更改文本颜色？ - Jeffrey Liu

@airowe，现在提供了源代码，可以了。 - Jeffrey Liu

为了让它正常工作，我不得不使用state_selected而不是state_checked。不过我正在使用Choice Chip样式。 - silvio.pereira

Answer 2

使用ColorStateList是一种合适的方式。 我想要补充的是，如果你想自定义一堆属性，使用自定义定义的样式会更加清晰易读。

此外，应用于所有视图的常见样式允许您在一个位置进行更改，立即应用于所有视图。

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>

文本_颜色_芯片_状态_列表.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>

背景颜色芯片状态列表.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>

之后，你所需做的就是应用你自定义的样式到所有的芯片视图中，如下所示。

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

- Konstantin Kuznetsov

---

如何通过编程设置样式？我无法正确设置它。 - Shudy

抱歉让你久等了...我有一个答案，但不确定这是否是以编程方式将样式应用于视图的最佳方法。1. values/attrs.xml <resources> <attr name="CustomChipChoiceStyle" format="reference" /> </resources>2. styles.xml <!-- 应用主题 --> <style name="AppTheme" parent="Base.Theme.MaterialComponents.Light"> ... <item name="CustomChipChoiceStyle">@style/CustomChipChoice</item> </style> 3. 代码中 val chip = Chip(requireContext(), null, R.attr.CustomChipChoiceStyle) - Konstantin Kuznetsov

而 checkedIconVisible 呢？选中的图标还是黑色的，如何改变它呢？ - Bhavin Patel

app:checkedIconVisible="true" app:checkedIcon="@drawable/your_custom_icon" - Konstantin Kuznetsov

Answer 3

您可以使用自定义样式来更改Chip中的颜色：

    <com.google.android.material.chip.Chip
        style="@style/My_Widget.MaterialComponents.Chip.Choice"
         ../>

使用这个样式：

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

对于chipBackgroundColor，您可以使用以下形式的选择器：

<?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>

对于文字颜色，您可以使用以下方式：

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

正常/选定状态下的结果：

- Gabriele Mariotti

Answer 4

对于使用 alpha-05 版本的用户，我发现在可过滤的 (parent="Widget.MaterialComponents.Chip.Filter") Chips 上，state_checked 属性被忽略了。相反，你需要使用 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>

- ditn

---

而 checkedIconVisible 呢？选中的图标还是黑色的，如何改变它呢？ - Bhavin Patel

Answer 5

正如其他人所提到的，您需要将芯片元素的背景颜色属性设置为您定义的ColorStateList。但是我想指出一个重要的注意事项，即如何做到这一点，因为我在让不同状态正常工作方面遇到了问题。

当定义自己的ColorStateList（xml资源）时，您需要确保在默认颜色之前设置ColorStateList中的不同状态选项！在我找到解决方法之前，这个问题困扰了我几天，所以我希望这也能帮助其他人。

另外，您的芯片需要可点击和可聚焦（对我来说，可选中没有起作用），因此也要将这些属性设置为true。

<?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>

如果您想以编程方式设置不同的ColorStateOptions，可以按照以下方式进行：

binding.myChip.chipBackgroundColor = resources.getColorStateList(R.color.chip_color_state_list)

- Sarah Mica

Answer 6

一些方式无法改变我在样式中的android:textColor，我必须以编程方式更改芯片的文本颜色（因为我也是以编程方式创建芯片）。

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)

- Thanh-Nhon Nguyen

Answer 7

如果您正在代码中创建芯片项目，请使用如上所述的状态列表和以下方法（当然是Java）：

chip.setClickable(true);
chip.setCheckable(true);
chip.setChipBackgroundColor(getColorStateList(R.color.chip_background_color));
chip.setCheckedIconVisible(false);

注意：在build.gradle脚本中，getColorStateList需要minSdkVersion为23。

- Marcell

Answer 8

看看这个...

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

- Md Rashad Tanjim

Answer 9

因此，您可以使用setChipBackgroundColor(ColorStateList cl)方法来设置芯片的颜色，然后您可以添加一个setOnClickListener(new ...)来切换选择和非选择状态，如下面的代码：

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));
        }
    }
});

我在选择时使用了colorPrimaryDark，而在非选择时使用了colorPrimary。

- Vivek bengani