[android/kotlin] Chip Button 만들기

먼저 배경색부터 지정해주자

res - color- chip_bg_state_list.xml

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

</selector>

선택했을 때는 checked="true" 상태이며 그 이외는 아래것으로 된다.

텍스트도 변경해준다.

res - color - chip_text_state_list.xml

<?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/black"/>
    <item android:state_checked="false"
        android:color="@color/white"/>

</selector>

마찬가지로 checked=true가 선택됐을 때다.

그다음엔 style에서 Chip의 스타일을 지정한다.

1.input / 2.choice / 3.filter / 4.action )이 중 어떤 스타일을 사용하며 커스텀을함에 따라서 다양하게 활용할 수 있다.

res-values -style

 <style name="CustomChipChoice." parent="@style/Widget.MaterialComponents.Chip.Filter">
        <item name="chipBackgroundColor" >@color/chip_bg_state_list</item>
        <item name="android:textColor" >@color/chip_text_state_list</item>

    </style>

원하는 layout에 적용시킨다.

        <com.google.android.material.chip.Chip
            android:id="@+id/all_chip"
            android:layout_width="55dp"
            android:layout_height="40dp"
            android:textSize="12sp"
            android:text="전체"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:layout_marginLeft="20dp"
            app:layout_constraintStart_toStartOf="@+id/view2"
            app:layout_constraintTop_toBottomOf="@+id/view2" />


        <com.google.android.material.chip.Chip
            android:id="@+id/game_chip"
            android:layout_width="55dp"
            android:layout_height="40dp"
            android:layout_marginLeft="5dp"
            android:textSize="12sp"
            android:text="게임"
            app:layout_constraintStart_toEndOf="@+id/all_chip"
            app:layout_constraintTop_toTopOf="@+id/all_chip" />


</LinearLayout>

참조🤞
링크텍스트