ビューを使用して UI を開発する

Layout Editor を使用すると、レイアウト XML を記述する代わりに、UI 要素をビジュアル デザイン エディタにドラッグすることで、View ベースのレイアウトをすばやく作成できます。Design Editor では、さまざまな Android デバイスとバージョンでレイアウトをプレビューできます。また、さまざまな画面サイズで適切に動作するように、レイアウトを動的にサイズ変更することもできます。

Layout Editor は、ConstraintLayout を使用してレイアウトを作成する場合に特に効果的です。

このページでは、Layout Editor の概要について説明します。レイアウトの基本については、レイアウトをご覧ください。

Layout Editor の概要

Layout Editor は、XML レイアウト ファイルを開くと表示されます。

Layout Editor
図 1. Layout Editor。
  1. Palette: レイアウトにドラッグできるさまざまなビューとビューグループが含まれています。
  2. Component Tree: レイアウト内のコンポーネントの階層を表示します。
  3. Toolbar: エディタでのレイアウトの外観の設定や、レイアウト属性の変更を行うボタンがあります。
  4. Design Editor: デザインビュー、ブループリント ビュー、またはその両方でレイアウトを編集できます。
  5. Attributes: 選択したビューの属性のコントロールが表示されます。
  6. 表示モード: [Code] [Code] モードアイコン モード、[Split] [Split] モードアイコン [Design] [Design] モードアイコン モードのいずれかでレイアウトを表示できます。[Split] モードでは、[Code] ウィンドウと [Design] ウィンドウが同時に表示されます。
  7. ズームとパンのコントロール: エディタ内のプレビューのサイズと位置を制御します。

XML レイアウト ファイルを開くと、図 1 のように、デフォルトで Design Editor が開きます。Text Editor でレイアウト XML を編集するには、ウィンドウの右上隅にある [Code] ボタン [Code] モードアイコン をクリックします。[Code] ビューでレイアウトを編集している間は、[Palette]、[Component Tree]、[Attributes] の各パネルは使用できません。

ヒント: デザイン エディタとテキスト エディタを切り替えるには、Alt（macOS では Control）+ Shift、右または左の矢印キーを押します。

プレビューの表示方法を変更する

Design Editor の最上段にあるボタンを使用すると、エディタ内のレイアウトの外観を設定できます。

レイアウトの外観を設定する Layout Editor ツールバーのボタン
図 2. レイアウトの外観を設定する Layout Editor のツールバーにあるボタン
  1. Design and Blueprint: エディタでレイアウトを表示する方法を選択します。B を押して、これらのビュータイプを切り替えることもできます。
    • [Design] を選択すると、レイアウトのレンダリング プレビューが表示されます。
    • 各ビューのアウトラインのみを表示するには、[Blueprint] を選択します。
    • [Design + Blueprint] を選択すると、両方のビューを並べて表示できます。
  2. 画面の向きとレイアウトのバリエーション: 画面の向きを横向きか縦向きにするか、アプリが代替レイアウトを提供する他の画面モード（夜間モードなど）を選択します。このメニューには、このページのセクションで説明しているように、新しいレイアウト バリアントを作成するためのコマンドも含まれています。キーボードの O キーを押して向きを変更することもできます。

  3. System UI Mode: アプリでダイナミック カラーを有効にしている場合は、壁紙を切り替え、ユーザーが選択した壁紙に対してレイアウトがどのように反応するかを確認します。最初にテーマをマテリアル ダイナミック カラーテーマに変更してから、壁紙を変更する必要があります。

  4. デバイスタイプとサイズ: デバイスタイプ（スマートフォン、タブレット、Android TV、Wear OS）と画面構成（サイズと密度）を選択します。事前設定済みの複数のデバイスタイプと独自の AVD 定義から選択できます。また、図 3 に示すように、リストから [Add Device Definition] を選択して新しい AVD を作成することもできます。

    • デバイスのサイズを変更するには、レイアウトの右下隅をドラッグします。
    • D を押してデバイスリストを順に切り替えてください。

    このメニューの [Reference Devices] に対してレイアウトをテストすると、実際のデバイスのレイアウト状態に合わせてアプリが適切にスケーリングされます。

    [Reference Devices] が表示されたデバイスリスト メニュー
    図 3. 参照デバイスが表示されているデバイスリスト

  5. API バージョン: レイアウトをプレビューする Android のバージョンを選択します。利用可能な Android バージョンのリストは、SDK Manager を使用してインストールした SDK プラットフォームのバージョンによって異なります。

  6. アプリのテーマ: プレビューに適用する UI テーマを選択します。この方法は、サポートされているレイアウト スタイルでのみ機能するため、このリストのテーマの多くはエラーになります。

  7. 言語: UI 文字列の言語を選択します。このリストには、文字列リソースで利用できる言語だけが表示されます。翻訳を編集する場合は、メニューから [Edit Translations] をクリックします。翻訳の操作の詳細については、Translations Editor を使用して UI をローカライズするをご覧ください。

新しいレイアウトの作成

アプリ用に新しいレイアウトを追加する場合、まず、プロジェクトのデフォルト layout/ ディレクトリ内にデフォルト レイアウト ファイルを作成します。このデフォルト レイアウトは、すべてのデバイス構成に適用されます。デフォルトのレイアウトを作成したら、このページのセクションで説明するように、大画面向けの特定のデバイス構成用にレイアウト バリエーションを作成できます。

新しいレイアウトの作成は、以下のいずれかの方法で行います。

Android Studio のメインメニューを使用する

  1. [Project] ウィンドウで、レイアウトを追加するモジュールをクリックします。
  2. メインメニューで、[File] > [New] > [XML] > [Layout XML File] を選択します。
  3. 表示されたダイアログで、ファイル名、ルート レイアウト タグ、レイアウトが属するソースセットを指定します。
  4. [Finish] をクリックすると、レイアウトが作成されます。

[Project] ビューを使用する

  1. [Project] ウィンドウで、[Project] ビューを選択します。
  2. レイアウトを追加するレイアウト ディレクトリを右クリックします。
  3. 表示されるコンテキスト メニューで、[New] > [Layout Resource File] をクリックします。

[Android] ビューを使用する

  1. [Project] ウィンドウで、[Android] ビューを選択します。
  2. layout フォルダを右クリックします。
  3. 表示されるコンテキスト メニューで、[New] > [Layout Resource File] を選択します。

Resource Manager を使用する

  1. Resource Manager で、[Layout] タブを選択します。
  2. [+] ボタンをクリックして、[Layout Resource File] をクリックします。

レイアウト バリエーションを使用してさまざまな画面に合わせて最適化する

レイアウト バリエーションとは、特定の画面サイズまたは向きに合わせて既存のレイアウトを最適化したバージョンです。

推奨レイアウト バリエーションを使用する

Android Studio には一般的なレイアウト バリエーションがあらかじめ用意されており、個々のプロジェクトで使用できます。推奨レイアウト バリエーションを使用する手順は次のとおりです。

  1. デフォルトのレイアウト ファイルを開きます。
  2. ウィンドウの右上隅にある [Design] [Design] モードアイコン アイコンをクリックします。
  3. レイアウト ファイルの名前が [Action to switch and create ifiers for layout files] プルダウンに表示されます。プルダウンを選択します。
  4. プルダウン リストで、[Create Landscape Qualifier] や [Create Tablet Qualifier] などのバリアントを選択します。
    [Create Modifiers] プルダウン
    図 4.レイアウト修飾子のプルダウン リスト

新しいレイアウト ディレクトリが作成されます。

独自のレイアウト バリエーションを作成する

独自のレイアウト バリエーションを作成する手順は次のとおりです。

  1. デフォルトのレイアウト ファイルを開きます。
  2. ウィンドウの右上にあるデザイン アイコン デザインモード アイコン をクリックします。
  3. レイアウト ファイルの名前が [Action to switch and create ifiers for layout files] プルダウンに表示されます。プルダウンを選択します。

  4. プルダウン リストで [Add Resource Qualifier] を選択します。（上記の図 4 をご覧ください）。

    [Select Resource Directory] ダイアログが表示されます。

  5. [Select Resource Directory] ダイアログで、バリアントのリソース修飾子を定義します。

    1. [Available qualifieds] リストから修飾子を選択します。
    2. [追加] ボタン [Add Qualifier] ボタン をクリックします。
    3. 必要な値を入力します。
    4. 他の修飾子を追加するには、上記の手順を繰り返します。

  6. すべての限定子を追加したら、[OK] をクリックします。

同じレイアウトに複数のバリエーションがある場合は、[Action to switch and create qualifieds for layout files] プルダウンからバリアントを選択することで、バリエーションを切り替えることができます。

さまざまな画面用のレイアウトを作成する方法について詳しくは、各種の画面サイズのサポートをご覧ください。

ビューやレイアウトを変換する

ビューを別の種類のビューに変換したり、レイアウトを別の種類のレイアウトに変換したりできます。

  1. エディタ ウィンドウの右上隅にある [Design] ボタンをクリックします。
  2. [Component Tree] で、ビューまたはレイアウトを右クリックし、[Convert view] をクリックします。
  3. 表示されるダイアログで、新しいタイプのビューまたはレイアウトを選択して、[Apply] をクリックします。

レイアウトを ConstraintLayout に変換する

レイアウトのパフォーマンスを向上させるには、古いレイアウトを ConstraintLayout に変換します。ConstraintLayout は制約ベースのレイアウト システムを使用するため、ネストされたビューグループなしでほとんどのレイアウトを作成できます。

既存のレイアウトを ConstraintLayout に変換する手順は次のとおりです。

  1. Android Studio で既存のレイアウトを開きます。
  2. エディタ ウィンドウの右上隅にある [Design] [Design] モードアイコン アイコンをクリックします。
  3. [Component Tree] で、対象のレイアウトを右クリックして、[Convert your-layout-type to ConstraintLayout] をクリックします。

ConstraintLayout の詳細については、ConstraintLayout を使用してレスポンシブ UI を作成するをご覧ください。

Palette 内でアイテムを検索する

[Palette] 内でビューまたはビューグループを名前に基づいて検索するには、[Palette] の上部にある [Search] ボタン [Palette Search] ボタン をクリックします。また、[Palette] ウィンドウがフォーカスされていれば、アイテムの名前を入力することもできます。

[Palette] の [Common] カテゴリに、よく使用されるアイテムがあります。このカテゴリにアイテムを追加するには、[Palette] でビューまたはビューグループを右クリックし、コンテキスト メニューで [Favorite] をクリックします。

Palette からドキュメントを開く

ビューまたはビューグループに関する Android Developers リファレンス ドキュメントを開くには、[Palette] で UI 要素を選択して、Shift+F1 キーを押します。

ビューまたはビューグループのマテリアル ガイドライン ドキュメントを表示するには、[Palette] で UI 要素を右クリックして、コンテキスト メニューから [Material Guidelines] を選択します。アイテムに特定のエントリが存在しない場合は、マテリアル ガイドラインのドキュメントのホームページが開きます。

レイアウトにビューを追加する

レイアウトの作成を開始するには、ビューとビューグループを [Palette] から Design Editor にドラッグします。ビューをレイアウトに配置すると、ビューとその他のレイアウトとの関係を示す情報が Design Editor に表示されます。

ConstraintLayout を使用している場合、制約推測機能と自動接続機能により自動的に制約を作成できます。

ビュー属性を編集する

電源直結型の
図 5.[Attributes] パネル

ビュー属性は、Layout Editor の [Attributes] パネルで編集できます。このウィンドウはデザイン エディタが開いている場合にのみ使用できるため、[Design] モードまたは [Split] モードのいずれかでレイアウトを表示します。

ビューを選択すると、[Component Tree] または [Design Editor] でビューをクリックすると、図 5 に示すように [Attributes] パネルに次のものが表示されます。

  1. Declared Attributes: レイアウト ファイルで指定された属性をリストします。属性を追加するには、セクションの上部にある [追加] ボタン 属性追加ボタン をクリックします。
  2. Layout: ビューの幅と高さのコントロールが含まれます。ConstraintLayout のビューの場合、このセクションには制約のバイアスも表示され、ビューで使用されている制約がリスト表示されます。ConstraintLayout を使用してビューのサイズを制御する方法について詳しくは、ビューサイズを調整するをご覧ください。
  3. Common Attributes: 選択したビューの一般的な属性が一覧表示されます。利用可能な属性をすべて表示するには、ウィンドウの下部にある [All Attributes] セクションを展開します。
  4. Search: 特定のビュー属性を検索できます。

  5. 各属性値の右側にあるアイコンは、その属性値がリソース参照であるかどうかを示します。これらのインジケーターは、値がリソース参照の場合は中身 塗りつぶしインジケーター アイコン で、値がハードコードされている場合は空の 枠線インジケーター アイコン になり、ハードコードされた値を一目でわかるようになっています。

    いずれかの状態のインジケーターをクリックすると、[リソース] ダイアログが開きます。このダイアログで、対応する属性のリソース参照を選択できます。

  6. 属性値の周囲が赤色でハイライト表示されている場合は、値にエラーがあることを示します。たとえば、レイアウト定義属性に無効なエントリが入力されていることを示すエラーが考えられます。

    オレンジ色のハイライトは、この値に関する警告を示します。たとえば、リソース参照が想定されるハードコードされた値を使用すると、警告が表示されることがあります。

ビューにサンプルデータを追加する

Android レイアウトの多くはランタイム データに依存しているため、アプリの設計時にレイアウトのデザインを可視化することが難しい場合があります。Layout Editor 内からサンプル プレビュー データを TextView、ImageView、または RecyclerView に追加できます。

[Design-time View Attributes] ウィンドウを表示するには、これらのビュータイプのいずれかを右クリックして、[Set Sample Data] を選択します（図 6 を参照）。

[Design-time View Attributes] ウィンドウ
図 6.[Design-time View Attributes] ウィンドウ

TextView は、さまざまなサンプル テキスト カテゴリから選択できます。サンプル テキストを使用する場合、TextView の text 属性には選択したサンプルデータが入力されます。なお、[Design-time View Attributes] ウィンドウでサンプル テキストを選択できるのは、text 属性が空の場合に限られます。

サンプルデータが入力されたテキストビュー
図 7.サンプルデータを含む TextView。

ImageView の場合は、さまざまなサンプル画像から選択できます。サンプル画像を選択すると、ImageView の tools:src 属性（AndroidX を使用している場合は tools:srcCompat）に値が入力されます。

サンプルデータが入力された画像ビュー
図 8.サンプルデータを含む ImageView。

RecyclerView の場合は、サンプル画像とサンプル テキストを含む一連のテンプレートから選択できます。このテンプレートを使用すると、res/layout ディレクトリに recycler_view_item.xml というファイルが追加されます。このファイルには、サンプルデータのレイアウトが含まれています。また、サンプルデータを適切に表示するため、RecyclerView にメタデータが追加されます。

サンプルデータが入力されたリサイクラー ビュー
図 9.サンプルデータを含む RecyclerView。

レイアウト内の警告やエラーを表示する

レイアウトに問題があると、Layout Editor は [Component Tree] 内の該当ビューの横に通知アイコンを表示します。通知には、エラーの場合は赤色の丸型感嘆符アイコン レイアウト エラーを示す赤色の丸型感嘆符アイコン が使用され、警告の場合はオレンジ色の三角形型感嘆符アイコン レイアウト警告を示すオレンジ色の三角形型感嘆符アイコン が使用されます。アイコンをクリックすると詳細が表示されます。

ツールバーの [Show Warnings and Errors] ボタン（レイアウト エラーを示す赤色の丸型感嘆符アイコン または レイアウト警告を示すオレンジ色の三角形型感嘆符アイコン）をクリックすると、エディタの下部にあるウィンドウに、検出済みの問題がすべて表示されます。

フォントをダウンロードしてテキストに適用する

Android 8.0（API レベル 26）または Jetpack Core ライブラリを使用している場合は、次の手順に沿って、数百ものフォントから選択できます。

  1. Layout Editor で [Design] [Design] モードアイコン アイコンをクリックして、Design Editor でレイアウトを表示します。
  2. テキストビューを選択します。
  3. [Attributes] パネルで [textAppearance] を展開し、[fontFamily] ボックスを展開します。
  4. リストの一番下までスクロールして、[More Fonts] をクリックし、[Resources] ダイアログを開きます。
  5. [リソース] ダイアログでフォントを選択するには、リストを参照するか、上部の検索バーに入力します。[Downloadable] でフォントを選択した場合は、[Create downloadable font] をクリックしてフォントを実行時にダウンロード可能なフォントとして読み込むか、[Add font to project] をクリックして TTF フォント ファイルを APK にパッケージ化します。[Android] の下に表示されるフォントは Android システムによって提供されるものであるため、ダウンロードしたり APK にバンドルしたりする必要はありません。
  6. [OK] をクリックして終了します。

Layout Validation

Layout Validation は、さまざまなデバイスや表示設定のレイアウトを同時にプレビューするビジュアル ツールであり、プロセスの早期にレイアウトの問題を把握できます。この機能を使用するには、IDE ウィンドウの右上にある [Layout Validation] タブをクリックします。

[Layout Validation] タブのスクリーンショット

図 10.[Layout Validation] タブ。

使用可能な構成セットを切り替えるには、[Layout Validation] ウィンドウの上部にある [Reference Devices] プルダウンから次のいずれかを選択します。

  • 参照デバイス
  • カスタム
  • 色覚特性
  • フォントサイズ

Layout Validation ツールのプルダウン メニューのスクリーンショット

図 11. [Reference Devices] プルダウン。

参照デバイス

参照デバイスとは、テスト対象として推奨される一連のデバイスのことです。スマートフォン、折りたたみ式、タブレット、パソコン用のインターフェースが含まれます。この一連の参照デバイスでレイアウトがどのように表示されるかをプレビューする必要があります。

さまざまな参照デバイスのレイアウト プレビューのスクリーンショット

図 12. Layout Validation ツールの参照デバイスのプレビュー。

カスタム

プレビューする表示設定をカスタマイズするには、言語、デバイス、画面の向きなど、各種設定を選択します。

Layout Validation ツールでデバイス表示をカスタマイズする

図 16. Layout Validation ツールでのカスタム表示の設定。

色覚特性

色覚特性のあるユーザー向けにアプリをより使いやすくするために、一般的な色覚特性をシミュレートしてレイアウトを検証します。

さまざまな色覚特性をシミュレートしたプレビューのスクリーンショット

図 13. Layout Validation ツールで色覚特性をシミュレートしたプレビュー。

フォントサイズ

さまざまなフォントサイズでレイアウトを検証し、大きなフォントでレイアウトをテストすることで、視覚障がいのユーザー向けにアプリのユーザー補助を改善します。

さまざまなフォントサイズでのアプリ レイアウトのプレビュー（大きなフォントの場合にレイアウトのエラーが発生）

図 14. Layout Validation ツールでのさまざまなフォントサイズのプレビュー。