2
Help us understand the problem. What are the problem?

posted at

[Android] Material Design (Color編) 自分用メモ

Material Design 3というものができたそうですね。開発中にデザインの実装方法などググることはあっても体系的に学んだことはなかったので、復習も兼ねて、Material Design2から学びます。

歴史

2014年 Material Design
2018年 Material Theming
2021年 Material You
2021年にMaterial YouがMaterial Design3と呼ぶようになり、それに伴ってMaterial ThemingがMaterail Design2ということになったそうです。(参照

Material Color

こちらの公式でいろいろ定義されているのでまとめます。
図案の公式のサイトを見ながらだとわかりやすいです。

名称 概要
Primary Color アプリの主要カラー。ツールバーやフローティングボタンなどに使われる。
Secondary Color アプリの副次的なカラー。Primary Colorだけだと寂しいときに、アクセントとして入れるようです。フローティングボタンなどに。
Variant 変異体の意味。Primary Variantや、Secondary Variantのように使用。色に変化を持たせるために、明度だけを変えてバリエーションをもたせます。Primary Variantなら、Primary Colorより薄い色を使うとかです。
Surface Color コンポーネントの表面色を表す。カードやシート、メニューなど。
Background Color 背景色
Error Color エラー時の色
"On" Color typograpyに使う色。例えば、onPrimaryとか、onSurfaceなどの用に使う。PrimaryColorを背景とした文字の色の定義。例えば、紫のPrimary Colorの場合、ツールバーが紫になります。このときタイトルなどの文字の色をどうするかというときに、OnPrimaryで定義します。白とか黒になります。
Alternative Color Primary Colorがいくつもある場合、2つ目以降を指すようです。公式のowlというアプリが参考になるでしょう。
Additional Color コンポーネントごとに別の色を使うなど。公式のRallyというサンプルが参考になります。
Material Pallet Generator 適切な色を導いてくれるツールです。PrimaryColorを設定したとき、onSurfaceは白か黒にすべきか、自動的に出してくれたりします。

Composeでの実装について

公式のowlの実装例を見るとこんな感じ。


private val PinkThemeLight = lightColors(
    primary = pink500,
    secondary = pink500,
    primaryVariant = pink600,
    onPrimary = Color.Black,
    onSecondary = Color.Black
)

private val PinkThemeDark = darkColors(
    primary = pink200,
    secondary = pink200,
    surface = pinkDarkPrimary
)

@Composable
fun PinkTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        PinkThemeDark
    } else {
        PinkThemeLight
    }
    OwlTheme(darkTheme, colors, content)
}

isSystemInDarkTheme()でダークモードかライトモードかを判別し、別に定義したlightColorsやDarkColorsを切り替えます。ComposeにはlightColorsやDarkColorsというオブジェクトが用意されているので便利です(androidx.compose.material)。定義は以下のようになってます。

lightColors(
    primary: Color,
    primaryVariant: Color,
    secondary: Color,
    secondaryVariant: Color,
    background: Color,
    surface: Color,
    error: Color,
    onPrimary: Color,
    onSecondary: Color,
    onBackground: Color,
    onSurface: Color,
    onError: Color
)

基本これだけでよいですが、owlの例だともっと発展的なテーマが書かれているので、公式のコードを見てください。

Material Design 3

新しいPixelをお使いの人なら分かるかもしれないですがAndroid12だと、壁紙の色を自動検出してテーマの色が変わります。通知領域などの色が変わります。こんな感じ。

ad

自分はPixel6を使ってますが、気分を入れ替えるときにいいですね。とはいっても、最初は楽しいですが、壁紙なんてなかなか変えないのが正直なところTonal palettes

googleアプリにはこのカラーリングが実装されていくようですが、公式以外でも使えます。とはいえ普及のペースは遅いようです。ライブラリも準備されていくようなので、こういうことができるということは頭に入れておいたほうが良いと思われます。

色定義の変化

Material Design3は上記2の定義に変更が加わってます。
参考文献様

項目 説明
Tertiary Color追加 Primary, Secondaryに次いでTertiary Colorが追加になり、よりカラフルになります。Secondaryは目立たない色、Tertiaryはアクセントとして用いられます。
Variant→Container VariantがなくなりContainerとなりました。Containerは主要の色に比べて薄めです。
Neutral key color background, surfaceをひっくるめてこういうようになったようです。Neutral Variantも設定されました。
5つのkey color Primary, Secondary, Tertiary, Neutral, NeutralVariantを5つのkey colorとしています。
Tonal palettes カラーは0〜100の間の明度で13分割された数値を持ち、Primary90のように表します。5つのkey colorを設定すると、onPrimaryとかContainerとかは、自動的に明度を判断して決めてくれるようです。
Design Token #E8DEF8などに名前を与えて管理しやすくするようです。保守性が高まるとのことですが、あまり理解できていません。

Material Design 3

Neutral key color

だいたい概要としては以上ですが、まだすべておいきれていません。もっと知りたい方は公式参考文献が役立つと思います。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
2
Help us understand the problem. What are the problem?