Draw a circle behind BadgeBox to make it more visible, circle getting too small - kotlin

Question

My code:
IconButton(onClick = { /*TODO*/ }) {
BadgedBox(
modifier = Modifier.drawBehind
{
drawCircle(
color = Color.LightGray,
center = Offset(
this.size.maxDimension / 2,
this.size.maxDimension / 2
),
radius = 10f
)
},
badge = { Badge(modifier = Modifier.size(12.dp)) {} },
) {
Icon(imageVector = Icons.Outlined.Notifications, contentDescription = "")
}
Current results:
The light-gray circle, shall cover in background behind and look like a circular button. But, currently, it doesn't look like that. I tried with maxDimension. I am doing this in Kotlin with Jetpack Compose.
Desired:
EDIT: Added this line,
modifier = Modifier.clip(CircleShape).background(Color.LightGray)
Now it looks like this:
However, this looks very strange and does not provide the desired results.

Answer 1

You can do it using one box that covers both content and notification circle
#Composable
private fun MyBadgeBox(
badge: #Composable () -> Unit,
notificationRadius: Dp = 8.dp,
notification: Boolean
) {
Box {
Box(modifier = Modifier.padding(notificationRadius)) {
badge()
}
Box(
modifier = if (notification) Modifier
.padding(notificationRadius / 2)
.align(Alignment.TopEnd)
.size(notificationRadius * 2)
.drawBehind {
drawCircle(Color.Red)
} else Modifier)
}
}
Usage
val modifier = Modifier
.size(40.dp)
.background(
color = Color.LightGray.copy(.5f),
shape = CircleShape
)
.clip(CircleShape)
.clickable { }
.padding(6.dp)
MyBadgeBox(
badge = {
Icon(
modifier = modifier,
imageVector = Icons.Outlined.Notifications,
contentDescription = ""
)
}, notification = false
)
MyBadgeBox(
badge = {
Icon(
modifier = modifier,
imageVector = Icons.Outlined.Notifications,
contentDescription = ""
)
}, notification = true
)
}
Result

Answer 2

You can use something like:
BadgedBox(
badge = { Badge(modifier = Modifier.size(12.dp)) {} },
) {
val radius = 16.dp
val shape = RoundedCornerShape(radius)
Box(
contentAlignment= Alignment.Center,
modifier = Modifier
.defaultMinSize(minWidth = radius * 2, minHeight = radius * 2)
.background(
color = Color.LightGray,
shape = shape
)
.clip(shape)
,
) {
Icon(imageVector = Icons.Outlined.Notifications, contentDescription = "")
}
}