Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

ユーザーがアプリで色をカスタマイズできるようにする

Android 12 で追加されたダイナミックカラーを使用すると、ユーザーは、個人の壁紙のカラーパターンに合わせて、または壁紙選択ツールで選択した色を使用して、デバイスをパーソナライズできます。

この機能を利用するには、DynamicColors API を追加します。この API は、このテーマ設定をアプリまたはアクティビティに適用して、アプリをユーザーに合わせてパーソナライズします。

このページでは、アプリにダイナミックカラーを実装する手順について説明します。この機能は、このページで後述するように、ウィジェットとアダプティブアイコンでも個別に利用できます。Codelab を試すこともできます。

Android がカラーパターンを作成する仕組み

Android は、次の手順に沿ってユーザーの壁紙からカラーパターンを生成します。

システムは、選択された壁紙画像のメインカラーを検出し、ソースカラーを抽出します。
システムはそのソースカラーを使用して、プライマリ、セカンダリ、ターシャリ、ニュートラル、ニュートラルバリアントと呼ばれる 5 つのキーカラーをさらに推定します。

図 2. 壁紙画像からソースカラーを抽出し、5 つのキーカラーに抽出する例
システムは、各キーカラーを 13 トーンの色調パレットに変換します。

図 3. 特定の色調パレットを生成する例
システムはこの 1 つの壁紙を使用して 5 つの異なるカラーパターンを導出し、ライトモードとダークモードのベースを提供します。

ユーザーのデバイスでのカラーバリエーションの表示方法

Android 12 以降では、壁紙から抽出された色やさまざまなテーマからカラーバリエーションを選択できます。Android 13 では、さらに多くのバリエーションが追加されています。たとえば、Android 13 を搭載した Google Pixel を使用しているユーザーは、図 4 に示すように、[壁紙とスタイル] の設定からバリエーションを選択します。

**図 4.** 壁紙の設定でカラーバリエーションを選択する（Google Pixel デバイスに表示）

Android 12 では Tonal Spot バリアントが追加され、Android 13 では Neutral、Vibrant Tonal、Expressive バリアントが追加されました。各バリアントには、鮮やかさと色相の回転によってユーザーの壁紙のシードカラーを変換する独自のレシピがあります。次の例は、これら 4 つのカラーバリアントで表現された単一のカラーパターンを示しています。

**図 5.** 1 台のデバイスで異なるカラーバリエーションがどのように表示されるかの例

アプリは引き続き同じトークンを使用してこれらの色にアクセスします。トークンの詳細については、このページのトークンを使用してテーマを作成するをご覧ください。

ビューを使ってみる

ダイナミックカラーは、アプリレベルまたはアクティビティレベルで適用できます。そのためには、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 要素への色の割り当てをより効率的かつ一貫性のあるものにします。デザイントークンを使用すると、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 のダイナミックカラーのページをご覧ください。
ベースのカラーパレットとアプリの色とテーマを生成するには、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() を使用して実行時に発生します。

カスタムカラーの調和に関するマテリアル 3 のガイダンスをご覧ください。

アダプティブアイコンとウィジェットにダイナミックカラーを適用する

アプリでダイナミックカラーのテーマ設定を有効にすることに加えて、Android 12 以降ではウィジェット、Android 13 以降ではアダプティブアイコンのダイナミックカラーのテーマ設定もサポートできます。