テレビ画面は通常、約 3 メートル離れた場所から見ます。他のほとんどの Android 搭載デバイス ディスプレイよりもはるかに大きいものの、テレビ画面は小型のデバイス画面ほど詳細で色鮮やかではありません。こうした要素を考慮して、便利で楽しいユーザー エクスペリエンスを実現するには、TV デバイス向けにアプリのレイアウトを作成する必要があります。
TV 向けのレイアウト テーマを使用する
Android テーマは、TV アプリのレイアウトの基礎となります。テーマを使用して、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 モバイルアプリでは、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 向けのレイアウトには、視聴者に全画面画像を表示するための TV 標準の進化に伴い、固有の要件がいくつかあります。このため、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 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 アプリでは、アクションバーのオプション メニューやプルダウン メニューはリモコンでは操作しにくいため、使用しないことを強くおすすめします。ViewPager
の使用: 画面間のスライド操作はスマートフォンやタブレットではうまく機能しますが、テレビでは行わないでください。
TV に適したレイアウトのデザインについて詳しくは、TV 向けデザインガイドをご覧ください。
大容量のビットマップを処理する
TV デバイスも、他の Android デバイスと同様にメモリ容量に制限があります。非常に高解像度の画像を使用してアプリのレイアウトを作成する場合や、アプリの動作で多数の高解像度画像を使用すると、すぐにメモリの上限に達し、メモリ不足エラーが発生する可能性があります。ほとんどの場合、Glide ライブラリを使用してアプリのビットマップを取得、デコード、表示することをおすすめします。ビットマップの使用時に最高のパフォーマンスを実現する方法について詳しくは、一般的な Android グラフィックのベスト プラクティスをご覧ください。
効果的な広告を提供する
リビングルーム環境では、全画面表示で 30 秒以内に閉じることができる動画広告ソリューションを使用することをおすすめします。Android TV での広告に関する機能(閉じるボタンやクリックスルーなど)は、タップではなく D-pad を使用してアクセスできる必要があります。
Android TV では、ウェブブラウザは提供されません。広告でウェブブラウザの起動や、Android TV デバイスで承認されていない Google Play ストア コンテンツへのリダイレクトを試行することはできません。
注: ソーシャル メディア サービスへのログインには、WebView
クラスを使用できます。