Set border color for a chip in Android
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>
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" />