TV 向けレイアウトをビルドする

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

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

Android の TV 向けデザインもお読みください。

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

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

Leanback テーマ

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

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

NoTitleBar テーマ

タイトルバーは、携帯電話やタブレットの Android アプリにとっては標準的なユーザー インターフェース エレメントですが、TV アプリには適していません。v17 Leanback クラスを使用していない場合は、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 を作成し、GridView のようなビュー グループを ListView の代わりにすることで水平方向のスペースをより有効に活用します。
  • ビューの配置には、RelativeLayoutLinearLayout のようなビュー グループを使用します。これにより、システムによるビューの位置調整が可能になります。たとえば、TV 画面のサイズ、アラインメント、アスペクト比、画素密度に合わせて調整されます。
  • レイアウト コントロール間には十分なマージンを取り、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 や関連ウィジェットなどの v17 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 メートルほど(画面が大きくなるほどこの距離も長くなります)離れていても、すべてのビュー ウィジェットがはっきりと見えるように十分な大きさを確保します。このためには、絶対的なサイズではなく相対レイアウトによるサイジングを使用することをおすすめします。また、絶対的なピクセル単位ではなく、密度に依存しないピクセル(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 クラスを使用できます。