How to Implement AssistChip in Jetpack Compose?

In this article, we’ll learn how to implement the Material 3 AssistChip in Jetpack Compose.

Prerequisites:

• Text API (with Examples)

What is Assist Chip in Android?

Assist chips function as though the user asked an assistant to complete the action, for example, setting an alarm or adding an event to the calendar.

Example:

Let’s see how to implement them in the Android Studio.

First, create an empty Compose project and add the following dependency in the app level gradle file. We need it for the icons.

// this is the material icon dependency
// its size is large, so enable proguard if you want to use it in the production
implementation "androidx.compose.material:material-icons-extended"

Next, open the MainActivity.kt. Create a MyUI() composable and call it from the onCreate() method. We’ll write our code in it.

// add the following packages
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.LightMode
import androidx.compose.material.icons.outlined.ShoppingBag
import androidx.compose.material.icons.outlined.Timer
import androidx.compose.material3.AssistChip
import androidx.compose.material3.AssistChipDefaults
import androidx.compose.material3.ChipBorder
import androidx.compose.material3.ElevatedAssistChip
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(all = 6.dp)
                    ) {
                        MyUI()
                    }
                }
            }
        }
    }
}

@Composable
fun MyUIeddd() {

}

Jetpack Compose provides AssistChip() method:

@ExperimentalMaterial3Api
@Composable
fun AssistChip(
    onClick: () -> Unit,
    label: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = AssistChipDefaults.shape,
    colors: ChipColors = AssistChipDefaults.assistChipColors(),
    elevation: ChipElevation? = AssistChipDefaults.assistChipElevation(),
    border: ChipBorder? = AssistChipDefaults.assistChipBorder(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
)

onClick – It is a lambda that gets called when this chip is clicked.

label – Text on this chip. We use Text() composable to add the label.

modifier – The Modifier to be applied to this chip.

enabled – If the chip is enabled or not. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

leadingIcon – Optional icon at the start of the chip, preceding the label text.

trailingIcon – Optional icon at the end of the chip.

shape – Shape of this chip.

colors – Text, icon, and background colors of this chip.

elevation – The shadow below the chip.

border – The border to draw around the container of this chip. Pass null for no border.

interactionSource – It is used to observe and customize the interactions. For example, we can disable the ripple effect.

Simple AssistChip Example:

The onClick and label are mandatory parameters.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    AssistChip(
        onClick = {
            Toast.makeText(contextForToast, "Assist Chip", Toast.LENGTH_SHORT).show()
        },
        label = { Text("Assist Chip") }
    )
}

Output:

List of AssistChips:

To display multiple chips, put them in a LazyRow.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    val chipItems = listOf("Turn on lights", "Set alarm", "Close blinds")

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(chipItems) { chipItem ->
            AssistChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                onClick = {
                    Toast.makeText(contextForToast, chipItem, Toast.LENGTH_SHORT).show()
                },
                label = { Text(chipItem) }
            )
        }
    }
}

Output:

Related: Messages UI using LazyColumn

AssistChips with Icons:

We can display both the icon and label using a simple data class.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    val chipItems = returnChipItemsList()

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(chipItems) { chipItem ->
            AssistChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                onClick = {
                    Toast.makeText(contextForToast, chipItem.label, Toast.LENGTH_SHORT).show()
                },
                label = { Text(chipItem.label) },
                leadingIcon = {
                    Icon(
                        imageVector = chipItem.icon,
                        contentDescription = null,
                        modifier = Modifier.size(size = AssistChipDefaults.IconSize)
                    )
                }
            )
        }
    }
}

private fun returnChipItemsList(): MutableList<ChipItem> {
    val chipItems = mutableListOf<ChipItem>()

    chipItems.add(
        ChipItem(
            label = "Turn on lights",
            icon = Icons.Outlined.LightMode
        )
    )

    chipItems.add(
        ChipItem(
            label = "Set alarm",
            icon = Icons.Outlined.Timer
        )
    )

    chipItems.add(
        ChipItem(
            label = "Add to cart",
            icon = Icons.Outlined.ShoppingBag
        )
    )
    return chipItems
}

data class ChipItem(
    val label: String,
    val icon: ImageVector
)

Output:

AssistChips Colors:

There are two methods to change the colors: assistChipColors() and assistChipBorder().

Using assistChipColors(), we can change the background, text, and icon colors.

@Composable
public final fun assistChipColors(
    containerColor: Color,
    labelColor: Color,
    leadingIconContentColor: Color,
    trailingIconContentColor: Color,
    disabledContainerColor: Color,
    disabledLabelColor: Color,
    disabledLeadingIconContentColor: Color,
    disabledTrailingIconContentColor: Color
): ChipColors

In Material 3, containerColor represents the background color.

Using assistChipBorder(), we can customize the border.

@Composable
public final fun assistChipBorder(
    borderColor: Color,
    disabledBorderColor: Color,
    borderWidth: Dp
): ChipBorder

Example:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    val chipItems = returnChipItemsList()

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(chipItems) { chipItem ->
            AssistChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                onClick = {
                    Toast.makeText(contextForToast, chipItem.label, Toast.LENGTH_SHORT).show()
                },
                label = { Text(chipItem.label) },
                leadingIcon = {
                    Icon(
                        imageVector = chipItem.icon,
                        contentDescription = null,
                        modifier = Modifier.size(size = AssistChipDefaults.IconSize)
                    )
                },
                colors = AssistChipDefaults.assistChipColors(
                    containerColor = Color(0xFF37833b).copy(alpha = 0.1f), // background color
                    labelColor = Color(0xFF37833b), // text color
                    leadingIconContentColor = Color(0xFF37833b) // icon color
                ),
                border = AssistChipDefaults.assistChipBorder(
                    borderColor = Color(0xFF37833b),
                    borderWidth = 1.dp
                )
            )
        }
    }
}

private fun returnChipItemsList(): MutableList<ChipItem> {
    val chipItems = mutableListOf<ChipItem>()

    chipItems.add(
        ChipItem(
            label = "Turn on lights",
            icon = Icons.Outlined.LightMode
        )
    )

    chipItems.add(
        ChipItem(
            label = "Set alarm",
            icon = Icons.Outlined.Timer
        )
    )

    chipItems.add(
        ChipItem(
            label = "Add to cart",
            icon = Icons.Outlined.ShoppingBag
        )
    )
    return chipItems
}

data class ChipItem(
    val label: String,
    val icon: ImageVector
)

Output:

Related: Gradient Color Circle Animation in Jetpack Compose

ElevatedAssistChip:

There is another version of the AssistChip() called ElevatedAssistChip(). It comes with the Material 3 elevated style and takes the same parameters as AssistChip().

@ExperimentalMaterial3Api
@Composable
fun ElevatedAssistChip(
    onClick: () -> Unit,
    label: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = AssistChipDefaults.shape,
    colors: ChipColors = AssistChipDefaults.elevatedAssistChipColors(),
    elevation: ChipElevation? = AssistChipDefaults.elevatedAssistChipElevation(),
    border: ChipBorder? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

Example:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    val chipItems = returnChipItemsList()

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(chipItems) { chipItem ->
            ElevatedAssistChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                onClick = {
                    Toast.makeText(contextForToast, chipItem.label, Toast.LENGTH_SHORT).show()
                },
                label = { Text(chipItem.label) },
                leadingIcon = {
                    Icon(
                        imageVector = chipItem.icon,
                        contentDescription = null,
                        modifier = Modifier.size(size = AssistChipDefaults.IconSize)
                    )
                },
                colors = AssistChipDefaults.elevatedAssistChipColors(
                    containerColor = Color(0xFFC23564).copy(alpha = 0.2f), // background color
                    labelColor = Color(0xFFC23564), // text color
                    leadingIconContentColor = Color(0xFFC23564)
                ),
                elevation = AssistChipDefaults.elevatedAssistChipElevation(
                    defaultElevation = 0.dp // removing the shadow
                ),
                border = null
            )
        }
    }
}

private fun returnChipItemsList(): MutableList<ChipItem> {
    val chipItems = mutableListOf<ChipItem>()

    chipItems.add(
        ChipItem(
            label = "Turn on lights",
            icon = Icons.Outlined.LightMode
        )
    )

    chipItems.add(
        ChipItem(
            label = "Set alarm",
            icon = Icons.Outlined.Timer
        )
    )

    chipItems.add(
        ChipItem(
            label = "Add to cart",
            icon = Icons.Outlined.ShoppingBag
        )
    )
    return chipItems
}

data class ChipItem(
    val label: String,
    val icon: ImageVector
)

Output:

This is all about Material 3 AssistChip in Jetpack Compose. I hope you have learned something new. If you have any doubts, leave a comment below.

For more information, look at the Material and Android docs.

Related Articles: