Material 3 Expressive UI作成ガイド
Jetpack ComposeでUI作成時は Material 3 Expressive のガイドラインに従う。
必須要件
| 要件 | 値 |
|---|---|
| minSdk | 23以上 |
| Material3 | 1.5.0-alpha以上（Expressiveコンポーネント含む） |
| OptIn | @OptIn(ExperimentalMaterial3ExpressiveApi::class) |
クイックリファレンス
テーマ設定
kotlin
MaterialTheme(
colorScheme = colorScheme,
typography = typography,
shapes = shapes,
motionScheme = MotionScheme.expressive()
) { content() }
推奨コンポーネント
| 用途 | コンポーネント | 備考 |
|---|---|---|
| 読み込み表示 | LoadingIndicator | 5秒未満の待機時間用 |
| 読み込み表示（コンテナ付き） | ContainedLoadingIndicator | - |
| ボトムツールバー | DockedToolbar | BottomAppBarの代替 |
| フローティングツールバー | FloatingToolbar | 水平・垂直対応 |
| 可変ボトムバー | FlexibleBottomAppBar | スクロール連動 |
非推奨 → 代替
| 非推奨 | 代替 |
|---|---|
BottomAppBar | DockedToolbar |
CircularProgressIndicator（短時間） | LoadingIndicator |
ベストプラクティス
- •
MotionScheme.expressive()で流れるようなアニメーション - •形状のモーフィングを活用
- •カラーロールを遵守（アクセシビリティ自動対応）
- •Android 12+でダイナミックカラーをサポート
- •Elevationはトーナルカラーオーバーレイで表現
詳細
- •コンポーネント詳細・テーマ設定:
REFERENCE.md - •実装例:
EXAMPLES.md