为Android中的芯片设置边框颜色

Question

在我的安卓应用中，我有一个简单的芯片，看起来像这样。

有没有办法设置边框的颜色使它看起来像这样？

更新： 我尝试添加形状，但在填充布局时出现异常。

 <android.support.design.chip.Chip
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="@drawable/chip_with_border"
     android:text="my chip" />

drawable/chip_with_border.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners android:radius="30dp"/>
            <stroke android:width="1dp" android:color="#DDDDDD"/>
        </shape>
    </item>
</selector>

这导致了异常

android.view.InflateException: 解析 XML 文件时出错，在二进制 XML 文件的第 32 行，无法膨胀 android.support.design.chip.Chip 类。

- Vitalii

Answer 1

我已经自己找到答案了。我需要在我的chip中添加chipStrokeColor和chipStrokeWidth属性。

  <android.support.design.chip.Chip
      android:id="@+id/chip"
      style="@style/Widget.MaterialComponents.Chip.Filter"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:chipStrokeColor="#F0F"
      app:chipStrokeWidth="1dp"
      android:text="my chip"
      app:checkedIcon="@drawable/ic_done_green"
      app:chipBackgroundColor="#FFF" />

- Vitalii

Answer 2

使用Material Components Library和Chip组件，您可以使用自定义样式：

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

或在xml布局中使用 app:chipStrokeColor、app:chipStrokeWidth、app:chipBackgroundColor、android:textColor 属性:

<com.google.android.material.chip.Chip
    app:chipBackgroundColor="@color/chip_background_color_selector"
    app:chipStrokeColor="@color/color_choice_chip_strokecolor_selector"
    app:chipStrokeWidth="1dp"
    android:textColor="@color/color_choice_chip_text_color"
    ..>

使用这种样式：

  <style name="Colors_Widget.MaterialComponents.Chip.Choice" parent="Widget.MaterialComponents.Chip.Choice">
    <item name="chipBackgroundColor">@color/chip_background_color_selector</item>
    <item name="chipStrokeColor">@color/color_choice_chip_strokecolor_selector</item>
    <item name="chipStrokeWidth">1dp</item>
    <item name="android:textColor">@color/color_choice_chip_text_color</item>
    <item name="checkedIconVisible">true</item>
  </style>

你可以使用一个 选择器 来管理不同状态下的边框颜色。
类似这样:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:color="@color/primaryLightColor" android:state_enabled="true" android:state_selected="true"/>
  <item android:color="@color/primaryLightColor" android:state_enabled="true" android:state_checked="true"/>
  <!-- 87% opacity. -->
  <item android:alpha="0.87" android:color="#C6CCCD" android:state_enabled="true"/>
  <!-- 38% of 87% opacity. -->
  <item android:alpha="0.33" android:color="#C6CCCD"/>

</selector>

- Gabriele Mariotti

Answer 3

1- 在drawable文件夹中创建shape.xml，并将以下代码放入其中

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners android:radius="30dp"/>
            <stroke android:width="1dp" android:color="#DDDDDD"/>
        </shape>
    </item>
</selector>

2- 然后在您的 View 中设置 android:background="@drawable/shape" 属性

- Ahmed Abdalla

---

我尝试着这样做，但是出现了崩溃异常 Error inflating class android.support.design.chip.Chip。 - Vitalii

他在询问芯片边框，而不是背景。 - Muhamed El-Banna