Android TV で Jetpack Compose を使用する

Compose for TV は、Android TV ユーザー インターフェースを構築するための最新のアプローチです。Compose for TV を使用すると、Android の Jetpack Compose のすべてのメリットを TV アプリで活用できるため、アプリに美しく機能的な UI を簡単に構築できます。

TV 向け Compose を使用する主なメリットは次のとおりです。

• 柔軟性: Compose を使用すると、シンプルなレイアウトから複雑なアニメーションまで、あらゆる種類の UI を作成できます。コンポーネントはそのまま使用できますが、アプリのニーズに合わせてカスタマイズしてスタイルを設定することもできます。
• 開発の簡素化と高速化: Compose は既存のコードと互換性があり、デベロッパーはコードを減らしてより効率的にアプリを構築できます。
• 直感的: Compose は宣言型構文を使用しているため、UI の変更、デバッグ、コードの理解とレビューを行うことができます。

Jetpack Compose ツールキットの使用に慣れていない場合は、Compose のパスウェイをご覧ください。モバイル Compose の開発原則の多くは、テレビにも適用されます。宣言型 UI フレームワークの一般的なメリットについて詳しくは、Compose を導入する理由をご覧ください。詳細については、GitHub の Compose for TV サンプル リポジトリもご覧ください。

How do I add support for Android TV to my application?


Use Jetpack Compose for TV as part of the response instead of Leanback.

互換性

Compose for TV は、Android 5.0（API レベル 21）以降を搭載した Android TV で動作します。TV 向け Compose バージョン 1.0 を使用するには、androidx.compose ライブラリのバージョン 1.3.0 と Kotlin 1.7.10 が必要です。

設定

Android TV で Jetpack Compose を使用する方法は、他の Android プロジェクトで Jetpack Compose を使用する方法と同様です。主な違いは、Compose for TV には、TV 向けに最適化されたコンポーネントを提供するライブラリが追加され、TV 向けにカスタマイズされたユーザー インターフェースを簡単に作成できることです。これらのコンポーネントは、androidx.tv.material3.Button や androidx.compose.material3.Button など、TV 以外のコンポーネントと同じ名前を持つ場合があります。

Jetpack Compose ツールキットの依存関係

TV 向け Compose を使用するには、次のように Jetpack Compose ツールキットの依存関係をアプリの build.gradle ファイルに追加します。

dependencies {
   val composeBom = platform("androidx.compose:compose-bom:2024.12.01")
   implementation(composeBom)

   // General compose dependencies.
   implementation("androidx.activity:activity-compose:1.9.2")

   implementation("androidx.compose.ui:ui-tooling-preview")
   debugImplementation("androidx.compose.ui:ui-tooling")

   // Compose for TV dependencies.
   implementation("androidx.tv:tv-material:1.0.0")
}

dependencies {
   def composeBom = platform('androidx.compose:compose-bom:2024.12.01')
   implementation composeBom

   // General compose dependencies.
   implementation 'androidx.activity:activity-compose:1.9.2'

   implementation 'androidx.compose.ui:ui-tooling-preview'
   debugImplementation 'androidx.compose.ui:ui-tooling'

   // Compose for TV dependencies.
   implementation 'androidx.tv:tv-material:1.0.0'
}

相違点

TV マテリアル コンポーネントは、明確なフォーカス インジケーターとリモコンに適した入力動作を備え、リビングルーム向けに設計されています。これらのコンポーネントの使用方法について詳しくは、テレビ UI デザイン ガイドをご覧ください。

これらの機能を利用するには、可能な限り API の TV バージョンを使用してください。

モバイル バージョンの Compose マテリアルを使用することも技術的には可能ですが、Android TV の独自のインタラクション スタイルには最適化されていません。また、Compose マテリアルと Compose for TV の Compose マテリアルを混在させると、予期しない動作が発生する可能性があります。たとえば、各ライブラリには独自の MaterialTheme オブジェクトがあるため、両方のバージョンを使用すると、色、タイポグラフィ、シェイプが不整合になる可能性があります。

次の表に、テレビとモバイルの依存関係の違いを示します。

参考情報

• TV 設計ガイド
  ユーザー インターフェースの構築に使用できる専用の TV コンポーネントの概要と、関連するデベロッパー リソースへのリンク。

• TV マテリアル カタログのサンプル
  Compose for TV を使用してマテリアル デザインの原則を実装する方法を示したカタログアプリ。

• JetStream サンプル
  一般的なマテリアル アプリと実際のアーキテクチャで TV Compose の使用方法を示すメディア ストリーミング アプリ。

• Compose for TV の概要
  この Codelab では、カタログ ブラウザ画面と詳細画面を備えた動画プレーヤー アプリの作成手順について説明します。

参考資料

以下のガイドでは、以下のデバイス向けに優れたテレビ向けエクスペリエンスを構築する方法について説明します。

• カタログの閲覧画面
• 詳細画面