TV スクリーンは 3 メートルほど離れて見ることが通常であり、他の Android デバイスのディスプレイよりもはるかに大きいことが多く、小型のデバイスと同レベルの 精度と色を再現できません。便利で楽しいユーザー エクスペリエンスを作成するうえで、これらの要素を配慮して TV デバイス向けアプリのレイアウトを作成する必要があります。
TV 向けのレイアウト テーマを使用する
Android のテーマは、TV アプリの レイアウトの基盤として使用できます。TV デバイス上で動作するように設計されたアプリのアクティビティの表示を変更するには、テーマを使用する必要があります。このセクションでは、使用するテーマについて説明します。
Leanback テーマ
非推奨の androidx.leanback ライブラリ には Theme.Leanback が含まれています。これは、Leanback UI ツールキット アプリに一貫性のあるビジュアル スタイルを提供する TV アクティビティ向けテーマです。このテーマは、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 モバイルアプリでは、
AppCompatActivity
と Theme.AppCompat テーマのいずれかを組み合わせて使用するのが一般的です。この組み合わせにより、デバイスで実行されている Android のバージョンを気にすることなく、ドローアブルのティントなどの機能
を使用できます。Android TV でのみ動作するアプリを開発する場合は、AppCompatActivity を使用しないでください。このクラスで有効になる機能は、Android TV で既に利用可能であるか、関連性がないためです。
Android モバイルと Android TV でコードベースを共有するアプリをビルドする場合は、テーマ設定が原因で問題が発生することがあります。AppCompatActivity とさまざまな AppCompat ウィジェットでは Theme.AppCompat を使用する必要がありますが、Leanback UI ツールキット フラグメントでは FragmentActivity と Theme.Leanback を使用する必要があります。
Android モバイルと Android TV で同じベース アクティビティを使用する必要がある場合や、
AppCompat ウィジェットに基づくカスタムビューを使用する場合は、AppCompatImageView
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 を作成します。
GridViewではなく、ListViewのようなビューグループを使用することで、水平方向の画面のスペースを有効利用します。 - ビューの配置には、
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` や関連ウィジェットなどの
AndroidX Leanback クラスを使用している場合、レイアウトにはすでにオーバースキャン用のマージンが組み込まれているため、重複して設定しないように注意してください。
BrowseSupportFragment
使用可能なテキストとコントロールをビルドする
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を、ウィジェットの マージンを設定するにはピクセル値ではなくディップ値を使用します。
密度に依存しないピクセルと、画面サイズが大きな場合のレイアウトのビルドについて詳しくは、画面の互換性の概要をご覧ください。
TV のレイアウト リソースを管理する
他の Android デバイスと同様に、TV にはさまざまな画面サイズがあり、720p、1080p、4K など、さまざまな解像度をサポートしています。アプリがさまざまな画面サイズをサポートしていることを確認してください。
画面サイズと解像度が異なると、ピクセル密度も異なります。画面サイズ、解像度、ピクセル密度に関係なく UI の外観を維持するには、ピクセルではなく密度非依存ピクセル（dp）を使用して UI の測定値を定義します。さまざまな TV パネルの解像度に対応する画面のピクセル密度は、以下のとおりです。
| パネルの解像度 | 画面のピクセル密度 |
|---|---|
| 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 クラス
を使用できます。