Hi everyone i'm trying to add a badge to IconButto...
# compose-android
h
Hi everyone i'm trying to add a badge to IconButton using M3 1.1.0
Copy code
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun WalletTopAppBar(
    messagesCount: Int = 3,
    navigateToNotifications: () -> Unit = {  }
) {
    TopAppBar(
        title = {
            Text(
                text = stringResource(id = R.string.app_bar_title)
            )
        },
        navigationIcon = {
            Icon(
                modifier = Modifier
                    .size(size = 65.dp)
                    .graphicsLayer(
                        shape = CircleShape,
                        clip = true
                    ),
                painter = painterResource(id = R.drawable.ic_splash_screen),
                contentDescription = null
            )
        },
        actions = {
            BadgedBox(
                modifier = Modifier,
                badge = {
                    Badge(
                        contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
                        containerColor = MaterialTheme.colorScheme.primaryContainer,
                        content = {
                            Text(
                                text = messagesCount.toString()
                            )
                        }
                    )
                },
                content = {
                    IconButton(
                        onClick = navigateToNotifications,
                        content = {
                            Icon(
                                Icons.Filled.Notifications,
                                contentDescription = null
                            )
                        }
                    )
                }
            )
        }
    )
}
the record
d
Can you please move everything but your specific question into the thread?
h
lock how the badge locks in the record
d
Could you please move the video and the code snippet into this thread?
h
Copy code
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun WalletTopAppBar(
    messagesCount: Int = 3,
    navigateToNotifications: () -> Unit = {  }
) {
    TopAppBar(
        title = {
            Text(
                text = stringResource(id = R.string.app_bar_title)
            )
        },
        navigationIcon = {
            Icon(
                modifier = Modifier
                    .size(size = 65.dp)
                    .graphicsLayer(
                        shape = CircleShape,
                        clip = true
                    ),
                painter = painterResource(id = R.drawable.ic_splash_screen),
                contentDescription = null
            )
        },
        actions = {
            BadgedBox(
                modifier = Modifier,
                badge = {
                    Badge(
                        contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
                        containerColor = MaterialTheme.colorScheme.primaryContainer,
                        content = {
                            Text(
                                text = messagesCount.toString()
                            )
                        }
                    )
                },
                content = {
                    IconButton(
                        onClick = navigateToNotifications,
                        content = {
                            Icon(
                                Icons.Filled.Notifications,
                                contentDescription = null
                            )
                        }
                    )
                }
            )
        }
    )
}
198 Views