テレビ画面は通常、約 3 m 離れた場所から見られ、他のほとんどの Android 搭載デバイスのディスプレイよりもはるかに大きなものですが、小型のデバイス画面ほど細かい部分や色彩が得られません。便利で楽しいユーザー エクスペリエンスを実現するには、これらの要素を考慮して、TV デバイスを念頭に置いたアプリのレイアウトを作成する必要があります。
TV 向けのレイアウト テーマを使用する
Android テーマは、TV アプリのレイアウトの基礎となります。テーマを使用して、TV デバイスで動作するアプリのアクティビティの表示を変更できます。このセクションでは、使用するテーマについて説明します。
Leanback テーマ
androidx.leanback ライブラリには、一貫したビジュアル スタイルを提供する 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 クラスを使用していない場合は、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 デバイスはアプリ レイアウトの外端をクリップして、ディスプレイ全体を埋めるようにすることがあります。この動作は、一般にオーバースキャンと呼ばれます。
ユーザーに常に表示する必要がある画面要素をオーバースキャンセーフ領域内に配置します。レイアウトの左右端に 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 メートルほど離れた距離にいる人でもはっきりと見えるサイズにします。そのための最善の方法は、絶対的なサイズではなくレイアウトの相対的なサイズ設定と、絶対的なピクセル単位ではなく密度非依存のピクセル（dp）単位を使用することです。たとえば、ウィジェットの幅を設定するには、ピクセル測定ではなく
wrap_contentを使用し、ウィジェットのマージンを設定するには、px 値ではなく dp 値を使用します。
密度非依存ピクセルと、より大きな画面サイズに対応するレイアウトのビルドについて詳しくは、画面互換性の概要をご覧ください。
TV のレイアウト リソースを管理する
他のすべての Android デバイスと同様に、テレビの画面サイズはさまざまで、720p、1080p、4K など、さまざまな解像度をサポートしています。アプリがさまざまな画面サイズをサポートしていることを確認します。
画面サイズや解像度が異なれば、ピクセル密度も異なります。画面サイズ、解像度、ピクセル密度に関係なく UI の表示を維持するには、ピクセルではなく密度非依存ピクセル（dp）を使用して UI の測定を定義します。各種テレビパネル解像度の画面ピクセル密度の概要は以下のとおりです。
| パネルの解像度 | 画面のピクセル密度 |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
大画面向けのレイアウトとリソースの最適化について詳しくは、画面互換性の概要をご覧ください。
避けるべきレイアウト パターン
レイアウトをビルドする方法はいくつかあり、TV デバイスではうまく機能しません。TV のレイアウトを開発する際に避けるべきユーザー インターフェースのアプローチをいくつか紹介します。
- スマートフォンまたはタブレットのレイアウトの再利用: スマートフォンまたはタブレット アプリのレイアウトをそのまま再利用しないでください。他の Android デバイスのフォーム ファクタ向けに作成されたレイアウトは、TV デバイスにはあまり適していないため、TV での操作に合わせて簡素化する必要があります。
ActionBarの使用: アクションバーはスマートフォンやタブレットでの使用には推奨されますが、テレビのインターフェースには適していません。TV アプリでは、アクションバーのオプション メニューやプルダウン メニューはリモコンで移動することが難しいため、使用しないことを強くおすすめします。ViewPagerの使用: 画面間のスライドはスマートフォンまたはタブレットでは十分に機能しますが、テレビでは使用しないでください。
TV に適したレイアウトのデザインについて詳しくは、TV 向けデザイン ガイドをご覧ください。
大容量のビットマップを処理する
TV デバイスは、他の Android デバイスと同様に、メモリ容量に限りがあります。非常に高解像度の画像を使用してアプリのレイアウトを構築したり、アプリのオペレーションに多くの高解像度の画像を使用したりすると、すぐにメモリの上限に達し、メモリ不足エラーが発生する可能性があります。ほとんどの場合、Glide ライブラリを使用してアプリのビットマップを取得、デコード、表示することをおすすめします。ビットマップを扱うときに最高のパフォーマンスを実現する方法について詳しくは、一般的な Android グラフィックのベスト プラクティスをご覧ください。
効果的な広告を提供する
リビングルーム環境では、全画面表示され、30 秒以内に閉じることができる動画広告ソリューションを使用することをおすすめします。Android TV で広告を配信する機能（閉じるボタンやクリックスルーなど）には、タップではなく D-pad を使用してアクセスする必要があります。
Android TV では、ウェブブラウザは提供されません。広告でウェブブラウザの起動を試みたり、Android TV デバイスで承認されていない Google Play ストア コンテンツにリダイレクトしたりすることは禁止されています。
注: ソーシャル メディア サービスへのログインには、WebView クラスを使用できます。