Chip is a UI component that offers actions related to the main content. Let’s learn how to add a chip in Android using Jetpack Compose.
The Chip composable helps to create chips in compose. It has useful parameters such as onClick, border, colors, shape, leadingIcon, etc. See the following code snippet.
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ChipExample() {
Chip(
onClick = { /* Do something! */ },
border = ChipDefaults.outlinedBorder,
colors = ChipDefaults.outlinedChipColors(contentColor = Color.White, backgroundColor = Color.Red, leadingIconContentColor = Color.White),
leadingIcon = {
Icon(
Icons.Filled.Check,
contentDescription = "description"
)
}
) {
Text("Sample Chip")
}
}At the time of writing, Chip composable is experimental in nature. Following is the output of the Jetpack Compose Chip.
You may also refer the complete code given below.
package com.example.myapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
Surface(
color = MaterialTheme.colors.background,
modifier = Modifier.padding(20.dp)
) {
ChipExample()
}
}
}
}
}
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ChipExample() {
Chip(
onClick = { /* Do something! */ },
border = ChipDefaults.outlinedBorder,
colors = ChipDefaults.outlinedChipColors(contentColor = Color.White, backgroundColor = Color.Red, leadingIconContentColor = Color.White),
leadingIcon = {
Icon(
Icons.Filled.Check,
contentDescription = "description"
)
}
) {
Text("Sample Chip")
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyApplicationTheme {
ChipExample()
}
}I hope this Jetpack Compose tutorial to show Chip is helpful for you.
