Jetpack Compose をアプリに追加する

既存のプロジェクトで Jetpack Compose を使用する場合は、必要な設定と依存関係を指定してプロジェクトを構成する必要があります。

開発環境をセットアップする

適切な Android Studio バージョンをインストールする

Jetpack Compose を導入して最適な開発環境を整えるには、Android Studio をダウンロードし、Android Studio のバージョンに対応する Android Gradle プラグインを設定する必要があります。

buildscript {
    ...
    dependencies {
        classpath "com.android.tools.build:gradle:7.4.1"
        ...
    }
}

Kotlin を設定する

プロジェクトで Kotlin 1.8.10 を使用していることを確認します。

plugins {
    id 'kotlin-android'
}

Gradle を設定する

クイックスタートガイドに示すように、アプリの最小 API レベルを 21 以上に設定し、アプリの build.gradle ファイルで Jetpack Compose を有効にして、ライブラリの依存関係を追加する必要があります。

Compose でビューテーマを再利用する

Compose をプロジェクトに追加したばかりの場合は、Compose で独自のマテリアルテーマをゼロから書き換えるのではなく、View システムで利用できるテーマを Compose で継承することをおすすめします。

Android アプリで MDC ライブラリを使用している場合、MDC Compose Theme Adapter ライブラリを使用すると、既存の View ベースのテーマにおける色、タイポグラフィ、シェイプのテーマ設定を、コンポーザブルで簡単に再利用できます。これを行うには MdcTheme API を使用します。

AppCompat XML テーマを使用している場合は、AppCompatTheme API を含む AppCompat Compose Theme Adapter を使用してください。

以下に示すように、必要な依存関係をアプリの build.gradle ファイルに追加します。

dependencies {
    // When using a MDC theme
    implementation "com.google.android.material:compose-theme-adapter:1.1.16"

    // When using a AppCompat theme
    implementation "com.google.accompanist:accompanist-appcompat-theme:0.28.0"
}

Compose への移行を開始する

Compose への移行を開始する方法については、移行戦略をご覧ください。ここでは、Compose をコードベースに安全かつ段階的に導入する方法について説明します。

ComposeView などの相互運用 API について詳しくは、相互運用 API ガイドをご覧ください。Compose のその他のリソース API について詳しくは、Compose のリソースガイドをご覧ください。

Compose と View が混在する UI をテストする

アプリの一部を Compose に移行した後は、何も破損していないことをテストで必ず確認する必要があります。

アクティビティまたはフラグメントで Compose が使用される場合、ActivityScenarioRule を使用する必要がありませんが createAndroidComposeRule（ActivityScenarioRule を ComposeTestRule と統合する）を使用すると、Compose コードと View コードを同時にテストできます。

class MyActivityTest {
    @Rule
    @JvmField
    val composeTestRule = createAndroidComposeRule<MyActivity>()

    @Test
    fun testGreeting() {
        val greeting = InstrumentationRegistry.getInstrumentation()
            .targetContext.resources.getString(R.string.greeting)

        composeTestRule.onNodeWithText(greeting).assertIsDisplayed()
    }
}AddingComposeToYourAppSnippets.kt

テストと Espresso との相互運用について詳しくは、Compose レイアウトのテストガイドをご覧ください。

次のステップ

Compose について詳しくは、ドキュメントのインデックスをご覧ください。アプリに Compose を導入する方法はいくつかあります。詳しくは、アプリへの Compose の導入ガイドをご覧ください。このガイドには、他のガイド（既存のアーキテクチャでの Compose、既存の UI での Compose など）へのリンクもあります。