Jetpack Compose Chips

Jetpack Compose, the modern UI toolkit for Android app development, offers a powerful and intuitive way to build user interfaces. While it initially lacked a built-in chip component, Jetpack Compose has evolved to include chips, providing a convenient solution for UI tagging and selection. In this blog, we will delve into the world of chips in Jetpack Compose, discussing their implementation.

Table of Contents

What are Chips?

Chips are compact UI elements used to represent tags, attributes, or choices. They allow users to select or remove items with ease, providing an intuitive and visually appealing interface. There are four types of chips:

Types of chips

Assist chip
Filter chip
Input chip
Suggestion chip

1. Assist Chip

To create an assist chip, use the Chip composable.

AssistChip(
            onClick = { },
            label = { Text(text = "Pick Date") },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.DateRange,
                    contentDescription = null
                )
            }
        )

onClick – This lambda is called when the user clicks on the chip.

label – This parameter represents the text on the chip.

leadingIcon – It represents an icon at the start or before the label on the chip.

Some important parameters of Chip

1. enabled

This parameter controls the enabled state of the chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

AssistChip(
            onClick = { },
            label = { Text(text = "Pick Date") },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.DateRange,
                    contentDescription = null
                )
            },
            enabled = false
        )

2. trailingIcon

This parameter places an optional icon at the end of the chip.

AssistChip(
            onClick = { },
            label = { Text(text = "Pick Date") },
            trailingIcon = {
                Icon(
                    imageVector = Icons.Default.DateRange,
                    contentDescription = null
                )
            }
        )

3. shape

It defines the shape of this chip’s container, border and shadow.

AssistChip(
            onClick = { },
            label = { Text(text = "Pick Date") },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.DateRange,
                    contentDescription = null
                )
            },
            shape = CircleShape
        )

Custom Shape

Let’s play with a custom shape.

AssistChip(
            onClick = { },
            label = { Text(text = "Pick Date") },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.DateRange,
                    contentDescription = null
                )
            },
            shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp)
        )

4. colors

This parameter defines the colour of the chip container and its content.

AssistChip(
            onClick = { },
           ......
            colors = AssistChipDefaults.assistChipColors(
                containerColor = Color.Green,
                labelColor = Color.Magenta,
                leadingIconContentColor = Color.Yellow
            )
        )

5. elevation

It is used to resolve the elevation for this chip in different states. This controls the size of the shadow below the chip.

6. border

This parameter defines the border of the chips.

AssistChip(
    onClick = { },
   ....
    border = AssistChipDefaults.assistChipBorder(
        borderColor = Color.Green,
        borderWidth = 2.dp
    )
)

NOTE: All the parameters of all the types of chips are almost the same that’s why we will be showing only the invocation of the other three types of chips.

2. Filter Chip

Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes.

var isSelected by remember { mutableStateOf(false) }
FilterChip(
            selected = isSelected,
            onClick = { },
            label = { Text(text = "Pick Date") },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.DateRange,
                    contentDescription = null
                )
            }
        )

3. Input chip

Input chips represent discrete pieces of information entered by a user.

var isSelected by remember { mutableStateOf(false) }
            InputChip(
                selected = isSelected,
                onClick = { },
                label = { Text(text = "Pick Date") },
                leadingIcon = {
                    Icon(
                        imageVector = Icons.Default.DateRange,
                        contentDescription = null
                    )
                }
            )

Output: The output is the same as the above-shown images.

4. Suggestion Chip

Suggestion chips help narrow a user’s intent by presenting dynamically generated suggestions, such as possible responses or search filters.

SuggestionChip(
                onClick = { },
                label = { Text(text = "Pick Date") },
                icon = {
                    Icon(
                        imageVector = Icons.Default.DateRange,
                        contentDescription = null
                    )
                }
            )

Output: The output is the same as the above-shown images.

The ability to present and manage complex data in a concise and interactive manner has empowered developers to create more intuitive and user-friendly interfaces. Whether it’s handling tags, filtering options, or user selections, chips offer a versatile solution that simplifies the process and enhances the overall user experience.

Rating Bar in Jetpack Compose

Material 3

Happy Composing 🙂