Material 3 Expressive実装例 : MaterialExpressiveTheme

Material 3 Expressive の実装例の紹介シリーズです。
今回は MaterialExpressiveTheme を紹介します。
(androidx.compose.material3:material3:1.4.0-alpha15 時点での内容になります。)

MaterialExpressiveTheme とは

Material 3 Expressive を使う上で Expressive らしさを出すために必要になるのがこの MaterialExpressiveTheme です。

これまでの MaterialTheme との違い

MaterialTheme から MaterialExpressiveTheme に置き換えることで異なる点はデフォルトの MothionScheme が変更される点と、MothionScheme のカスタマイズが可能な点です。
また、MaterialExpressiveTheme のデフォルトの ColorScheme も異なるのですが、ほとんどのプロジェクトでは ColorScheme をカスタマイズすることになるのでここでは割愛します。
1.4.0-alpha15 時点では Typography も Expressive 版に置き換える TODO コメントがあるのですが、こちらは変更され次第追記します。

MaterialTheme では MotionScheme#standard が、MaterialExpressiveTheme では MotionScheme#expressive がデフォルトで適用されます。

MotionScheme	説明	例
standard	これまでも適用されていた Linear なアニメーション
expressive	Expressive らしい Spring なアニメーション

実装

MaterialTheme を使っていた部分を MaterialExpressiveTheme に置き換えるだけになります。

// Before
@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) {
        DarkColorScheme
    } else {
        LightColorScheme
    }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}

// After
@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) {
        DarkColorScheme
    } else {
        LightColorScheme
    }
    MaterialExpressiveTheme(
        colorScheme = colorScheme,
        content = content
    )
}

MotionScheme は独自でカスタマイズしたものを設定することも、MotionScheme#standard を適用することも可能です。
()

MaterialExpressiveTheme(
    motionScheme = MotionScheme.standard(),
    content = content
)

また、MaterialExpressiveTheme はこれまでの MaterialTheme と共存可能で、部分的に特定スコープ内で MaterialExpressiveTheme を適用することも可能です。

@Composable
fun Screen() {
    ...
    MaterialExpressiveTheme(
        colorScheme = MaterialTheme.colorScheme,
    ) {
        var isChecked by remember { mutableStateOf(false) }
        Switch(
            checked = isChecked,
            onCheckedChange = { isChecked = it }
        )
    }
}