Material 3 Expressive の実装例の紹介シリーズです。
今回は FAB (Floating action button)を紹介します。
(androidx.compose.material3:material3:1.4.0-alpha15 時点での内容になります。)
Material 3 Expressive での変更点
- 新たに Medium のサイズが追加
- Small のサイズは非推奨
- Surface なスタイルが非推奨
実装
Baseline、Medium、Large のサイズ
// Baseline
FloatingActionButton(
onClick = { },
) {
Icon(
painterResource(R.drawable.ic_edit),
contentDescription = "Edit"
)
}
// Medium
MediumFloatingActionButton(
onClick = { },
) {
Icon(
painterResource(R.drawable.ic_edit),
contentDescription = "Edit"
)
}
// Large
LargeFloatingActionButton(
onClick = { },
) {
Icon(
painterResource(R.drawable.ic_edit),
contentDescription = "Edit"
)
}
Color の変更
FAB の色は containerColor に任意の色を設定することで変更できます。
ガイドラインでは Primary、Seconday、Tertiary、Primary container、Secondary container、Tertiary container のトークンの適用が標準となっています。
FloatingActionButton(
onClick = { },
containerColor = MaterialTheme.colorScheme.secondaryContainer
) {
Icon(
painterResource(R.drawable.ic_edit),
contentDescription = "Edit"
)
}
スクロールとの連動
標準で用意されている Modifier#animateFloatingActionButton を使うことで、スクロールに連動して外側に向かって非表示になるアニメーションを適用することができます。
val listState = rememberLazyListState()
val fabVisible by remember { derivedStateOf { listState.firstVisibleItemIndex == 0 } }
Scaffold(
floatingActionButton = {
FloatingActionButton(
modifier = Modifier.animateFloatingActionButton(
visible = fabVisible,
alignment = Alignment.BottomEnd
),
onClick = { },
) {
Icon(
painterResource(R.drawable.ic_edit),
contentDescription = "Edit",
modifier = Modifier.size(FloatingActionButtonDefaults.MediumIconSize)
)
}
},
floatingActionButtonPosition = FabPosition.End,
) {
LazyColumn(
state = listState,
contentPadding = it
) { ... }
}
