[안드로이드] Material Design의 Chips를 사용해보자

Google은 Material Design과 함께 별도로 안드로이드에서 바로 사용 가능한 Component들을 제공하고 있다.

 

이 중 필터링 설정이나 작은 텍스트를 보여주는데 유용한 Chips를 사용해봤다.

 

 

Material Design에서는 다음과 같은 네 종류의 Chip들을 정의하고 있다.

 

 

• Entry Chip
• Filter Chip
• Choice Chip
• Action Chip

Entry Chip은 복잡한 정보를 간략하게 보여 줄 때 사용하도록 권장하고 있고, chip 아이콘과 닫기 아이콘을 별도로 설정이 가능하다. 추가적으로 체크 상태(선택된 상태)를 지정이 가능하다.

 

Fliter Chip은 검색 결과나 내용등에 필터를 걸 때 사용하도록 권장하는 chip이다.  추가적으로 체크 상태(선택된 상태)를 지정이 가능하다.

 

Choice Chip은 한정된 chip 갯수 중에서 단일 선택을 수행할 때 사용하도록 권장하고 있다. 항상 체크 상태를 지정하게 된다.

 

Action Chip은 별도의 설정을 해주지 않을 경우 기본으로 설정되는 chip이며, 어떤 Action을 수행하거나 컨텐츠의 주제등을 보여줄 때에 사용하는 것을 권장하고 있다. Chip 아이콘을 설정 가능하며, 체크상태를 지정할 수 없다는 특징이 있다.

---

 

그럼 직접 프로젝트에 구현해보자.

 

우선 Material 관련 컴포넌트 사용을 위해서는 gradle에 material 관련 라이브러리를 설정해준다.

    implementation 'com.google.android.material:material:1.2.0-alpha06'

 

다음 Chip을 보여주고자 하는 레이아웃에 아래와 같이 Chip 뷰를 추가한다.

 

아래의 Chip은 Action Chip으로 설정되어 있는데, style 옵션을 Widget.MaterialComponents.Chip 내에서 Entry, Filter, Choice, Action 중 지정해주면 각 Chip의 특성을 따르게 된다.

<com.google.android.material.chip.Chip
    style="@style/Widget.MaterialComponents.Chip.Action"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipIcon="@drawable/ic_action_24"
    android:text="@string/hello_world"/>

 

우선 단순한 구현은 레이아웃을 추가하는 대로 끝나게 된다. 

 

이외에 Chip을 직접 활용하기 위해서는 아무래도 선택이나 제거 등의 이벤트를 listen해야 할 텐데, 이를 총 세 개의 Listener를 활용해 listen이 가능하도록 제공하고 있다.

 

• setOnClickListener : 보통의 기본 뷰 onClickListener 사용이 가능하다.
• setOnCheckedChangeListener(OnCheckedChangeListener) : Chip의 체크 여부를 listen
• setOnCloseIconClickListener(OnClickListener): Chip의 닫기 아이콘이 활성화되어 있을 때, 닫기 아이콘의 클릭을 listen

그리고 부수적으로 Chip의 부모 뷰인 TextView가 혹 Right to left 정렬이 되어 있을 경우, Chip의 padding을 자연스럽게 적용하기 위해서 아래와 같은 설정을 추가로 해줄 것을 권장하고 있다.

 

이번에 모든 Chip 종류를 직접 적용해보고, 동적으로 Chip을 추가 및 제거가 가능하도록 구현을 해보았다.

 

이후에는 추가로 작업해서 필터링 기능을 시험 가능하도록 해볼까 싶다. (리사이클러뷰와 함께?)

 

아래는 Chip의 동적 추가 및 제거를 테스트하기 위해 적용한 코드이다.

...

var chipIndex = 0

binding.addChipButton.setOnClickListener {

            val chip = Chip(this).apply {
                text = "Chip $chipIndex"
                isCloseIconVisible = true

                setOnCloseIconClickListener {
                    binding.chipGroup.removeView(this)
                }
            }

            chipIndex++

            binding.chipGroup.addView(chip)
            binding.chipGroup.invalidate() // 현재 git 코드에 들어가 있으나 불필요해보임.
        }
        
        
...

 

텍스트 테마 및 버튼까지 Material style을 적용해주니 무언가 스타일이 정돈된 느낌이다.

 

< Full code > 

victory316/MaterialStudy

< Reference > 

Chips - Material Components for Android