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 サンプル リポジトリもご覧ください。

AI プロンプト

Android TV のサポートを追加する方法について説明します。

このプロンプトは、Leanback ではなく Jetpack Compose for TV を使用してアプリに Android 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.

AI プロンプトの使用

AI プロンプトは、Gemini in Android Studio 内で使用することを目的としています。

Gemini in Studio の詳細については、https://developer.android.com/studio/gemini/overview をご覧ください。

互換性

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

設定

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

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

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

Kotlin（build.gradle.kts）

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

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

   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")
}

Groovy（build.gradle）

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

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

   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 設計ガイドをご覧ください。

図 1. TV マテリアル ライブラリのサンプル コンポーネント。

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

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

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

TV の依存関係
（androidx.tv.*） 		比較 モバイルの依存関係
（androidx.compose.*）
androidx.tv:tv-material 変更 androidx.compose.material3:material3

参考情報

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

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

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

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

関連情報

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

次へ
カタログ ブラウザを作成する