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] メニューから [Android] > [Theme Editor] の順にクリックします。

    Theme Editor のナビゲーション

    Theme Editor のメイン画面は 2 つのセクションに分割されています。Theme Editor の左側には、アプリバー、浮き出しボタンなど、特定の UI 要素に現在のテーマを適用した場合のプレビューが表示されます。Theme Editor の右側には、現在プレビュー中のテーマ名、そのテーマが定義されているモジュール、さらに [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. 変更するリソースの名前の横にある色付きの四角形をクリックして、[Resources] ダイアログを表示します。このダイアログの左側には色のリストが表示され、右側には現在選択されているリソースの色の設定と情報が表示されます。
    2. 次のいずれかの操作で、テーマリソースの色を設定します。
      • 色のリストからマテリアル パレット色を選択する。
      • 色のリストからプロジェクトで定義されている色を選択して、必要に応じて色の値、不透明度、名前を変更する。
      • [Resources] ダイアログの左下にあるプルダウン メニューで [New Resource] > [New color Value] の順にクリックし、色の値、 不透明度、名前を指定してプロジェクトに新しい色を定義する。
    3. カスタム プロジェクト色を作成または変更した場合は、[Custom color] の横にある [CLOSEST MATERIAL COLOR] をクリックすると、その色が最も近いマテリアル パレット色と一致しているかどうかを確認できます。Android Studio によって、選択した色および色の不透明度が、それに最も近いマテリアル色に変更され、[Custom color] がマテリアル パレットにある色の名前で置き換えられます。

    状態リストと色の表示

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

    状態自体を詳細に管理するには、状態を定義している XML ファイルを表示して直接編集します。詳細については、ColorStateList クラスのドキュメントをご覧ください。

    端末固有の設定

    アプリでサポートする端末固有の設定を選択できます。手順は次のとおりです。

    1. [Resources] ダイアログの下部にある [Device Configuration] の横の三角形をクリックします。[Device Configuration] セクションが展開され、ソースセット、リソースを含む XML ファイルの名前、そのファイルの配置先である設定固有のディレクトリのリストが表示されます。
    2. 必要に応じて、XML ファイル名を変更します。
    3. サポートする端末固有の設定に対応するディレクトリの横にあるチェックボックスをオンにします。ディレクトリを指定していないすべての設定については、デフォルトで values ディレクトリが使用されます。

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