Hello guys. I am trying to add badge on top of tab...
# compose
j
Hello guys. I am trying to add badge on top of tab. Any idea how to achieve it with material3 Tab?
j
cool. this is what tab expect
Copy code
@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?
f
Wrap the tab in
BadgeBox
maybe 🤔 I've never done it, just guessing
Have you found the solution? If so, please share it here for future reference 🙏
j
no i did not…. yet
j
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)
Copy code
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 :)
j
this could work but badge position is not ok. still it needs some work.
j
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 :)