サイトのトップへ戻る

Android Studio ドキュメント 日本語訳

サイト内検索

テーマエディターを使ってアプリのテーマをデザインする

Android Studio には、あなたが以下のような作業する際に視覚的にサポートしてくれるテーマエディーターと呼ばれる機能があります:

  • アプリのテーマの作成と編集。
  • 別のリソース類で使うためにテーマを調整する。
  • 一般的なUI要素で色を変更した場合の影響を視覚的に確認する。
  • このページでは、テーマエディターを使って行える基本的な作業について紹介し、それをどのように行うかについても説明します。



    テーマエディターの基本

    この項目では、テーマエディターを起動する方法、それがどのように配置されているかについて説明します。



    テーマエディターを起動する

    テーマエディターを開く方法は二通りあります。:

  • styles.xmlのようなスタイルXML ファイルを開き、 ファイルウィンドウの右上辺りにあるOpen editor をクリックします。
  • Tools メニューから、Android >Theme Editorをクリックします。



    テーマエディターの説明

    テーマエディターのメイン画面は二つの項目に分かれています。 エディターの左側では、アプリバーや持ち上げ型ボタンのような特定のUI要素が、 現在のテーマを適用した時にどのような見た目になるかを表示します。 エディターの右側では、現在プレビューしているテーマの名前、テーマが定義されているモジュール、Theme parentcolorPrimaryのようなテーマリソースの設定情報が表示されます。 これらリソースの設定を変更することで、デザインテーマを編集できます。



    テーマと色

    テーマエディターを使用することで、新しいテーマの作成、既存のテーマの編集、テーマを構成する色の管理を行うことができます。



    テーマを新規作成する

    テーマを作成するには、以下の手順に沿って作業します:

    1. テーマエディターの右側の上部辺りにある Themeドロップダウンメニューを開きます。
    2. Create New Themeをクリックします。
    3. New Theme ダイアログで、新規作成するテーマの名前を入力します。
    4. Parent theme name の一覧から、初期リソースの継承元となる親を選んでクリックします。


    テーマの名前を変更する

    テーマ名名前を変更するには、以下の手順を実行します:

    1. テーマエディターの右側の上部辺りにある Themeドロップダウンメニューを開きます。
    2. Rename theme-nameをクリックします。
    3. Rename ダイアログで、テーマの新しい名前を入力します。
    4. (任意) このように変わるかを見てみるには、Previewをクリックします。
    5. 変更を適用するには、Refactorをクリックします。


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

    colorPrimaryのような既存のカラーリソースを変更するには、以下の手順に沿って作業します:

    1. 変更したいリソース名の隣にある、色の付いた四角範囲をクリックします。 Resources ダイアログが表示されます。 ダイアログの左側には色の一覧が表示されます。 右側には、現在選択しているリソースカラーの設定と情報が表示されます。
    2. 以下のうちのどれか一つを行って、テーマリソースの色を設定します。:
      • マテリアルパレットの中から色を選択します。
      • project項目にある定義済みカラーの中から色を選択します。必要に応じて、色の値、透明度、名前を変更することができます。
      • Resourcesダイアログの右上にあるドロップダウンメニューからAdd New Resource > New color Value とクリックし、プロジェクトで新規の色を定義します。色の値、透明度、名前を指定します。
    3. プロジェクトでカスタムカラーの作成や編集を行った場合、 Custom colorの項目の隣にあるCLOSEST MATERIAL COLORをクリックすることで、 マテリアルパレット上の最も似た色に一致させることができます。 Android Studio は色の値と透明値を最も近いマテリアルカラーに変更し、Custom colorをマテリアルパレットカラー名前に変更します。


    状態一覧と色を表示する

    テーマエディターを使用することで、様々な状態に関連付けられた色をプレビューすることができます。 プレビューを行うには、状態一覧の名前の隣にある四角いカラーセットをクリックしてResourcesダイアログを開きます。 Resources ダイアログでは、Selectedのような状態情報とその状態に関連付けられたカラー値の一覧が表示されます。 状態の色情報をクリックして、異なるカラー値を選ぶことができます。

    状態情報をより細かく制御するために、状態情報が定義されたXMLファイル上でプロパティを直接表示して編集することができます。 詳細については、ColorStateList クラスのドキュメントを参照してください。



    端末固有の設定

    アプリで端末固有設定をサポートするかどうかを選ぶことができます。これを以下の手順で行えます:

    1. Resourcesダイアログの下部辺りの、 Device Configurationの隣にある三角印をクリックします。 するとDevice Configuration の項目が展開され、リソースセット・リソースを含んでいるXML ファイル名・ファイルを配置する設定固有ディレクトリの一覧が表示されます。
    2. 必要に応じて、XML ファイル名を変更します。
    3. サポートする端末固有設定に対応するディレクトリの隣にあるチェックボックスにチェックを入れます。 この設定で何も指定しなかった場合、既定ではvalues ディレクトリが使用されます。

    ディレクトリ名と設定の関連性については、 複数画面をサポートするを参照してください。 サポートしているディレクトリ名については、 リソースの提供を参照してください。




    エンジェル戦記