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

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 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 = "")
        }
    }

Answer 2

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