Hello guys. I am trying to add badge on top of tab. Any idea how to achieve it with material3 Tab?

# compose

[Jasmin Fajkic]

Hello guys. I am trying to add badge on top of tab. Any idea how to achieve it with material3 Tab?

[Filip Wiesner]

Try the Badge component
https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Badge(androidx.compose.ui.M[…]hics.Color,kotlin.Function1)

[Jasmin Fajkic]

cool. this is what tab expect

@Composable
@ComposableInferredTarget
public fun Tab(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    text: @Composable() (() -> Unit)?,
    icon: @Composable() (() -> Unit)?,
    selectedContentColor: Color,
    unselectedContentColor: Color,
    interactionSource: MutableInteractionSource
): Unit

not sure where to apply badge?

[Filip Wiesner]

Wrap the tab in BadgeBox maybe 🤔 I've never done it, just guessing

[Filip Wiesner]

Have you found the solution? If so, please share it here for future reference 🙏

[Jasmin Fajkic]

no i did not…. yet

[Joel Denke]

https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Badge(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)

BadgedBox(
                badge = {
                    Badge {
                        val badgeNumber = "8"
                        Text(
                            badgeNumber,
                            modifier = Modifier.semantics {
                                contentDescription = "$badgeNumber new notifications"
                            }
                        )
                    }
                }) {
                Icon(
                    Icons.Filled.Star,
                    contentDescription = "Favorite"
                )
 }

Where Icon is, place Tab. So wrap Tab with BadgedBox and send in badge slot like above :)

[Jasmin Fajkic]

this could work but badge position is not ok. still it needs some work.

[Joel Denke]

Add Modifier.padding to badge. Otherwise recommend using navigationItem with default Google handling or custom badge. Its just a colored circle positioned in layered Box kind a :)

[Joel Denke]

See https://androidx.tech/artifacts/compose.material3/material3/1.0.0-alpha15-source/androidx/compose/material3/Badge.kt.html how to create your own ;)