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 : -
.png)