Theme Editor でアプリテーマをデザインする

警告: バージョン 3.3 以降の Android Studio には Theme Editor が含まれなくなりました。

Android Studio には、以下の作業に役立つ Theme Editor というビジュアル ツールが含まれています。

  • アプリのテーマを作成、編集する。
  • さまざまなリソース分類子に合わせてテーマを調整する。
  • 一般的な UI 要素のカラー変更の効果を視覚化する。

このページでは、Theme Editor で実行できる基本タスクと、その実行方法について説明します。

Theme Editor の基礎

このセクションでは、Theme Editor にアクセスする方法と、Theme Editor のレイアウトについて説明します。

Theme Editor にアクセスする

Theme Editor を開くには、次の 2 つの方法があります。

  • スタイル XML ファイル（styles.xml など）を開き、ファイル ウィンドウの右上付近の [Open editor] をクリックする。
  • [Tools] メニューから、[Theme Editor] を選択する。

Theme Editor のナビゲーション

Theme Editor のメイン画面は 2 つの部分に分かれています。エディタの左側には、アプリバーや浮き出しボタンなど、特定の UI 要素に現在のテーマを適用した場合のプレビューが表示されます。エディタの右側には、現在プレビュー中のテーマの名前、そのテーマが定義されているモジュール、さらに [Theme parent] や [colorPrimary] などのテーマリソースの設定が表示されます。これらのリソース設定を変更することにより、デザインテーマを変更できます。

テーマとカラー

Theme Editor では、新規テーマの作成、既存テーマの変更、テーマを構成するカラーの管理が可能です。

新しいテーマを作成する

テーマを作成するには、次の手順に従います。

  1. Theme Editor の右上付近にある [Theme] プルダウン メニューを開きます。
  2. [Create New Theme] をクリックします。
  3. [New Theme] ダイアログで、新しいテーマの名前を入力します。
  4. [Parent theme name] リストで、初期リソースの継承元になる親テーマをクリックします。

テーマの名前を変更する

テーマの名前を変更するには、次の手順に従います。

  1. Theme Editor の右上付近にある [Theme] プルダウン メニューを開きます。
  2. [Rename theme-name] をクリックします。
  3. [Rename] ダイアログで、テーマの新しい名前を入力します。
  4. （任意）変更による表示の変化を確認するには、[Preview] をクリックします。
  5. 変更を適用するには、[Refactor] をクリックします。

カラーリソースを変更する

colorPrimary などの既存のカラーリソースを変更するには、次の手順に従います。

  1. Theme Editor で、変更するリソースの名前の横にある色付きの四角形をクリックします。 [Resources] ダイアログが表示されます。このダイアログの左側にはカラーグループのリストが表示され、右側には現在選択されているカラーリソースの設定と情報が表示されます。
  2. 左パネルでカラーを選択するか、後述のように新しいカラーを定義して、テーマリソースのカラーを設定します。

カラーを選択する

カラーは、[Resources] ダイアログの左の列に、次のグループごとに分かれて一覧表示されます。

  • [Project]: プロジェクト内のカラーです。一部のカラーはプロジェクト ソースに含まれているため編集できますが、一部のカラーはプロジェクトに挿入したライブラリに含まれているため編集できません。
  • [android]: Android 名前空間に属するカラーリソースです。Android フレームワークに含まれているため、編集できません。
  • [Theme Attributes]: 現在選択されているテーマの属性です。テーマによって参照され、どのテーマを選択したかによって変化します。テーマ属性は、[Resources] ダイアログ内では編集できません。

新しいカラーを定義する

    図 1.カラーエディタ

  1. [Resources] ダイアログの右上にあるプルダウン メニューで、[Add new resource] > [New color Value] をクリックします。[Resources] ダイアログに、[Name] フィールドが空白になっている編集可能な右ペインが表示されます。ここで、カスタムカラーの名前を入力できます。
  2. 次の手順に従って、カスタムカラーを作成します。各ステップは、図 1 の吹き出しに対応しています。
    1. 空白の [Name] フィールドに、新しいカラー値の名前を入力します。名前にスペースと特殊文字は使用できません。アンダースコアと数字は使用できます。
    2. カラースケール、[Custom color] フィールド、スポイト:
      • カラースケールで、目的のカラーをクリックします。[Custom color] フィールドにカラーが表示されます。
      • [Custom color] フィールドの左にあるスポイトを使用して、カラーを選択できます。スポイト をクリックし、パソコン画面の任意の場所で、表示されているアイテムをクリックします。[Custom color] フィールドの色が選択したカラーに変わります。
    3. [Custom color] フィールドのすぐ下の左側にある編集可能フィールドとプルダウン メニューを使用すると、RGB、HSB、ARGB のいずれかの色を数値で指定できます。一番右の編集可能フィールドに、指定した色を表す 16 進数値が表示されます。
    4. カラーの不透明度と色相を設定するには、カラースケールの下のスライダーを操作します。
    5. 使用可能な定義済みのカラーを示す四角形を選択します。[Custom color] フィールドにカラーが表示され、名前フィールドの値が選択したカラーの名前に変わります。
  3. [OK] をクリックして設定を保存します。[Resources] ダイアログが閉じて、Theme Editor に戻ります。

カラーを編集する

編集可能なカラーを変更できます。カラーが編集可能な場合、編集可能なカラー、色相、不透明度、名前フィールド、デバイス設定フィールドが表示されます。一部のフィールドが編集可能で他のフィールドが編集できない理由を確認するには、カラーを選択するをご覧ください。

  1. 設定を調整します。
  2. [OK] をクリックします。

マテリアル カラーに一致させる

プロジェクトのカスタムカラーを定義または変更した場合、[Custom color] の横にある [CLOSEST MATERIAL COLOR] をクリックすると、カラーを最も近いマテリアル パレットカラーに一致させることができます。Android Studio により、選択したカラーの色と不透明度の値が最も近いマテリアル カラーに変更され、[Custom color] の値がマテリアル パレットのカラー名に置き換えられます。

注: [CLOSEST MATERIAL COLOR] は、カラーがまだマテリアル カラーでない場合にのみ表示されます。

状態リストとカラーを表示する

Theme Editor では、さまざまな状態に関連付けられたカラーをプレビューできます。そのためには、編集可能な状態リストリソースの名前の横にあるカラー設定用の四角形をクリックして、[Resources] ダイアログを開きます。[Resources] ダイアログには、状態（「Selected」など）のリストと、状態に関連付けられたカラー値が表示されます。カラー値を変更するには、状態に対応するカラーをクリックします。

状態自体をきめ細かく管理するには、状態を定義している XML ファイルを開き、状態のプロパティを直接参照して編集します。詳細については、ColorStateList クラスのドキュメントをご覧ください。

デバイス固有の構成

カラーが編集可能な場合は、アプリがサポートするデバイス固有の構成を選択できます。そのためには、次の手順を実施します。

  1. [Resources] ダイアログを開きます。[Resources] ダイアログを開く方法については、カラーリソースを変更するをご覧ください。
  2. プロジェクトのカラーを選択して、右ペインの下部にある [Device Configuration] をクリックして展開します。リソースを含む XML ファイルのソースセットと名前、そのファイルの配置先である構成固有のディレクトリの一覧が表示されます。
  3. 必要に応じて、XML ファイル名を変更します。
  4. サポートするデバイス固有の構成に対応するディレクトリの横のチェックボックスをオンにします。ディレクトリを指定していない構成の場合、デフォルトで values ディレクトリが使用されます。

ディレクトリ名と構成の関係については、複数の画面をサポートするをご覧ください。サポートされるディレクトリ名の詳細については、リソースタイプをグループ化するをご覧ください。