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

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

このガイドでは、TV アプリ用の効果的なレイアウトを作成するための最小要件と実装の詳細について説明します。

詳しくは、TV 向けのデザインをご覧ください。

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

Android のテーマは、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">

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

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

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

Theme.AppCompat.Leanback テーマは、他のテーマと同じようにカスタマイズできます。たとえば、Leanback の 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 などのビューグループを使用して、水平方向の画面スペースを有効活用します。
  • RelativeLayoutLinearLayout などのビューグループを使用して、ビューを配置します。このアプローチにより、システムでビューの位置を、テレビ画面のサイズ、配置、アスペクト比、ピクセル密度に合わせて調整できます。
  • レイアウト コントロール間には十分なマージンを取り、UI が見やすくなるようにします。

オーバースキャン

テレビ向けのレイアウトには、テレビ標準の進化と、視聴者に常にフルスクリーン画像を表示したいという独自の要件があります。このためテレビデバイスでは、アプリ レイアウトの外側の端がクリップされてディスプレイ全体を埋める場合があります。 この動作は一般にオーバースキャンと呼ばれます。

常にユーザーに表示される必要がある画面要素を、オーバースキャンのセーフエリア内に配置します。レイアウトの左右端に 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>

注意: BrowseFragment や関連ウィジェットなどの 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 インターフェースには適していません。TV アプリではアクションバーのオプション メニューやプルダウン メニューはリモコンでは操作しにくいため、使用しないことを強くおすすめします。
  • ViewPager を使用する: 画面間のスライドはスマートフォンやタブレットでは正常に機能しますが、テレビでは行わないでください。

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

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

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

効果的な広告を提供する

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

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

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