アプリのテーマを変更する

1. 始める前に

マテリアルは Google が作成したデザインシステムです。これによりデベロッパーは、Android やその他のプラットフォーム向けに高品質なデジタルエクスペリエンスを構築できます。完全なマテリアルシステムには、アプリのビジュアル、モーション、インタラクションデザインに関するデザインガイドラインが含まれていますが、この Codelab では Android アプリのカラーテーマの変更について重点的に解説します。

この Codelab では Empty Activity アプリテンプレートを使用しますが、ご自分の開発中の Android アプリを使用しても構いません。Android の基本コースの一環として取り組む場合は、Tip Time アプリを使用できます。

前提条件

Android Studio のテンプレートから Android アプリを作成する方法。
Android Studio を使用して Android アプリをエミュレータまたはデバイスで実行する方法。
API 28（Android 9）または API 29（Android 10）以降を実行する Android デバイスまたはエミュレータ。
XML ファイルを編集する方法。

学習内容

マテリアルデザインの原則に基づいてアプリに効果的な色を選択する方法
アプリテーマの一部として色を設定する方法
色の RGB コンポーネント
View にスタイルを適用する方法
テーマを使用してアプリの外観を変更する
色のコントラストの重要性を理解する

要件

Android Studio の最新の安定版がインストールされているパソコン
Material Color Tool にアクセスするためのウェブブラウザとインターネット接続

2. デザインと色

マテリアルデザイン

マテリアルデザインは、光の反射や影など、現実世界での物体の質感に基づいており、見やすく魅力的なアプリの UI を一貫したデザインで作成するためのガイドラインとして利用できます。マテリアルテーマ設定では、色、タイポグラフィ、図形のカスタマイズに関するガイダンスにより、アプリにマテリアルデザインを適用できます。マテリアルデザインには、そのまま使用できるベースラインテーマが組み込まれています。このテーマは、アプリに合うように必要に応じて自由にカスタマイズできます。

色について

色というものは、現実世界でもデジタル領域でも、いたるところにあります。まず知っておくべきことは、色を誰もが同じように見ているとは限らないため、アプリを効果的に使用できるようにアプリの色を選択することが重要である、ということです。色のコントラストを十分に確保して色を選択することは、ユーザーが利用しやすいアプリを作成するための一要素です。

Color は、その色の RGB（赤、緑、青）コンポーネントを表す 3 つの 16 進数 #00-#FF（0-255）で表します。数値が大きいほど、そのコンポーネントの色が強くなります。

なお、透明度を表すアルファ値 #00-#FF を指定して色を定義することもできます（#00 = 0% = 完全に透明、#FF = 100% = 完全に不透明）。指定した場合、アルファ値は 4 つの 16 進数（ARGB）の先頭部分になります。アルファ値を指定しなかった場合、#FF = 100% 不透明とみなされます。

とはいえ、16 進数を自力で生成する必要はありません。色を選択すると数値が表示されるツールを利用することもできます。

Android アプリの colors.xml ファイルには、黒 100%（R=#00、G=#00、B=#00）と白 100%（R=#FF、G=#FF、B=#FF）の例が記載されています。

<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>

3. テーマ

スタイルでは、フォントの色、フォントサイズ、背景色など、View の属性を指定できます。

テーマとはスタイルの集まりであり、個々の View だけでなく、アプリ、アクティビティ、またはビュー階層に適用されます。テーマをアプリ、アクティビティ、ビュー、ビューグループに適用すると、その要素とすべての子にテーマが適用されます。テーマでは、ステータスバーやウィンドウバックグラウンドなど、ビュー以外の要素にもスタイルを適用できます。

Empty Activity プロジェクトを作成する

独自のアプリを使用している場合は、このセクションをスキップできます。作業用のアプリが必要な場合は、次の手順に沿って Empty Activity アプリを作成します。

Android Studio を開きます。
Empty Activity テンプレートを使用して、新しい Kotlin プロジェクトを作成します。
「TipTime」という名前を使用します。他の Codelab を実施していない場合は、デフォルト名「My Application」のままでも構いません。
最小 API レベル 19（KitKat）を選択します。
Android Studio でアプリの作成が完了したら、activity_main.xml を開きます（[app] > [res] > [layout] > activity_main.xml）。
必要に応じて [Code] ビューに切り替えます。
すべてのテキストを次の XML に置き換えます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical"
        android:text="@string/primary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:gravity="center_vertical"
        android:text="@string/secondary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@string/email_icon"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</LinearLayout>

strings.xml を開きます（[app] > [res] > [values] > strings.xml）。
すべてのテキストを次の XML に置き換えます。

<resources>
    <string name="app_name">TipTime</string>
    <string name="primary_color">Primary color</string>
    <string name="button">Button</string>
    <string name="secondary_color">Secondary color</string>
    <string name="email_icon">email icon</string>
</resources>

アプリを実行します。下のスクリーンショットのようになります。

アプリには TextView や Button が含まれており、選択した色が実際の Android アプリでどのように見えるかを確認できます。後のステップで、ボタンの色をテーマのプライマリカラーに変更します。

テーマカラーについて

Android アプリの UI で使用する色は、パーツごとに異なります。アプリで色を有意義に使用し、一貫して適用するために、テーマシステムでは、テキストやアイコンなどに使用する色に関連する名前の付いた 12 個の属性に色をグループ分けします。テーマですべてを指定する必要はありません。プライマリとセカンダリの色、さらにその色の上に描画されるテキストとアイコンの色を選択します。

「オン」の色は、さまざまなサーフェスに描画されるテキストとアイコンに使用されます。

#	名前	テーマ属性
1	Primary	`colorPrimary`
2	Primary Variant	`colorPrimaryVariant`
3	Secondary	`colorSecondary`
4	Secondary Variant	`colorSecondaryVariant`
5	Background	`colorBackground`
6	Surface	`colorSurface`
7	Error	`colorError`
8	On Primary	`colorOnPrimary`
9	On Secondary	`colorOnSecondary`
10	On Background	`colorOnBackground`
11	On Surface	`colorOnSurface`
12	On Error	`colorOnError`

デフォルトのテーマで定義されている色を確認します。

Android Studio で themes.xml を開きます（[app] > [res] > [values] > [themes] > themes.xml）。
テーマ名 Theme.TipTime は、アプリ名に基づいています。

<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

XML の行では、親テーマ Theme.MaterialComponents.DayNight.DarkActionBar も指定されています。DayNight は、マテリアルコンポーネントライブラリの定義済みテーマです。DarkActionBar は、アクションバーで暗い色を使用することを意味します。クラスが親クラスから属性を継承するのと同様に、テーマは親テーマから属性を継承します。

ファイル内の項目を見ると、名前が上の図の colorPrimary や colorSecondary などと似ていることがわかります。

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

カラーテーマ属性がすべて定義されるわけではありません。定義されていない色は親テーマから色を継承します。

また、Android Studio の左側の余白に小さなカラーサンプルが描画されます。
最後に、色は RGB 値を直接使用するのではなく、@color/purple_500 などのカラーリソースとして指定します。
colors.xml（[app] > [res] > [values] > colors.xml）を開くと、各カラーリソースの 16 進値が表示されます。先頭の #FF はアルファ値であり、色が 100% 不透明であることを意味します。

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

4. アプリのテーマカラーを選択する

テーマ属性について理解したところで、次に色を選択します。最も簡単な方法は、マテリアルチームが提供しているウェブベースのアプリ Color Tool を使用することです。このツールには事前定義されたカラーパレットがあり、さまざまな UI 要素で使用した場合の色合いを簡単に確認できます。

色を選択する

まず、[Primary] の色（colorPrimary）を選択します（例: [Green] の [900]）。カラーツールで、アプリモックアップでの見え方が表示されます。次に、Light バリアントと Dark バリアントも選択します。
[Secondary] セクションをタップし、目的のセカンダリカラー（colorSecondary）を選択します（例: [Light Blue] の [700]）。アプリモックアップでの色の見え方が表示されます。再度、Light バリアントと Dark バリアントも選択します。
なお、アプリのモックアップには 6 種類のモック「画面」があります。モックアップの上の矢印をタップして、各種画面について選択した色の具合を確認します。
カラーツールには [Accessibility] タブもあり、黒や白のテキストとともに使用したとき十分に読み取れるほど色がはっきりしているかを確認できます。アプリを使いやすくするには、色のコントラストを十分に強める必要があります。たとえば、小さいテキストの場合は 4.5:1 以上、大きいテキストの場合は 3.0:1 以上です。詳細については、色のコントラストをご覧ください。
primaryColorVariant と secondaryColorVariant について、推奨されるライトバリアントまたはダークバリアントを選択できます。

アプリに色を追加する

色のリソースを定義すると、アプリのさまざまな部分で同じ色を一貫して再利用しやすくなります。

Android Studio で colors.xml を開きます（[app] > [res] > [values] > colors.xml）。
既存の色の後に、上で選択した値 #1B5E20 を使用して green というカラーリソースを定義します。

<color name="green">#1B5E20</color>

他の色についてリソースの定義を続けます。ほとんどの色はカラーツールにあります。なお、green_light と blue_light の値はツールの表示とは異なります。これらは後のステップで使用します。

`green`	`#1B5E20`
`green_dark`	`#003300`
`green_light`	`#A5D6A7`
`blue`	`#0288D1`
`blue_dark`	`#005B9F`
`blue_light`	`#81D4FA`

黒と白についてはカラーリソースがすでに定義されているため、定義する必要はありません。

アプリの colors.xml ファイルは次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

テーマで色を使用する

選択した色に名前を付けたため、名前を付けた色をテーマで使用していきます。

themes.xml を開きます（[app] > [res] > [values] > [themes] > themes.xml）。
colorPrimary を、選択したプライマリカラー（@color/green）に変更します。
colorPrimaryVariant を @color/green_dark に変更します。
colorSecondary を @color/blue に変更します。
colorSecondaryVariant を @color/blue_dark に変更します。
P のテキストと S のテキストが白（#FFFFFF）と黒（#000000）のままであることを確認します。独自のカラーツールを使用しているときに他の色を選択するには、追加でカラーリソースを定義することが必要となる場合があります。

完了すると、テーマは次のようになります。

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

エミュレータまたはデバイスでアプリを実行し、新しいテーマでアプリがどのように表示されるかを確認します。

5. ダークモード

アプリテンプレートにはデフォルトのライトテーマが含まれ、ダークテーマバリアントも含まれています。ダークテーマでは、より暗く、落ち着いた色が使用されており、以下の効果があります。

電力使用量を大幅に削減できます（削減できる量はデバイスの画面テクノロジーに左右されます）。
視力の低いユーザーや明るい光に敏感なユーザーにとって、画面の見やすさが向上します。
すべてのユーザーにとって、暗い場所でのデバイスの使いやすさが向上します。

ダークテーマの色を選択する

ダークテーマでも、色は判読しやすくする必要があります。ダークテーマでは暗いサーフェス色を使用し、色のアクセントは限定されます。判読しやすくするために、通常はライトテーマのプライマリカラーの彩度を下げたものを使用します。

ダークテーマで柔軟性とユーザビリティを高めるには、デフォルトのカラーテーマ（彩度が 900 から 500 の範囲）ではなく、明るめの色調（200 から 50）をダークテーマで使用することをおすすめします。先ほどはライトカラーとして、緑色 200 と水色 200 を選択しました。アプリでは、ライトカラーをメインの色として使用し、プライマリカラーをバリアントとして使用します。

テーマのダークバージョンを更新する

themes.xml (night) を開きます。[Project] ペインで [Android] を選択し、[app] > [res] > [values] > [themes] > themes.xml (night) に移動します。

colorPrimary を、選択したプライマリカラーのライトバリアント（@color/green_light）に変更します。
colorPrimaryVariant を @color/green に変更します。
colorSecondary を @color/blue_light に変更します。
colorSecondaryVariant を @color/blue_light に変更します。colorSecondaryVariant は colorSecondary と同じ色にすることができます。

完了すると、themes.xml (night) ファイルは次のようになります。

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

この時点で、colors.xml で定義された元の色（purple_200 など）は使用されなくなるため、削除できます。

ダークテーマを試す

デバイスでダークモードを有効にすると、ダークモードでテーマがどのように表示されるかを確認できます。

API 28（Android 9）

アプリを再度実行します。
設定アプリに切り替えます。
[電池] で [バッテリーセーバー] を探します。

[今すぐ ON にする] を押します。

後述の手順に進みます。

API 29（Android 10）以降

アプリを再度実行します。
設定アプリに切り替えます。
[ディスプレイ] セクションで、[ダークテーマ] スイッチを探します。

[ダークテーマ] をオンに切り替えると、デバイスが夜間モードに切り替わります。

いずれかの API

アプリに戻って違いを確認します。

最もわかりやすい変更点は、明るい背景に暗いテキストではなく、暗い背景に明るいテキストが表示されることです。また、ライトテーマよりもダークテーマの方が、ボタンに使用される色の鮮やかさが抑えられています。

これで、ライトテーマとダークテーマの両方で、新しいアプリテーマを作成できました。

6. 解答コード

この Codelab では、テーマの色のカスタマイズに重点を置いていますが、テキスト、図形、ボタンのスタイルなど、テーマでカスタマイズできる属性は多岐にわたります。アプリのテーマをカスタマイズするその他の方法については、こちらの記事をご覧ください。Android のスタイル設定: 共通のテーマ属性

この Codelab の解答コードを以下に示します。

colors.xml（[app] > [res] > [values] > colors.xml）

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

values/themes.xml（[app] > [res] > [values] > [themes] > themes.xml）

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

values-night/themes.xml（[app] > [res] > [values] > [themes] > themes.xml (night)）

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

7. まとめ

Material Color Tool を使用して、アプリテーマの色を選択します。
または、マテリアルパレットジェネレータを使用すると、カラーパレットを選択できます。
colors.xml ファイルでカラーリソースを宣言し、再利用しやすくします。
ダークテーマを使用すると、消費電力が少なくなり、アプリが暗い場所でも読みやすくなります。