DEV Community

myougaTheAxo
myougaTheAxo

Posted on

Badge完全ガイド — BadgedBox/数値バッジ/ドットバッジ/カスタム

#android #kotlin #jetpackcompose #mobile

この記事で学べること

Badge（BadgedBox、数値バッジ、ドットバッジ、カスタムバッジ）を解説します。

BadgedBox 

@Composable
fun BadgeExamples() {
    Row(
        Modifier.padding(16.dp),
        horizontalArrangement = Arrangement.spacedBy(32.dp)
    ) {
        // 数値バッジ
        BadgedBox(badge = { Badge { Text("3") } }) {
            Icon(Icons.Default.Email, "メール")
        }

        // ドットバッジ
        BadgedBox(badge = { Badge() }) {
            Icon(Icons.Default.Notifications, "通知")
        }

        // 大きい数値
        BadgedBox(badge = { Badge { Text("99+") } }) {
            Icon(Icons.Default.ShoppingCart, "カート")
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

NavigationBarバッジ 

@Composable
fun NavBarWithBadge() {
    var selected by remember { mutableIntStateOf(0) }
    val badges = listOf(0, 5, 0) // 未読数

    NavigationBar {
        listOf(
            Triple("ホーム", Icons.Default.Home, Icons.Outlined.Home),
            Triple("通知", Icons.Default.Notifications, Icons.Outlined.Notifications),
            Triple("設定", Icons.Default.Settings, Icons.Outlined.Settings)
        ).forEachIndexed { index, (label, filled, outlined) ->
            NavigationBarItem(
                selected = selected == index,
                onClick = { selected = index },
                icon = {
                    BadgedBox(
                        badge = {
                            if (badges[index] > 0) Badge { Text("${badges[index]}") }
                        }
                    ) {
                        Icon(if (selected == index) filled else outlined, label)
                    }
                },
                label = { Text(label) }
            )
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

カスタムバッジ 

@Composable
fun CustomBadge(count: Int, content: @Composable () -> Unit) {
    Box {
        content()
        if (count > 0) {
            Box(
                modifier = Modifier
                    .align(Alignment.TopEnd)
                    .offset(x = 6.dp, y = (-6).dp)
                    .size(20.dp)
                    .background(Color.Red, CircleShape),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    if (count > 99) "99+" else "$count",
                    color = Color.White,
                    fontSize = 10.sp,
                    fontWeight = FontWeight.Bold
                )
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

まとめ

API 用途
BadgedBox バッジ付きアイコン
Badge Material3バッジ
Badge { Text() } 数値バッジ
Badge() ドットバッジ
  • BadgedBoxでアイコンにバッジ付与
  • Badge { Text("数値") }で未読数表示
  • Badge()で新着ドット表示
  • NavigationBar+BadgedBoxでナビバーバッジ

8種類のAndroidアプリテンプレート（Material3 UI対応）を公開しています。

テンプレート一覧 → Gumroad

関連記事：

I publish 8 Android app templates on Gumroad.

Browse templates → Gumroad

Top comments (0)