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 ではなく TV 向け Jetpack Compose を使用してアプリに 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 プロンプトは、Android Studio の Gemini 内で使用することを目的としています（最新の Canary バージョンが必要です）。

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

互換性

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 には、テレビ向けに最適化されたコンポーネントを提供するライブラリが追加され、テレビ向けにカスタマイズしたユーザー インターフェースを簡単に作成できる点です。場合によっては、これらのコンポーネントがテレビ以外のコンポーネントと同じ名前を共有することもあります（androidx.tv.material3.Button や androidx.compose.material3.Button など）。

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

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

Kotlin

dependencies {
   val composeBom = platform("androidx.compose:compose-bom:2024.10.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")
}

Groovy

dependencies {
   def composeBom = platform('androidx.compose:compose-bom:2024.10.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 設計ガイドをご覧ください。

図 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 では、カタログ ブラウザ画面と詳細画面を備えた動画プレーヤー アプリの作成手順について説明します。

参考資料

以下のガイドで、以下のデバイス向けに優れたテレビ向けエクスペリエンスを構築する方法を確認してください。

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