TV 向けレイアウトを作成する

TV スクリーンは 3 メートルほど離れて見ることが通常であり、他の Android デバイスのディスプレイよりもはるかに大きいことが多く、小型のデバイスと同レベルの精度と色を再現できません。便利で楽しいユーザーエクスペリエンスを作成するうえで、これらの要素を配慮して TV デバイス向けアプリのレイアウトを作成する必要があります。

このレッスンでは、TV アプリ用の効果的なレイアウトをビルドするための最低限の要件と実装の詳細を説明します。

Android TV 向けデザインもご覧ください。

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

Android のテーマは、TV アプリの基本的なレイアウトを提供しています。TV デバイス上で動作するように設計されたアプリのアクティビティの表示を変更するには、テーマを使用する必要があります。ここでは、どのテーマを使用したらよいかについて説明します。

Leanback テーマ

Leanback AndroidX ライブラリには、Theme.Leanback が含まれています。これは、一貫性のあるビジュアルスタイルを実現する TV アクティビティ向けテーマです。Leanback AndroidX クラスを使用してビルドしたすべての 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 アプリには適していません。Leanback AndroidX クラスを使用していない場合は、TV アクティビティにこのテーマを適用して、タイトルバーの表示を抑制する必要があります。このテーマを適用してタイトルバーの表示を削除している TV アプリマニフェストのサンプルコードを以下に示します。

    <application>
      ...

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

      </activity>
    </application>

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

TV デバイスの大きな画面で使いやすく効果的なレイアウトを実現するために、参考となるガイドラインがいくつかあります。TV 画面に適した横長のレイアウトをビルドするには、以下をヒントにしてください。

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

オーバースキャン

TV 向けのレイアウトには、TV 規格の進化と、視聴者に常にフルスクリーン表示を提供したいというデベロッパー側の意図により、特殊な要件がいくつかあります。このため、TV デバイスではフルスクリーン表示の際にディスプレイ全体を埋められるように、アプリのレイアウト周囲がクリッピングされる場合があります。この動作は、一般的に「オーバースキャン」と呼ばれます。

常にユーザーに表示する必要がある画面要素は、オーバースキャン安全領域に配置する必要があります。レイアウトの左右に 48 dp の 5%、上下に 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>

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

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

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 メートルほど（画面が大きくなるほどこの距離も長くなります）離れていても、すべてのビューウィジェットがはっきりと見えるように十分な大きさを確保します。このためには、絶対的なサイズではなく相対レイアウトによるサイジングを使用することをおすすめします。また、絶対的なピクセル単位ではなく、密度に依存しないピクセル（dip）単位を使用します。たとえば、ウィジェットの幅を設定するには画素測定ではなく wrap_content を、ウィジェットのマージンを設定するにはピクセル値ではなくディップ値を使用します。

密度に依存しないピクセルと、画面サイズが大きな場合のレイアウトのビルドについて詳しくは、複数画面をサポートするをご覧ください。

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

一般的なハイビジョン TV ディスプレイの解像度は 720p、1080i、1080p です。TV のレイアウトの画面サイズは 1920 x 1080 ピクセルを目標にします。また、アプリのレイアウトエレメントを必要に応じて 720p までダウンスケールできるようにします。通常は、ダウンスケーリング（ピクセルを削除）してもレイアウトのプレゼンテーション品質が低下することはありません。ただし、アップスケーリングするとレイアウト品質を低下させる表示アーティファクトを引き起こし、アプリのユーザーエクスペリエンスへの悪影響を及ぼす可能性があります。

画像を最適な状態にスケーリングするには、可能であれば 9-patch 画像要素として配置します。レイアウトに低品質な画像や小さな画像を配置すると、ピクセル化されてぼやけた粗い表示になり、ユーザーエクスペリエンスの低下につながります。これを避けるには、高品質の画像を使用します。

大きな画面向けのレイアウトやリソースの最適化について詳しくは、複数画面用に設計するをご覧ください。

レイアウトのアンチパターンを回避する

レイアウトをビルドするときに、ユーザーエクスペリエンスの低下につながる TV デバイスに不向きな方法がいくつかあるので、こうした方法は避けることをおすすめします。ここでは、特に TV のレイアウトを開発するときに使用しない方がよいユーザーインターフェースについて説明します。

スマートフォンやタブレットのレイアウトの再利用 - スマートフォンやタブレット向けアプリのレイアウトは、そのまま再利用しないでください。他の Android デバイスのフォームファクタ向けにビルドされたレイアウトは TV デバイスには不向きであり、TV 操作向けに簡略化する必要があります。
ActionBar - このユーザーインターフェース規則はスマートフォンやタブレットでの使用はおすすめしますが、TV のインターフェースには適していません。具体的には、TV リモコンではアクションバーのオプションメニュー（その他類似機能のプルダウンメニュー）をナビゲートすることが難しいため、使用しない方がよいでしょう。
ViewPager - 画面間のスライド操作はスマートフォンやタブレットでは非常に有効ですが、TV では推奨されません。

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

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

他の Android デバイスと同様に、TV デバイスではメモリ容量が限られています。超高解像度の画像を使用してアプリのレイアウトをビルドしたり、アプリの動作に多くの高解像度の画像を使用したりすると、すぐにメモリの上限に達してメモリ不足エラーが発生する可能性があります。ほとんどのケースでは、Glide ライブラリを使用してアプリのビットマップを取得、デコード、表示することをおすすめします。ビットマップ処理の際に最高のパフォーマンスを得るには、一般的な Android グラフィックのベストプラクティスをご覧ください。

効果的な広告を提供する

リビングルーム環境には、フルスクリーンで 30 秒以内に閉じる動画広告ソリューションを使用することをおすすめします。Android TV での広告の機能（終了ボタンやクリックスルーなど）には、タッチではなく矢印ボタンでアクセスできる必要があります。

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

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

TV コントローラを管理する

画面キーボード