Chip in Jetpack Compose

What are Chips?

Chips are used to show text, make selection and filter content or actions. It can be used to show multiple interactive elements together in the same area.

There are four types of chips, we can use:

1. Assist Chip - asked an assistant to complete the action.

2. Filter Chip - filter content or actions.

3. Input Chip -  

4. Suggestion Chip n- suggest users for actions or response.

Also read collapsing toolbar in jetpack compose

In this tutorial, We will learn to create Chips.

AssistChip

Copy this code →

 AssistChip(
            onClick = { /* Do something! */ },
            label = { Text("Assist Chip") },
            leadingIcon = {
                Icon(
                    Icons.Filled.Person,
                    contentDescription = "Localized description",
                    Modifier.size(AssistChipDefaults.IconSize)
                )
            }
        )

ElevatedAssistChip

Copy this code →

 ElevatedAssistChip(
            onClick = { /* Do something! */ },
            label = { Text("Assist Chip") },
            leadingIcon = {
                Icon(
                    Icons.Filled.Person,
                    contentDescription = "Localized description",
                    Modifier.size(AssistChipDefaults.IconSize)
                )
            }
        )

Filter Chip

Copy this code →

var selected by remember { mutableStateOf(false) }
        FilterChip(
            selected = selected,
            onClick = { selected = !selected },
            label = { Text("Filter chip") },
            leadingIcon = if (selected) {
                {
                    Icon(
                        imageVector = Icons.Filled.Done,
                        contentDescription = "Localized Description",
                        modifier = Modifier.size(FilterChipDefaults.IconSize)
                    )
                }
            } else {
                null
            }
        )

Elevated Filter Chip

Copy this code →

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

Input Chip

Copy this code →

var selected by remember { mutableStateOf(false) }
        InputChip(
            selected = selected,
            onClick = { selected = !selected },
            label = { Text("Input Chip") },
        )

Suggestion Chip

Copy this code →

 SuggestionChip(
            onClick = { /* Do something! */ },
            label = { Text("Suggestion Chip") }
        )

Elevated Suggestion Chip

Copy this code →

 ElevatedSuggestionChip(
            onClick = { /* Do something! */ },
            label = { Text("Suggestion Chip") }
        )

Lets Create a New Project and select Empty Activity In my case, application name is Coding Bihar you can use any other name.

MainActivity

Copy this code →

package com.example.codingbihar

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.codingbihar.ui.theme.CodingBiharTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CodingBiharTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    FilterChips()
                   }
                }
              }
         }
      }

Create a separate file for Card and named it as Filter Chips

FilterChips

Copy this code →

package com.example.codingbihar

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Done
import androidx.compose.material3.ElevatedFilterChip
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FilterChips() {
    Column(Modifier.fillMaxSize()) {
        var evenselected by remember {
            mutableStateOf(false)
        }
        var oddselected by remember { mutableStateOf(false) }
        Row(
            modifier = Modifier
                .padding(20.dp)
                .align(Alignment.CenterHorizontally)
        ) {
            ElevatedFilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "Even Only") },
                leadingIcon = if (evenselected) {
                    {
                        Icon(
                            imageVector = Icons.Filled.Done,
                            contentDescription = "Localized Description",
                            modifier = Modifier.size(FilterChipDefaults.IconSize)
                        )
                    }
                } else {
                    null
                }
            )
            ElevatedFilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "Odd Only") },
                leadingIcon = if (oddselected) {
                    {
                        Icon(
                            imageVector = Icons.Filled.Done,
                            contentDescription = "Localized Description",
                            modifier = Modifier.size(FilterChipDefaults.IconSize)
                        )
                    }
                } else {
                    null
                })
        }
            FilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "1") })
            FilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "2") })
            FilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "3") })
            FilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "4") })
            FilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "5") })
            FilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "6") })
            FilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "7") })
            FilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "8") })
            FilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "9") })
            FilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "10") })
        }
    }

OUTPUT : -