Material 3 Expressive の実装例の紹介シリーズです。
今回は Extended FAB (Floating action button)を紹介します。
(androidx.compose.material3:material3:1.4.0-alpha15 時点での内容になります。)
Material 3 Expressive での変更点
- 新たに Small、Medium、Large のサイズが登場
- これまでの Extended FAB は非推奨になり同サイズである Small が置き換え先
- Surface なスタイルが非推奨
- ラベルのテキストサイズが大きくなるように調整
- 非推奨な Extended FAB と同サイズの Small の場合 Label large から Title medium に変更されている
実装
これまでの ExtendedFloatingActionButton ではなく、それぞれのサイズ名が入った関数を使用します。
// Small
SmallExtendedFloatingActionButton(
onClick = {},
text = {
Text("Edit")
},
icon = {
Icon(
painterResource(R.drawable.ic_edit),
contentDescription = null,
)
}
)
// Medium
MediumExtendedFloatingActionButton(
onClick = {},
text = {
Text("Edit")
},
icon = {
Icon(
painterResource(R.drawable.ic_edit),
contentDescription = null,
modifier = Modifier.size(FloatingActionButtonDefaults.MediumIconSize),
)
}
)
// Large
LargeExtendedFloatingActionButton(
onClick = {},
text = {
Text("Edit")
},
icon = {
Icon(
painterResource(R.drawable.ic_edit),
contentDescription = null,
modifier = Modifier.size(FloatingActionButtonDefaults.LargeIconSize),
)
}
)
