[Android] Chip과 ChipGroup

Chip

Chip은 입력이나 속성, 작업을 나타내는 대화형 압축 요소입니다.

이는 필터링 설정이나 작은 텍스트를 보여주는데 유용하게 사용됩니다.

 

Chip을 사용하기 위해서는 build.gradle에 Material Library가 추가되어 있어야 합니다.

implementation 'com.google.android.material:material:1.9.0'

 

ChipGroup

Chip만 사용할 경우 줄이 가득차면 다음 줄로 넘어가지 않고 계속해서 옆으로 생성됩니다.

이럴 때, ChipGroup 안에 Chip을 생성하면 알아서 다음 줄에 Chip을 생성됩니다.

ChipGroup을 사용하면 자동 개행이 적용되고, 여백을 한 번에 조정할 수도 있습니다.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/chipGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <com.google.android.material.chip.Chip
        android:id="@+id/chip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <!-- 계속 Chip 추가 가능 -->
    
</com.google.android.material.chip.ChipGroup>

 

Chip의 속성

• style : Chip의 스타일
  • Entry Chip
    • 복잡한 정보를 간략하게 보여 줄 때 사용하도록 권장
    • Chip 아이콘과 닫기 아이콘 별도로 설정 가능
    • 체크 상태(선택된 상태) 지정 가능
  • Filter Chip
    • 검색 결과나 내용 등에 필터를 걸 때 사용하도록 권장
    • 체크 상태(선택된 상태) 지정 가능
  • Action Chip
    • 별도의 설정을 해주지 않을 경우 기본으로 설정되는 Chip
    • 어떤 Action을 수행하거나 컨텐츠의 주제 등을 보여줄 때 사용하도록 권장
    • Chip 아이콘 설정 가능
    • 체크 상태(선택된 상태) 지정 불가능
  • Choice Chip
    
    • 단일 선택을 수행할 때 사용하도록 권장
    • 항상 체크 상태(선택된 상태) 지정
• app:chipBackgroundColor : Chip 버튼의 백그라운드 색 설정
• app:chipStrokeWidth : Chip 버튼의 테두리 굵기 설정
• app:chipStrokeColor : Chip 버튼의 테두리 색상 설정
• app:chipMinHeight : Chip 버튼의 최소 높이 설정
• app:chipxxxPadding : Chip 버튼의 패딩 값 설정 (start / end)
• android:checkable : Chip 버튼의 체크 표시 설정

 

ChipGroup의 속성

• app:singleSelection : ChipGroup 내에 포함된 Chip 중 하나만 선택 가능
• app:selectionRequired : ChipGroup 내에 포함된 Chip 중 무조건 하나 이상 선택
• app:chipSpacingxxx : Chip 버튼 간에 거리 설정 (vertical / horizontal)