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