[Android/Compose] Android Chip 사용법

안녕하세요~ 🎵 오늘은 Android에서 Chip을 사용하는 방법을 정리해보려고 합니다
앱을 사용하다 보면 아래와 같은 UI를 종종 볼 수 있습니다

네이버 앱 이미지

이러한 요소를 Chip이라고 부릅니다!
이번 글에서는 Chip의 정의와 종류 그리고 구현하는 방법까지 다뤄보겠습니다 🧐

 

✏️ Chip이란?

🔹 Chip의 정의

Chip이란 Material Design 시스템에서 제공하는 UI 컴포넌트로
태그, 카테고리, 선택지, 액션 등 작은 정보 단위를 시각적으로 표현할 때 사용합니다

 
📌 Chip을 사용하면 다음과 같은 장점이 있어요:

• 간결한 정보 표현
• 사용자의 입력/선택 유도
• 공간 절약

 

🔹 Chip의 종류

종류	설명	예시
Assist Chip	액션을 보조하는 버튼 형태	"주소 검색" 버튼
Filter Chip	다중 선택 가능한 필터	관심사 선택, 옵션 다중 선택
Input Chip	사용자가 추가/삭제 가능한 태그	이메일 앱의 수신자 목록
Suggestion Chip	사용자의 입력에 따른 추천	검색어 추천

 

🔹 Chip 스타일 커스터마이징하기

Chip은 기본 스타일 외에도 색상, border, shape, padding, elevation 등을 다양하게 지정할 수 있습니다

FilterChip(
    selected = true,
    onClick = {},
    label = { Text("Custom Chip") },
    colors = FilterChipDefaults.filterChipColors(
        containerColor = Color(0xFFBBDEFB), // 배경
        labelColor = Color.Black, // 텍스트
        selectedContainerColor = Color(0xFF1976D2), // 선택 시 배경
        selectedLabelColor = Color.White // 선택 시 텍스트
    ),
    border = FilterChipDefaults.filterChipBorder(
        borderColor = Color.Gray,
        borderWidth = 1.dp
    ),
    shape = RoundedCornerShape(16.dp),
    modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
    elevation = FilterChipDefaults.elevatedFilterChipElevation(
        defaultElevation = 2.dp,
        selectedElevation = 6.dp
    )
)

✏️ Compose에서 Chip 구현 방법

🔸  AssistChip

AssistChip은 사용자를 특정 액션이나 흐름으로 유도할 때 사용합니다

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "clicked") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                imageVector = Icons.Filled.Settings,
                contentDescription = null,
                modifier = Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}

 

🔸  FilterChip

FilterChip은 필터 선택이 필요하므로 선택 여부를 기억할 수 있는 상태값이 필요합니다

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = { Text("Filter chip") },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}

 

👩🏻‍🎓 FilterChip 단일 선택 구현하기

FilterChip은 다중 선택이 기본이지만 단일 선택처럼 구현하고 싶다면
상태를 List 대신 하나의 값으로 관리하면 됩니다!

1️⃣ 다중 선택 예시 - 선택된 항목을 Set<String> 등으로 관리

var selectedItems by remember { mutableStateOf(setOf<String>()) }

FilterChip(
    selected = selectedItems.contains("Option 1"),
    onClick = {
        selectedItems = if (selectedItems.contains("Option 1")) {
            selectedItems - "Option 1"
        } else {
            selectedItems + "Option 1"
        }
    },
    label = { Text("Option 1") }
)

 

2️⃣ 단일 선택 예시 - 선택된 항목을 하나의 String? 변수로 관리

var selectedOption by remember { mutableStateOf<String?>(null) }

FilterChip(
    selected = selectedOption == "Option 1",
    onClick = { selectedOption = "Option 1" },
    label = { Text("Option 1") }
)

 

 

🔸  InputChip

InputChip은 이메일 앱에서 수신자를 입력하거나 태그를 추가할 때 자주 사용됩니다

간단한 예시로 TextField로 입력받은 텍스트를 Chip 형태로 보여주도록 구현했습니다

@Composable
fun InputChipExample() {
    var text by remember { mutableStateOf("") }
    var input by remember { mutableStateOf(listOf<String>()) }

    Column(modifier = Modifier.padding(16.dp)) {
        Row {
            TextField(
                value = text,
                onValueChange = { text = it },
                label = { Text("Enter text") },
                modifier = Modifier.weight(1f)
            )

            Spacer(modifier = Modifier.width(8.dp))

            Button(
                onClick = {
                    if (text.isNotBlank()) {
                        input = input + text
                        text = ""
                    }
                }
            ) {
                Text("Add")
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        Row {
            input.forEach { item ->
                InputChip(
                    onClick = { },
                    label = { Text(text = item) },
                    selected = false,
                    trailingIcon = {
                        IconButton(onClick = { input = input - item }) {
                            Icon(
                                Icons.Default.Close,
                                contentDescription = "Remove"
                            )
                        }
                    }
                )
            }
        }
    }
}

 

🔸  Suggestion Chip

SuggestionChip은 사용자의 선택을 돕기 위해 추천 옵션을 보여줄 때 사용합니다
예를 들어 AI 챗봇 앱에서 최근 메시지에 대한 추천 답변을 SuggestionChip으로 제공할 수 있습니다

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}

 

✨ Chip 배치 방법

Chip을 배치할 때는 Row와 Column을 사용할 수도 있지만
FlowRow와 LazyRow를 사용하면 훨씬 깔끔하게 배치할 수 있습니다!

• FlowRow: Chip이 화면 너비를 초과하면 자동 줄바꿈
• LazyRow: 가로 스크롤 가능한 리스트 형태

// FlowRow 예시
FlowRow(
    mainAxisSpacing  = 8.dp,
    crossAxisSpacing = 8.dp
) {
    chipItems.forEach { item ->
        InputChipItem(label = item, onRemove = { })
    }
}

// LazyRow 예시
LazyRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
    items(chipItems) { item ->
        InputChipItem(label = item, onRemove = { })
    }
}

 

📌 참고 자료

• https://developer.android.com/develop/ui/compose/components/chip?hl=ko
• https://m3.material.io/components/chips/overview