Overflow Indicator In Jetpack Compose

Grab a coffee ☕, and let me show you how to add an overflow indicator when you have too many items in your row.

Make sure that you’re using this Compose UI version in the libs.versions.toml .

[versions]
ui = "1.7.0-beta02"

[libraries]
androidx-ui = { group = "androidx.compose.ui", name = "ui" }

And add this to your build.gradle from the app module.

dependencies {
    implementation(libs.androidx.ui)
}

Now let’s go to the MainActivity and start by creating a composable for our items.

@Composable
fun Item(
    text: String,
    color: Color,
    modifier: Modifier = Modifier
) {
    Box(
        modifier = Modifier
            .size(90.dp)
            .background(color, shape = CircleShape),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = text,
            fontSize = 28.sp
        )
    }
}

Let’s create the items.

val items = remember {
    (0..10).toList()
}

Now to create the overflow indicator, we need to use the ContextualFlowRowOverflow.expandIndicator .