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

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

この機能を利用するには、DynamicColors API を追加します。この API は、このテーマ設定をアプリやアクティビティに適用し、ユーザーに合わせてアプリをさらにカスタマイズします。

図 1. さまざまな壁紙から得られる色調カラーパターンの例

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

Android でカラーパターンを作成する方法

Android は、ユーザーの壁紙からカラーパターンを生成するために、次の手順を行います。

  1. 選択した壁紙画像のメインカラーが検出され、ソースカラーが抽出されます。

  2. システムはこのソースカラーを使用して、プライマリセカンダリターシャリニュートラルニュートラル バリアントの 5 つのキーカラーをさらに推定します。

    ソースカラー抽出の例
    図 2. 壁紙画像から 5 つの主要な色へのソースカラー抽出と抽出の例
  3. システムでは、各キーカラーが 13 トーンの色調パレットに解釈されます。

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

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

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

図 4. 壁紙の設定で色のバリエーションを選択する(Google Pixel デバイスに表示)

Android 12 では色調スポットのバリアントが追加され、Android 13 では NeutralVibrant TonalExpressive のバリアントが追加されています。各バリアントには、ユーザーの壁紙のシードカラーを、鮮やかさと色相の回転によって変換する独自のレシピがあります。次の例は、これらの 4 つのカラー バリエーションで表現される 1 つのカラーパターンを示しています。

図 5. 1 台のデバイスでさまざまな色のバリエーションがどのように表示されるかを示す例

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

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 要素への色の割り当てを効率化し、一貫性を持たせます。デザイン トークンを使用すると、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>

カラー 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() で発生します。

図 6. カスタム色の調和の例

カスタムカラーの調整については、マテリアル 3 のガイダンスをご覧ください。

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

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