はじめに
こんにちは。Anroidエンジニア歴約二年のgottieです。
業務ではAndroid Classic Viewを触れていますが、個人ではせっせとJetpack Composeで遊んでいます。
今回はJetpack ComposeでのMaterial Colorの決め方を紹介します。
Android Classic Viewでもそうですが、いつも適当に色を決めていって、Darkモードなどを考慮すると収集がつかなくなっていたいたのですがJetPack ComposeはMaterial Colorとの親和性が高く、簡単にプロダクトに取り込むことができます。
方法
1.色を定義
- アプリで使用するメインの色(primary)として一色決めます。色の濃さは中間が推奨されているで500とします。(こちら)
- メインのサブ(primaryVaiant)も必要ですが、ライトテーマとダークテーマに備えてメインの色より濃いものと薄いものを準備します。
- アプリで使用するサブの色(secondary)として一色決めます。こちらもメインの色と同じで濃さが中間のものを一つ選び、そのサブとして濃いものと薄いものを準備します。
- Gray系の色は何種類も使用してよいので、白から黒まで一通り準備します。
- エラーは赤色(
0xBFF00020)を使用しましょう。アプリのテーマとして赤を使用する場合はエラー色の検討が必要です。
Color.kt
// PRIMARY
val LightBlue300 = Color(0xFF4FC3F7)
val LightBlue500 = Color(0xFF03A9F4)
val LightBlue700 = Color(0xFF0288D1)
// Secondary
val LightGreen200 = Color(0xFFC5E1A5)
val LightGreen500 = Color(0xFF8BC34A)
val LightGreen800 = Color(0xFF558B2F)
val White = Color(0xFFFFFFFF)
val Gray100= Color(0xFFCFD8DC)
val Gray300 = Color(0xFFE0E0E0)
val Gray500 = Color(0xFF9E9E9E)
val Gray700 = Color(0xFF616161)
val Gray900 = Color(0xFF212121)
val Black = Color(0xFF000000)
val Error = Color(0xBFF00020)
2.ライトテーマとダークテーマで使用する色を定義する。
-
Color.ktで定義した色をライトテーマ用、ダークテーマ用として定義します。 - ダークテーマにはより薄い色を、ライトテーマにはより濃い色を適用するとよさげです。(個人の見解)
-
backgroundとsurfaceのカラーは微妙に変えておくことで多重ダイアログなどのときに背景が重なることを避けらると思います。
Theme.kt
private val DarkColorPalette = darkColors(
primary = LightBlue500,
primaryVariant = LightBlue300,
secondary = LightGreen500,
secondaryVariant = LightGreen200,
background = Gray900,
surface = Gray700,
error = Error,
onPrimary = White,
onSecondary = White,
onBackground = White,
onSurface = White,
onError = White
)
private val LightColorPalette = lightColors(
primary = LightBlue500,
primaryVariant = LightBlue700,
secondary = LightGreen500,
secondaryVariant = LightGreen800,
background = Gray100,
surface = Gray300,
error = Error,
onPrimary = Black,
onSecondary = Black,
onBackground = Black,
onSurface = Black,
onError = Black
)
終わり
ダークテーマにしたら文字が見えない！！！
ダイアログが背景色と被る！！！
などの不具合から解放されました。
Jetpack Compose楽しい～