Material Custom Style Chip

Material Chip 본문에 적혀있는 설명은 이러하다

칩을 통해 사용자는 정보를 입력하고, 선택하고, 콘텐츠를 필터링하거나, 작업을 트리거할 수 있습니다.

 

Chip 중 Filter Chip을 Custom 할 것이다.

FIlter Chip

 

 

Chip의 배경색, 글자 색, 체크 색깔을 Custom 할 것이다. 결과물은 이러하다.

 

 

배경색부터 지정해보자. res/color/chip_bg_state_list.xml

 

state_checked가 true인 아이템 color를 선택되었을 때 바뀌었으면 하는 색깔을 지정해주고, 

다른 아이템은 선택되지 않았을때의 색깔을 지정해준다.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/secondaryColor" android:state_checked="true" />
    <item android:color="@color/primaryLightColor" />
</selector>

 

글자 색을 지정해준다. res/color/chip_text_state_list

설명은 배경색과 같다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true"
        android:color="@color/white" />
    <item android:state_checked="false"
        android:color="@color/black" />
</selector>

 

android Drawable에 Vector Asset을 추가하여 check 아이콘을 추가해주고, 

Chip의 Checked Icon을 지정해준다.

 

아이콘 추가하는 방법

 

 

이제 Chip의 스타일을 지정한다. res/vaules/styles.xml

Material의 Filter 스타일을 Parent로 갖는 CustomChipStyle을 지정한다.

 

    <style name="CustomChipChoice" parent="@style/Widget.MaterialComponents.Chip.Filter">
    	// Chip의 BackgroundColor
        <item name="chipBackgroundColor">@color/chip_bg_state_list</item>
        // Chip의 textColor
        <item name="android:textColor">@color/chip_text_state_list</item>
        // Chip이 Check 되었을때의 icon
        <item name="checkedIcon">@drawable/ic_baseline_check_24</item>
    </style>

 

마지막으로, 사용하고 싶은 layout xml파일에 Chip을 추가해주고, 

style을 우리가 만든 CustomChipChoice로 지정해주면 끝!

<com.google.android.material.chip.Chip
    style="@style/CustomChipChoice"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="텍스트"/>