Button Group

投稿日 2026/07/10 更新日 2026/08/17

投稿者 Manabu Nakamura

回閲覧 4 分で読めます

1⃣選択されたボタンの角が四角く，選択されていないボタンの角が丸いボタングループだけでなく，2⃣選択されたボタンの角が丸く，ボタングループの端の角が丸く，それ以外の角が四角いボタングループ（round connected button group），3⃣選択されたボタンの角が丸く，選択されていないボタンの角が四角いボタングループ（square connected button group）もあるようです（https://m3.material.io/components/button-groups/specs）．

standard button group：

選択されたボタンと隣接するボタンの幅が一時的に変化します（https://m3.material.io/components/button-groups/specs）．

1⃣選択されたボタンの角が四角く，選択されていないボタンの角が丸いボタングループです．

  
val themes = listOf(
    "0",
    "1",
    "2"
)
var selectedIndex by rememberSaveable {
    mutableIntStateOf(
        0
    )
}
ButtonGroup(
    {
        ButtonGroupDefaults.OverflowIndicator(
            it
        )
    }
) {
    themes.forEachIndexed { index, theme ->
        toggleableItem(
            selectedIndex == index,
            theme,
            {
                selectedIndex = index
            }
        )
    }
}

connected button group：

ボタングループをページの幅いっぱいに広げます（https://m3.material.io/components/button-groups/guidelines）．ボタンにツールチップを付けることができますが，ボタングループをページの幅いっぱいに広げ，ボタンを等幅にするのが面倒です．

shapesを設定しないと1⃣選択されたボタンの角が四角く，選択されていないボタンの角が丸いボタングループになります（が，仕様外でしょうか？）．shapesを設定すると2⃣選択されたボタンの角が丸く，ボタングループの端の角が丸く，それ以外の角が四角いボタングループ（round connected button group），3⃣選択されたボタンの角が丸く，選択されていないボタンの角が四角いボタングループ（square connected button group）になります．

  
Row(
    Modifier.fillMaxWidth(),
    Arrangement.spacedBy(
        ButtonGroupDefaults.ConnectedSpaceBetween
    )
) {
    val themes = listOf(
        "0",
        "1",
        "2"
    )
    var selectedIndex by rememberSaveable {
        mutableIntStateOf(
            0
        )
    }
    themes.forEachIndexed { index, theme ->
        ToggleButton(
            selectedIndex == index,
            {
                selectedIndex = index
            },
            Modifier.weight(
                1f
            ),
            shapes = when (index) {
                0 -> ButtonGroupDefaults.connectedLeadingButtonShapes()
                themes.lastIndex -> ButtonGroupDefaults.connectedTrailingButtonShapes()
                else -> ButtonGroupDefaults.connectedMiddleButtonShapes()
            }//2⃣
//            shapes = ButtonGroupDefaults.connectedMiddleButtonShapes()//3⃣
        ) {
            Text(
                theme
            )
        }
    }
}

https://github.com/manabu-nakamura/appc/blob/main/counter/src/main/java/com/github/manabu_nakamura/counter/MainActivity.kt

テーマの選択にはconnected button groupがすすめられているようですが，standard button groupと比べ，選択されていないボタンが分かりにくいです（https://m3.material.io/components/button-groups/guidelines）．ボタンの間のすき間が狭いからでしょうか？

https://m3.material.io/blog/building-with-m3-expressiveの例が変です：square connected button groupの例で，選択されたボタンと隣接するボタンの幅が一時的に変化しています．

Android, Jetpack Compose

この投稿を編集

この投稿は投稿者によって CC BY 4.0 の下でライセンスされています。

トレンドのタグ