Android TV で Jetpack Compose を使用する

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

Compose for TV の具体的なメリットは次のとおりです。

• 柔軟性: 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 など）。

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

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

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

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

   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:2025.05.00')
   implementation composeBom

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

   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'
}

相違点

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

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

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

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

参考情報

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

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

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

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

参考資料

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

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