Jetpack Compose Material 3 SuggestionChip

SuggestionChip in Jetpack Compose (with Examples)

by
Jetpack Compose Material 3 SuggestionChip

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

Prerequisites:

What is a Suggestion Chip?

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

Example:

SuggestionChip Colors

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.DateRange
import androidx.compose.material.icons.outlined.Face
import androidx.compose.material.icons.outlined.Lyrics
import androidx.compose.material.icons.outlined.MusicNote
import androidx.compose.material3.ElevatedSuggestionChip
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SuggestionChip
import androidx.compose.material3.SuggestionChipDefaults
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 MyUI() {

}

Jetpack Compose provides SuggestionChip() method:

@ExperimentalMaterial3Api
@Composable
fun SuggestionChip(
    onClick: () -> Unit,
    label: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    icon: @Composable (() -> Unit)? = null,
    shape: Shape = SuggestionChipDefaults.shape,
    colors: ChipColors = SuggestionChipDefaults.suggestionChipColors(),
    elevation: ChipElevation? = SuggestionChipDefaults.suggestionChipElevation(),
    border: ChipBorder? = SuggestionChipDefaults.suggestionChipBorder(),
    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.

icon – An optional icon at the start of the chip, preceding the label text.

shape – Shape of this chip.

colors – Text, icon, and background colors of this chip in different states.

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.

Note: As of today, SuggestionChip() is experimental.

Simple SuggestionChip Example:

The onClick and label parameters are mandatory.

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

    SuggestionChip(
        onClick = {
            Toast.makeText(contextForToast, "Suggestion Chip", Toast.LENGTH_SHORT).show()
        },
        label = {
            Text(text = "Suggestion Chip")
        }
    )
}

Output:

Simple SuggestionChip Example

List of SuggestionChips:

To display multiple chips, put them in a LazyRow.

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

    val chipItems = listOf("Song name", "Lyrics", "Date released", "Author")

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

Output:

List of SuggestionChips

Related: Lazy Staggered Grids in Jetpack Compose

SuggestionChips with Icons:

We can easily add the icon using the icon parameter and Icon() composable.

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

    val chipItems = returnChipItemsList()

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

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

    chipItems.add(
        ChipItem(
            label = "Song name",
            icon = Icons.Outlined.MusicNote
        )
    )

    chipItems.add(
        ChipItem(
            label = "Lyrics",
            icon = Icons.Outlined.Lyrics
        )
    )

    chipItems.add(
        ChipItem(
            label = "Date released",
            icon = Icons.Outlined.DateRange
        )
    )

    chipItems.add(
        ChipItem(
            label = "Author",
            icon = Icons.Outlined.Face
        )
    )

    return chipItems
}

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

Output:

SuggestionChips with Icons

SuggestionChip Colors:

There are two methods to change the colors: suggestionChipColors() and suggestionChipBorder().

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

@Composable
public final fun suggestionChipColors(
    containerColor: Color,
    labelColor: Color,
    iconContentColor: Color,
    disabledContainerColor: Color,
    disabledLabelColor: Color,
    disabledIconContentColor: Color
): ChipColors

In Material 3, containerColor represents the background color.

Using the suggestionChipBorder(), we can customize the border.

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

Example:

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

    val chipItems = returnChipItemsList()

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(chipItems) { chipItem ->
            SuggestionChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                onClick = {
                    Toast.makeText(contextForToast, chipItem.label, Toast.LENGTH_SHORT).show()
                },
                label = {
                    Text(text = chipItem.label)
                },
                icon = {
                    Icon(
                        imageVector = chipItem.icon,
                        contentDescription = null,
                        modifier = Modifier.size(size = SuggestionChipDefaults.IconSize)
                    )
                },
                colors = SuggestionChipDefaults.suggestionChipColors(
                    containerColor = highlightColor.copy(alpha = 0.1f), // background color
                    labelColor = highlightColor, // text color
                    iconContentColor = highlightColor // icon color
                ),
                border = SuggestionChipDefaults.suggestionChipBorder(
                    borderColor = highlightColor,
                    borderWidth = 1.dp
                )
            )
        }
    }
}

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

    chipItems.add(
        ChipItem(
            label = "Song name",
            icon = Icons.Outlined.MusicNote
        )
    )

    chipItems.add(
        ChipItem(
            label = "Lyrics",
            icon = Icons.Outlined.Lyrics
        )
    )

    chipItems.add(
        ChipItem(
            label = "Date released",
            icon = Icons.Outlined.DateRange
        )
    )

    chipItems.add(
        ChipItem(
            label = "Author",
            icon = Icons.Outlined.Face
        )
    )

    return chipItems
}

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

Output:

SuggestionChip Colors

Related: Button with Gradient Border in Jetpack Compose

ElevatedSuggestionChip:

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

@ExperimentalMaterial3Api
@Composable
fun ElevatedSuggestionChip(
    onClick: () -> Unit,
    label: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    icon: @Composable (() -> Unit)? = null,
    shape: Shape = SuggestionChipDefaults.shape,
    colors: ChipColors = SuggestionChipDefaults.elevatedSuggestionChipColors(),
    elevation: ChipElevation? = SuggestionChipDefaults.elevatedSuggestionChipElevation(),
    border: ChipBorder? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
)

Example:

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

    val chipItems = returnChipItemsList()

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(chipItems) { chipItem ->
            ElevatedSuggestionChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                onClick = {
                    Toast.makeText(contextForToast, chipItem.label, Toast.LENGTH_SHORT).show()
                },
                label = {
                    Text(text = chipItem.label)
                },
                icon = {
                    Icon(
                        imageVector = chipItem.icon,
                        contentDescription = null,
                        modifier = Modifier.size(size = SuggestionChipDefaults.IconSize)
                    )
                },
                colors = SuggestionChipDefaults.elevatedSuggestionChipColors(
                    labelColor = highlightColor, // text color
                    iconContentColor = highlightColor // icon color
                ),
                elevation = SuggestionChipDefaults.elevatedSuggestionChipElevation(
                    defaultElevation = 2.dp
                ) ,
                border = null
            )
        }
    }
}

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

    chipItems.add(
        ChipItem(
            label = "Song name",
            icon = Icons.Outlined.MusicNote
        )
    )

    chipItems.add(
        ChipItem(
            label = "Lyrics",
            icon = Icons.Outlined.Lyrics
        )
    )

    chipItems.add(
        ChipItem(
            label = "Date released",
            icon = Icons.Outlined.DateRange
        )
    )

    chipItems.add(
        ChipItem(
            label = "Author",
            icon = Icons.Outlined.Face
        )
    )

    return chipItems
}

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

Output:

ElevatedSuggestionChip

This is all about Material 3 SuggestionChip 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:

Leave a Comment