Compose Material 3 の Surface tones

Material 3のColor Systemには Surface tones というものがあります。この仕様によって想定した色をうまく設定できないなど気づきにくいこともあります。この Surface tones についてComposeの実装を踏まえて簡単にまとめておきます。

これ書いてる時点ではCompose Material 3はalphaなので今後変更の可能性あります。

Surface tones

項目の直接のリンクがないのですが、上記のドキュメントの中盤あたりに、 Surface tones という項目があります。

Material 3におけるSurfaceにはelevationのレベルがあり、+1から+5まであります。このelevationのレベルによって色調が変化する仕様になっています。

ドキュメントのほうにコンポーネントごとのレベル例が記載されています。例えば、AppBarやBottomBarは+2という感じになっています。

androidx.compose.material3

Composeの実装である、 androidx.compose.material3 にもこの仕様が入っています。

今回は alpha14 を使っています。

androidx.compose.material3.Surface には tonalElevation のパラメータがあり、これを設定することでelevationレベルを設定する感じになります。デフォルは 0dp になっています。

また、この tonalElevationcolorMaterialTheme.colorScheme.surface のときのみ有効になります。

以下は tonalElevation の値による色の違いになります。値が大きいほど色が濃くなっています。surfaceの色は Color(0xFFD0BCFF) を指定してます。

実際の色の変換式は ColorScheme.surfaceColorAtElevation として定義されています。(ぼくには計算の意味が分からなかったです…)

Elevationレベル

Material 3のドキュメントではレベルについてのみ記載されていますが、Composeの実装ではdpを指定する必要があります。

このレベルとdpについて ElevationTokens で定義されています。ただし、これは internal となっていて外部からは使用できないようになっています。

これについては IssueTracker で報告されていますが、今後どうなるかは不明です。

ネストによるtonalElevationの加算

Suraface をネストさせて使用した場合に tonalElevation は加算されていきます。

現在の tonalElevationLocalAbsoluteTonalElevation.current で知ることがあります。

Surfaceの実装を見ると単純に加算されてることがわかると思います。

tonalElevation のデフォルト値

いくつかのコンポーネントでは tonalElevation がデフォルトで設定されています。 NavigationBarBottomAppBarAlertDialog など。

色を設定しても想定通りの色にならない場合は、 tonalElevation を確認してみると良いかもです。

--

--

Programmer / Gamer / Google Developers Expert for Android, Kotlin / @STAR_ZERO

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kenji Abe

Kenji Abe

Programmer / Gamer / Google Developers Expert for Android, Kotlin / @STAR_ZERO