Android Studio で Jetpack Compose を使用する

Jetpack Compose を使用して最適な開発を行うには、Android Studio Arctic Fox をダウンロードする必要があります。これにより、Android Studio を使用して Jetpack Compose でアプリを開発する際に、新しいプロジェクト テンプレートや Compose UI をすぐにプレビューできるなど、スマート エディタの機能を活用できます。

Android Studio Arctic Fox を入手する

Android Studio をインストールしたら、以下の手順で Jetpack Compose サンプルアプリを試して、新しい Jetpack Compose アプリ プロジェクトを作成するか、既存のアプリ プロジェクトに Jetpack Compose のサポートを追加します。

Jetpack Compose サンプルアプリを試す

Android Studio の最新バージョンを起動した後、GitHub でホストされている Jetnews Compose サンプルアプリにより、Jetpack Compose の機能を手軽に試すことができます。Android Studio からサンプルアプリ プロジェクトをインポートする手順は次のとおりです。

  1. [Welcome to Android Studio] ウィンドウが開いている場合は、[Import an Android code sample] を選択します。Android Studio プロジェクトをすでに開いている場合は、メニューバーで [File] > [New] > [Import Sample] を選択します。
  2. [Browse Samples] ウィザードの最上部の近くにある検索バーに「compose」と入力します。
  3. 検索結果から Jetpack Compose サンプルアプリのいずれかを選択し、[Next] をクリックします。
  4. [Application name] と [Project location] を変更するか、デフォルト値のままにします。
  5. [Finish] をクリックします。

指定したパスにサンプルアプリがダウンロードされ、プロジェクトが開きます。次に MainActivity.kt を調べて、クロスフェード アニメーション、カスタム コンポーネント、タイポグラフィの使用方法、IDE 内プレビューでの明るい色と暗い色の表示など、Jetpack Compose API の例を確認できます。

Jetpack Compose をサポートする新しいアプリを作成する

デフォルトで Jetpack Compose をサポートする新しいプロジェクトを開始する場合、Android Studio には作業を開始するにあたり活用できる新しいプロジェクト テンプレートが用意されています。Jetpack Compose を含む新規プロジェクトを作成する手順は、次のとおりです。

  1. [Welcome to Android Studio] ウィンドウが開いている場合は、[Start a new Android Studio project] をクリックします。Android Studio プロジェクトをすでに開いている場合は、メニューバーで [File] > [New] > [New Project] を選択します。
  2. [Select a Project Template] ウィンドウで [Empty Compose Activity] を選択し、[Next] をクリックします。
  3. [Configure your project] ウィンドウで、以下の手順を実施します。
    1. 通常どおりに [Name]、[Package name]、[Save location] を設定します。
    2. Jetpack Compose は Kotlin で記述されたクラスでのみ動作するため、[Language ] プルダウン メニューで利用できる選択肢は [Kotlin] のみです。
    3. [Minimum API level] プルダウン メニューで、API レベル 21 以上を選択します。
  4. [Finish] をクリックします。
  5. Jetpack Compose ツールキットの依存関係を追加するの説明に従って、プロジェクトの build.gradle ファイルが正しく構成されていることを確認します。

これで、Jetpack Compose を使ってアプリを開発する準備が整いました。ツールキットの使用を開始し、機能の詳細を確認するには、Jetpack Compose チュートリアルをお試しください。

Wear OS 向け Jetpack Compose を使用する方法については、Wear OS で Jetpack Compose をセットアップするをご覧ください。

Jetpack Compose ツールキットの依存関係を追加する

以下に示すように、Jetpack Compose ツールキットの依存関係をアプリの build.gradle ファイルに追加します。

Groovy

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.5'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.5'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.5'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.5'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.5'
    implementation 'androidx.compose.material:material-icons-extended:1.0.5'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.5'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.5'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.5'
}

Kotlin

dependencies {
    implementation("androidx.compose.ui:ui:1.0.5")
    // Tooling support (Previews, etc.)
    implementation("androidx.compose.ui:ui-tooling:1.0.5")
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation("androidx.compose.foundation:foundation:1.0.5")
    // Material Design
    implementation("androidx.compose.material:material:1.0.5")
    // Material design icons
    implementation("androidx.compose.material:material-icons-core:1.0.5")
    implementation("androidx.compose.material:material-icons-extended:1.0.5")
    // Integration with observables
    implementation("androidx.compose.runtime:runtime-livedata:1.0.5")
    implementation("androidx.compose.runtime:runtime-rxjava2:1.0.5")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.5")
}

Jetpack Compose を既存のプロジェクトに追加する

既存のプロジェクトで Jetpack Compose を使用する場合は、必要な設定と依存関係を指定してプロジェクトを構成する必要があります。詳しくは、Jetpack Compose をアプリに追加するをご覧ください。