Установите com.google.android.material.chip.Chip выбранный цвет

Как установить выбранный цвет com.google.android.material.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>

Ответ 1

Просто установите app:chipBackgroundColor атрибута 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 to true чтобы сделать эту работу

Ответ 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>

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>

После этого все, что вам нужно, это применить свой собственный стиль ко всем видам чипов, как это.

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

Ответ 3

Для тех, кто использует alpha-05, я обнаружил, что state_checked игнорируется на фильтруемых (parent="Widget.MaterialComponents.Chip.Filter") чипах. Вместо этого вам нужно 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>

Ответ 4

Чтобы изменить цвета в 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>

Результат для нормального/выбранного состояния: