Android 12 で追加されたダイナミック カラーを使用すると、ユーザーは、個人の壁紙のカラーパターンに合わせて、または壁紙ピッカーで選択した色を使用して、デバイスをパーソナライズできます。
この機能を活用するには、DynamicColors API を追加します。この API は、アプリやアクティビティにテーマを適用して、アプリをユーザーに合わせてパーソナライズします。
このページでは、アプリにダイナミック カラーを実装する手順について説明します。 この機能は、このページで後述するように、 ウィジェットとアダプティブ アイコンでも個別に利用できます。 Codelab を試すこともできます。
Android でカラーパターンを作成する方法
Android は、ユーザーの壁紙からカラーパターンを生成するために次の手順を行います。
システムは、選択した壁紙画像のメインカラーを検出し、ソースカラーを抽出します。
システムは、そのソースカラーを使用して、 プライマリ、セカンダリ、ターシャリ、ニュートラル、およびニュートラル バリアントと呼ばれる 5 つのキーカラーをさらに外挿します。
図 2. 壁紙画像からソースカラーを抽出し、5 つのキーカラーに抽出する例 システムは、各キーカラーを 13 トーンの色調パレットに解釈します。
図 3. 指定された色調パレットを生成する例 システムは、この 1 つの壁紙を使用して 5 つの異なるカラーパターンを導き出します。これが、ライトテーマとダークテーマの基盤となります。
ユーザーのデバイスにカラー バリアントを表示する方法
Android 12 以降では、ユーザーは壁紙から抽出した色とさまざまなテーマからカラー バリアントを選択できます。Android 13 では、さらに多くのバリアントが追加されました。たとえば、Android 13 を搭載した Google Pixel を使用しているユーザーは、図 4 に示すように、[壁紙とスタイル] 設定からバリアントを選択します。
Android 12 では トーンスポット バリアントが追加され、Android 13 では ニュートラル、ビブラント トーン、エクスプレッシブ バリアントが追加されました。各バリアントには、ユーザーの壁紙のシードカラーを鮮やかさや色相の回転によって変換する独自のレシピがあります。次の例は、これらの 4 つのカラー バリアントで表現された単一のカラーパターンを示しています。
アプリは、これらの色にアクセスするために同じトークンを使用します。トークンの詳細については、このページのトークンを使用してテーマを作成するをご覧ください。
Views を使ってみる
ダイナミック カラーは、アプリレベルまたはアクティビティ レベルで適用できます。これを行うには、
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() を使用して実行時に行われます。
カスタムカラーの調和に関するマテリアル 3 のガイダンスをご覧ください。
アダプティブ アイコンとウィジェットにダイナミック カラーを適用する
アプリでダイナミック カラーのテーマ設定を有効にするだけでなく、 Android 12 以降では ウィジェットのダイナミック カラーのテーマ設定、Android 13 以降では アダプティブ アイコンのダイナミック カラーのテーマ設定もサポートできます。