このページは Cloud Translation API によって翻訳されました。

Leanback UI ツールキットのレイアウト

テレビ画面は通常、約 3 メートル離れた場所から見ます。他のほとんどの Android 搭載デバイスディスプレイよりもはるかに大きいものの、テレビ画面は小型のデバイス画面ほど詳細で色鮮やかではありません。こうした要素を考慮して、便利で楽しいユーザーエクスペリエンスを実現するには、TV デバイス向けにアプリのレイアウトを作成する必要があります。

TV 向けのレイアウトテーマを使用する

Android テーマは、TV アプリのレイアウトの基礎となります。テーマを使用して、TV デバイス向けアプリのアクティビティの表示を変更します。このセクションでは、使用するテーマについて説明します。

Leanback テーマ

Leanback AndroidX ライブラリには、一貫したビジュアルスタイルを提供する TV アクティビティのテーマである Theme.Leanback が含まれています。このテーマは、AndroidX Leanback クラスを使用してビルドされた TV アプリに使用します。次のコードサンプルは、このテーマをアクティビティに適用する方法を示しています。

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

注意: Android TV アプリではアプリバーを使用しないため、Leanback テーマにはアプリバーは含まれていません。サポートフラグメント（BrowseSupportFragment など）をアプリが使用する場合、アクティビティは FragmentActivity を拡張する必要があります。アプリバーのテーマを設定しようとし、次のエラーを生成する AppCompatActivity は使用しないでください。

java.lang.RuntimeException: Unable to start activity ComponentInfo{...} :
java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.

NoTitleBar テーマ

タイトルバーは、スマートフォンやタブレットの Android アプリでは標準のユーザーインターフェース要素ですが、TV アプリには適していません。AndroidX Leanback クラスを使用していない場合は、TV アクティビティに NoTitleBar テーマを適用して、タイトルバーの表示を抑制します。TV アプリのマニフェストの次のコード例は、このテーマを適用してタイトルバーの表示を削除する方法を示しています。

<application>
  ...
  <activity
    android:name="com.example.android.TvActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    ...
  </activity>
</application>

AppCompat テーマ

Android モバイルアプリでは、AppCompatActivity を Theme.AppCompat テーマのいずれかと一緒に使用するのが一般的です。この組み合わせにより、デバイスで実行されている Android のバージョンを気にすることなく、ドローアブルの色合い調整などの機能を使用できます。Android TV でのみ動作するアプリを開発する場合は、AppCompatActivity を使用しないでください。有効になる機能はすでに Android TV で利用できるか、無関係であるためです。

Android モバイルと Android TV の間で共有コードベースを使用してアプリをビルドする場合、テーマ設定によりいくつかの課題に直面する可能性があります。AppCompatActivity やさまざまな AppCompat ウィジェットでは Theme.AppCompat を使用する必要がありますが、Leanback UI ツールキットのフラグメントでは、FragmentActivity と Theme.Leanback を使用することが想定されています。

Android モバイルと Android TV で同じベースアクティビティを使用する必要がある場合や、AppCompatImageView のような AppCompat ウィジェットに基づくカスタムビューを使用する場合は、Theme.AppCompat.Leanback テーマを使用します。これらのテーマは、AppCompat のすべてのテーマ設定と Leanback 固有の値を提供します。

Theme.AppCompat.Leanback テーマは、他のテーマと同じようにカスタマイズできます。たとえば、Leanback UI ツールキットの OnboardingSupportFragment に固有の値を変更する場合は、次のようにします。

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

基本的な TV レイアウトをビルドする

TV デバイス用のレイアウトは、大画面で使用しやすく効果的なものにするために、いくつかの基本的なガイドラインに従う必要があります。以下のヒントを参考にして、テレビ画面向けに最適化されたレイアウトを作成します。

横向きでレイアウトをビルドします。TV スクリーンは常に横表示になります。
画面上のナビゲーションコントロールを画面の左側または右側に配置し、コンテンツ用の縦方向のスペースを確保します。
フラグメントを使用してセクションに分割された UI を作成します。ListView ではなく GridView などのビューグループを使用して、水平方向の画面スペースを有効活用します。
RelativeLayout や LinearLayout などのビューグループを使用して、ビューを整理します。このアプローチにより、システムはビューの位置を、テレビ画面のサイズ、配置、アスペクト比、ピクセル密度に合わせて調整できます。
レイアウトコントロール間には十分なマージンを取り、UI が見やすくなるようにします。

オーバースキャン

TV 向けのレイアウトには、視聴者に全画面画像を表示するための TV 標準の進化に伴い、固有の要件がいくつかあります。このため、TV デバイスではアプリレイアウトの外側の端がクリップされて、ディスプレイ全体が埋められることがあります。この動作は一般に「オーバースキャン」と呼ばれます。

常にユーザーに表示する必要がある画面要素を、オーバースキャンセーフ領域内に配置します。レイアウトの左右端に 48 dp、上下端に 27 dp の 5% のマージンを追加すると、レイアウト内の画面要素をオーバースキャンセーフ領域に配置できます。

ユーザーが直接操作しない背景画面要素を調整しないでください。また、要素をオーバースキャンセーフ領域にクリップしないでください。この方法により、背景画面要素がすべての画面で正しく表示されます。

次の例は、背景要素を含めることができるルートレイアウトと、5% のマージンがあり、オーバースキャンセーフ領域内に要素を含むネストされた子レイアウトを示しています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!-- Screen elements that can render outside the overscan-safe area go here. -->

   <!-- Nested RelativeLayout with overscan-safe margin. -->
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="27dp"
       android:layout_marginBottom="27dp"
       android:layout_marginLeft="48dp"
       android:layout_marginRight="48dp">

      <!-- Screen elements that need to be within the overscan-safe area go here. -->

   </RelativeLayout>

</RelativeLayout>

注意: BrowseSupportFragment や関連ウィジェットなどの AndroidX Leanback クラスを使用している場合は、すでにオーバースキャン用のマージンが組み込まれているため、レイアウトにオーバースキャンマージンを適用しないでください。

使用可能なテキストとコントロールを作成する

以下のヒントを参考にして、TV アプリのテキストやコントロールを遠くからでも見やすくしましょう。

ユーザーがひと目でわかる小さな単位にテキストを分割します。
暗い背景に対して明るい色のテキストを使用します。これにより、TV スクリーン上のテキストが読みやすくなります。
軽量のフォントや、ストロークが細いフォントと幅の広いフォントは使用しないでください。シンプルな Sans Serif フォントやアンチエイリアスを使用して、さらに読みやすくします。

Android の標準のフォントサイズを使用します。

<TextView
      android:id="@+id/atext"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center_vertical"
      android:singleLine="true"
      android:textAppearance="?android:attr/textAppearanceMedium"/>

すべてのビューウィジェットを、画面から 3 m 離れた場所にいるユーザーがはっきりと確認できるような大きさにします。そのための最適な方法は、絶対サイズではなく相対レイアウトによるサイズ変更と、絶対ピクセル単位ではなく密度非依存ピクセル（dp）単位を使用することです。たとえば、ウィジェットの幅を設定するには、ピクセル測定ではなく wrap_content を使用し、ウィジェットのマージンを設定するには、px 値ではなく dp 値を使用します。

密度非依存ピクセルと、より大きな画面サイズを処理するためのレイアウトの構築について詳しくは、画面の互換性の概要をご覧ください。

TV のレイアウトリソースを管理する

他のすべての Android デバイスと同様に、テレビにもさまざまな画面サイズがあり、720p、1080p、4K などさまざまな解像度をサポートしています。アプリが各種の画面サイズをサポートしていることを確認します。

画面サイズや解像度が異なれば、ピクセル密度も異なります。画面サイズ、解像度、ピクセル密度にかかわらず UI の外観を維持するには、ピクセルではなく密度非依存ピクセル（dp）を使用して UI の測定値を定義します。テレビパネルの解像度ごとの画面ピクセル密度の概要を以下に示します。

パネルの解像度	画面のピクセル密度
720p	`tvdpi`
1080	`xhdpi`
4K	`xxxhdpi`

詳しくは、各種のピクセル密度をサポートするをご覧ください。

大画面向けにレイアウトとリソースを最適化する方法について詳しくは、画面の互換性の概要をご覧ください。

避けるべきレイアウトパターン

TV デバイスで適切に動作しないレイアウトをビルドするアプローチがいくつかあります。TV のレイアウトを開発する際に避けるべきユーザーインターフェースのアプローチを以下に示します。

スマートフォンやタブレットのレイアウトの再利用: スマートフォンやタブレット向けアプリのレイアウトは、変更せずに再利用しないでください。他の Android デバイスのフォームファクタ用に作成されたレイアウトは、TV デバイスには適しておらず、テレビで操作するために簡素化する必要があります。
ActionBar を使用する: アクションバーはスマートフォンやタブレットでの使用は推奨されますが、テレビのインターフェースには適していません。TV アプリでは、アクションバーのオプションメニューやプルダウンメニューはリモコンでは操作しにくいため、使用しないことを強くおすすめします。
ViewPager の使用: 画面間のスライド操作はスマートフォンやタブレットではうまく機能しますが、テレビでは行わないでください。

TV に適したレイアウトのデザインについて詳しくは、TV 向けデザインガイドをご覧ください。

大容量のビットマップを処理する

TV デバイスも、他の Android デバイスと同様にメモリ容量に制限があります。非常に高解像度の画像を使用してアプリのレイアウトを作成する場合や、アプリの動作で多数の高解像度画像を使用すると、すぐにメモリの上限に達し、メモリ不足エラーが発生する可能性があります。ほとんどの場合、Glide ライブラリを使用してアプリのビットマップを取得、デコード、表示することをおすすめします。ビットマップの使用時に最高のパフォーマンスを実現する方法について詳しくは、一般的な Android グラフィックのベストプラクティスをご覧ください。

効果的な広告を提供する

リビングルーム環境では、全画面表示で 30 秒以内に閉じることができる動画広告ソリューションを使用することをおすすめします。Android TV での広告に関する機能（閉じるボタンやクリックスルーなど）は、タップではなく D-pad を使用してアクセスできる必要があります。

Android TV では、ウェブブラウザは提供されません。広告でウェブブラウザの起動や、Android TV デバイスで承認されていない Google Play ストアコンテンツへのリダイレクトを試行することはできません。

注: ソーシャルメディアサービスへのログインには、WebView クラスを使用できます。

参考情報

TV 向けデザイン

Best practices for driving engagement on Google TV