Android 12 で追加されたダイナミック カラーを使用すると、 デバイスを個人の壁紙のカラーパターンに合わせて調整できる または壁紙選択ツールで選択した色で設定できます。
この機能を利用するには、DynamicColors
API を追加します。
このテーマ設定をアプリやアクティビティに適用し、アプリをよりパーソナライズされたものにします
提供します。
![](https://developer.android.com/static/develop/ui/views/theming/images/wallpaper-differing.png?authuser=0000&hl=ja)
このページでは、アプリにダイナミック カラーを実装する手順について説明します。 この機能は、 ウィジェットとアダプティブ アイコン(このページで後述します) また、Codelab を試すこともできます。
Android がカラーパターンを作成する方法
Android は次のステップを実行して、ユーザーのカラーパターンから 壁紙に設定できます。
選択した壁紙画像のメインの色が検出され、 ソースカラーを抽出します。
システムはそのソースカラーを使用して、5 つの主要な色をさらに推定します。 プライマリ、セカンダリ、ターシャリ、ニュートラル、ニュートラル バリエーションです。
図 2. 壁紙画像からのソースカラーの抽出と 5 つの主要な色への抽出の例 システムは、各キーカラーを 13 トーンの色調パレットに解釈します。
図 3. 特定の色調パレットを生成する例 システムはこの 1 つの壁紙から 5 種類の色を ライトテーマとダークテーマの基礎となります。
ユーザーのデバイスでの色のバリエーションの表示
ユーザーは、壁紙から抽出した色などのカラー バリエーションを選択できます。 Android 12 以降、Android 13 ではさらに多くのバリアントが追加されました。対象 たとえば、Android 13 を搭載した Google Pixel のユーザーはバリエーションを選択します。 壁紙とstyle 設定を指定します。
<ph type="x-smartling-placeholder">![](https://developer.android.com/static/develop/ui/views/theming/images/wallpaper-color.png?authuser=0000&hl=ja)
Android 12 では、色調スポットのバリアントに続いて、ニュートラル、バイブラントが追加されました。 Android 13 のトーン、表現力のバリアント各バリエーションには ユーザーの壁紙のシードカラーを鮮やかな色に変えるレシピ 色相も回転します次の例は、単一のカラーパターンを示しています。 4 色のバリエーションで表現できます。
![](https://developer.android.com/static/develop/ui/views/theming/images/color-variants-example.png?authuser=0000&hl=ja)
これらの色にアクセスするために、アプリは引き続き同じトークンを使用します。詳細情報 トークンについては、このページのトークンを使用してテーマを作成するをご覧ください。
Compose を使ってみる
Compose で UI を作成する場合は、 ダイナミック カラーをアプリに適用する方法について詳しくは、Compose でのマテリアル テーマ設定をご覧ください。 。
ビューを使ってみる
ダイナミック カラーは、アプリレベルまたはアクティビティ レベルで適用できます。これを行うには、
applyToActivitiesIfAvailable()
:
アプリへの ActivityLifeCycleCallbacks
。
Kotlin
class MyApplication: Application() { override fun onCreate() { DynamicColors.applyToActivitiesIfAvailable(this) } }
Java
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); DynamicColors.applyToActivitiesIfAvailable(this); } }
次に、アプリにテーマを追加します。
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
トークンを使用してテーマを作成する
ダイナミック カラーはデザイン トークンを利用して、色を割り当てる より合理的で一貫性のあるものにできます。デザイン トークンを使用すると、 セット値ではなく、色の役割を意味的に割り当てます。 UI の要素に照らし合わせますこれにより、アプリの色調システムが 柔軟性、スケーラビリティ、整合性が備わっていることから、 ライトモード、ダークモード、ダイナミック カラー用のデザイン。
次のスニペットは、ライトモードとダークモードの例を示しています。 ダイナミック カラー トークンを適用した後、対応するカラー XML。
ライトモード
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
ダークモード
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
Colors XML
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
詳細情報:
ダイナミック カラー、カスタムカラー、トークンの生成について詳しくは、 マテリアル 3 のダイナミック カラーのページをご覧ください。
ベース カラーパレットとアプリのカラーとテーマを生成するには、 Material Theme Builder を Figma プラグインまたはブラウザ内)。
カラーパターンを使用してアクセシビリティを高める方法の詳細 については、マテリアル 3 のページで カラーシステムのユーザー補助。
カスタムカラーやブランドカラーを維持する
アプリのカスタムカラーやブランドカラーが 設定に応じて、色を作成する際に個別に追加することもできます。 できます。例:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
または、マテリアル テーマビルダーを使用して、追加の
カラーパターンを拡張できます。これにより、統一されたカラーシステムを構築できます。
このオプションでは、HarmonizedColors
を使用してカスタム
できます。これらを組み合わせることで、視覚的なバランスとコントラストをコントロールできます。
ユーザー生成色で表現されますこれは実行時に発生し
applyToContextIfAvailable()
。
![](https://developer.android.com/static/develop/ui/views/theming/images/harmonize.png?authuser=0000&hl=ja)
カスタムカラーの調整に関するマテリアル 3 のガイダンスをご覧ください。
アダプティブ アイコンとウィジェットにダイナミック カラーを適用する
![](https://developer.android.com/static/develop/ui/views/theming/images/dynamic-color-icons-widgets.png?authuser=0000&hl=ja)
アプリでダイナミック カラーのテーマ設定を有効にするだけでなく、 ダイナミック カラーテーマ設定: ウィジェット Android 12、および アダプティブ アイコン Android 13。