Android Studio で Jetpack Compose を使用する

Jetpack Compose を使用して最適な開発を行うには、Android Studio をダウンロードしてインストールします。Android Studio には、新しいプロジェクト テンプレートや Compose UI とアニメーションをすぐにプレビューできる機能など、多くのスマート エディタ機能が含まれています。

Android Studio を入手する

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 を調べて、クロスフェード アニメーション、カスタム コンポーネント、タイポグラフィの使用、明るい色と暗い色の表示などの Jetpack Compose API を IDE 内プレビューで確認できます。

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

Android Studio には、Jetpack Compose をデフォルトでサポートする新しいプロジェクトの作成時に利用できる、新しいプロジェクト テンプレートが用意されています。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.1.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.1.1'
    // Material Design
    implementation 'androidx.compose.material:material:1.1.1'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.1.1'
    implementation 'androidx.compose.material:material-icons-extended:1.1.1'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.4.0'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.1.1'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.1.1'

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

Kotlin

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

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

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

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