20

In my android app I have a simple chip that looks like this.

enter image description here

Is there any way to set the color of the border to make it like this?

enter image description here

UPDATE: I tried to do add the shape but there's an exception during inflating the layout

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

This causes the exception

android.view.InflateException: Binary XML file line #32: Error inflating class android.support.design.chip.Chip

Edric
  • 24,639
  • 13
  • 81
  • 91
Vitalii
  • 10,091
  • 18
  • 83
  • 151

3 Answers3

43

I found the answer myself. I need to add chipStrokeColor and chipStrokeWidth attributes to my chip

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

enter image description here

Vitalii
  • 10,091
  • 18
  • 83
  • 151
15

With the Material Components Library and the Chip component you can use a custom style:

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

or the app:chipStrokeColor, app:chipStrokeWidth, app:chipBackgroundColor, android:textColor attributes in the xml layout:

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

With this style:

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

For the border color you can use a selector to manage the different states.
Something like:

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

enter image description here

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
-1

1- Create shape.xml in drawable folder and put this code inside it

<?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- then set android:background="@drawable/shape" attribute in your View

Ahmed Abdalla
  • 2,356
  • 2
  • 14
  • 27