Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

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 つの方法があります。

  • styles.xml などのスタイル 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] フィールドのすぐ下にある編集可能なフィールドとプルダウン メニューを使用すると、RGBHSB、または ARGB の色を数値で指定できます。一番右の編集可能フィールドに、指定した色を表す 16 進数値が表示されます。
    4. カラーの不透明度と色相を設定するには、カラースケールの下のスライダーを操作します。
    5. 使用可能な定義済みのカラーを示す四角形を選択します。[Custom color] フィールドにカラーが表示され、名前フィールドが選択したカラーの名前に変わります。
  3. [OK] をクリックして、設定を保存します。[Resources] ダイアログが閉じて、Theme Editor に戻ります。

カラーを変更する

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

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

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

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

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

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

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

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

デバイス固有の構成

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

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

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