Material 3 Expressive の実装例の紹介シリーズです。
今回は Progress indicator を紹介します。
(androidx.compose.material3:material3:1.4.0-alpha15 時点での内容になります。)
Material 3 Expressive での変更点
- Wavy のスタイルが追加されてこれまでのは Flat として 2 種類から選択可能に
実装
Wavy なスタイルは CircularWavyProgressIndicator / LinearWavyProgressIndicator を、Flat なスタイルはこれまでの CircularProgressIndicator / LinearProgressIndicator を使用します。
// Circular
CircularProgressIndicator()
CircularWavyProgressIndicator()
// Linear
LinearProgressIndicator()
LinearWavyProgressIndicator()
Wavy なスタイルで Track の太さを変更する場合は以下のようにカスタム Stroke を実装します。
val thickStrokeWidth = with(LocalDensity.current) { 8.dp.toPx() }
val thickStroke = remember(thickStrokeWidth) {
Stroke(width = thickStrokeWidth, cap = StrokeCap.Round)
}
// Circular
CircularWavyProgressIndicator(
stroke = thickStroke,
trackStroke = thickStroke,
)
// Linear
LinearWavyProgressIndicator(
stroke = thickStroke,
trackStroke = thickStroke,
)
