2025年5月21日

Dynamic Colorを使ってみた

Popular tags

Content

Android 12以降、Dynamic Colorというデバイス設定や壁紙の色に基づいてアプリの配色を動的に変化させる仕組みが追加されました。

デバイス設定から画像のようなカラーパレットを自動生成し、背景、テキスト、ボタンなどのUIに設定されるようになります。

本記事ではJetpack Composeを使用してDynamic Colorを導入する方法を紹介します。

導入する前に、まずはDynamic Colorについて説明します。上記にはPrimary, On Primary, Secondary, On Secondaryなどがありますが、これらはこれからアプリに使うカラーパレットの一部であり、マテリアルデザインのColor rolesに基づき定義されたものです。

一部ですが、カラーパレットの色の使いかたです。

Primary: ブランドやアプリの基調となる色

Secondary: 強調用の色

Tertiary: 補完用の色

Surface: 背景などで使う色

On Primary, On Secondary, On Tertiary: 着色箇所の上に配置する文字、アイコンの色

こちらに詳しく説明されています。
https://m3.material.io/styles/color/roles

依存関係の追加

プロジェクトにDynamic Colorを導入する際に必要なライブラリをbuild.gradle(Module)に追加します、最新バージョンはCompose Material 3のページに記載されています。
https://developer.android.com/jetpack/androidx/releases/compose-material3


dependencies {

    implementation("androidx.compose.material3:material3:1.3.2")

}

テーマファイルの用意

Jetpack Composeでアプリを作成している場合、OSが生成されたカラーパレットの参照はdynamicDarkColorScheme、dynamicLightColorSchemeを参照することで実現できます。そのために下記のようにテーマを作成し、MaterialThemeで使うcolorSchemeを上記を参照するように実装します。

以下の例ではダークモードかどうかの判定はisSystemInDarkTheme関数を使って判定しています。


@Composable

fun MyAppTheme(

    useDarkTheme: Boolean = isSystemInDarkTheme(),

    content: @Composable () -> Unit

) {

    val context = LocalContext.current

    val colorScheme = when {

        Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {

            if (useDarkTheme) dynamicDarkColorScheme(context)

            else dynamicLightColorScheme(context)

        }

        else -> {

            if (useDarkTheme) darkColorScheme()

            else lightColorScheme()

        }

    }



    MaterialTheme(

        colorScheme = colorScheme,

        typography = Typography(),

        content = content

    )

}

テーマを画面に適用

テーマを作成した後、onCreate関数で作成したテーマを指定すると画面に適用されます。


setContent {

    MyAppTheme {

        MyScreen()

    }

}

Android Viewでアプリを作成している場合はapplyToActivitiesIfAvailable関数を使うと、画面にDynamicColorが適用されます。


if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {

    DynamicColors.applyToActivitiesIfAvailable(application)

}

colorSchemeを確認するため下記のような画面を作成しました、テーマが適用される前はデフォルトの紫系になっています。

画面に先ほど作成されたテーマを適用すると、端末のテーマに合わせて赤色系に変化します。

端末の背景画像を青系に変更した場合、端末のテーマが更新され、アプリの見た目もそれに合わせて変化します。

テーマの一部変更

テーマに特定のカラーを設定し、端末の設定テーマを参照しないようにする場合は下記のように、設定されたcolorSchemeの値を上書します。

以下の例ではprimary、secondary、tertiaryの値をそれぞれ赤、緑、青に変更しています。


colorScheme.copy(

    primary = Color(0xFFFF0000),

    secondary = Color(0xFF00FF00),

    tertiary = Color(0xFF0000FF)

)

Android Viewでアプリを作成している場合はThemeファイルのstyle値で以下のように値を追加、上書きします。

上書きされた状態の画面は下記のように変化します。

色の調和

既存の色に合うように新しい色を追加したい場合、下記のようにharmonize関数で追加する色と調和する色を設定すると、調和された色が返却されます。


Blend.harmonize(colorToHarmonize, colorToHarmonizeWith)

以下の例では先ほど変更されたテーマの色を既存のprimary、secondary、tertiaryと調和します。


colorScheme.copy(

    primary = Color(

        Blend.harmonize(

            Color(0xFFFF0000).toArgb(), colorScheme.primary.toArgb()

        )

    ),

    secondary = Color(

        Blend.harmonize(

            Color(0xFF00FF00).toArgb(), colorScheme.secondary.toArgb()

        )

    ),

    tertiary = Color(

        Blend.harmonize(

            Color(0xFF0000FF).toArgb(), colorScheme.tertiary.toArgb()

        )

    )

)

調和された状態の色は下記のようになります。

比較用に調和前の画面です、比べると彩度や明るさが既存の色に近いものに変更されます。

まとめ

本記事ではDynamic Colorの簡単の紹介と、Dynamic Colorのアプリへの適用、適用されたテーマの一部変更を試しました。Material Designの一部として、活用すると手軽にアプリ画面を作成、カスタマイズできると思います。もし興味があればぜひ試してください。

また、Dynamic Colorが適用される前はデフォルトテーマですが、Material Theme Builderという画像からカラーパレット生成するツールを使うと、Dynamic ColorのようなcolorSchemeを生成でき、アプリに直接取り込めます、そちらに関しては別途ご紹介します。
https://material-foundation.github.io/material-theme-builder/