クイック スタート

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

Android Studio を入手する

以下では、Compose アプリ プロジェクトの新規作成、既存のアプリ プロジェクトでの Compose の設定、Compose で記述されたサンプルアプリのインポートの手順について説明します。

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

Android Studio には、Compose をデフォルトでサポートする新しいプロジェクトの作成時に利用できる、さまざまなプロジェクト テンプレートが用意されています。Compose が正しく設定された新しいプロジェクトを作成する手順は次のとおりです。

  1. [Welcome to Android Studio] ウィンドウが開いている場合は、[Start a new Android Studio project] をクリックします。Android Studio プロジェクトをすでに開いている場合は、メニューバーで [File] > [New] > [New Project] を選択します。
  2. [Select a Project Template] ウィンドウで [Empty Activity] を選択し、[Next] をクリックします。
  3. [Configure your project] ウィンドウで、以下を行います。
    1. 通常どおりに [Name]、[Package name]、[Save location] を設定します。なお、Jetpack Compose は Kotlin で記述されたクラスでのみ動作するので、[Language] プルダウン メニューで指定できるオプションは [Kotlin] のみです。
    2. [Minimum API level] プルダウン メニューでは、API レベル 21 以上を選択します。
  4. [Finish] をクリックします。

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

既存のアプリに Compose を設定する

まず、Compose Compiler Gradle プラグインを使用して Compose コンパイラを構成します。

次に、アプリの build.gradle ファイルに次の定義を追加します。

Groovy

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

Android の BuildFeatures ブロックの内側で compose フラグを true に設定すると、Android Studio で Compose 機能が有効になります。

最後に、次のブロックから、Compose BOM と Compose ライブラリ依存関係の必要なサブセットを依存関係に追加します。

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.10.01')
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation 'androidx.compose.material3:material3'
    // or Material Design 2
    implementation 'androidx.compose.material:material'
    // or skip Material Design and build directly on top of foundational components
    implementation 'androidx.compose.foundation:foundation'
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation 'androidx.compose.ui:ui'

    // Android Studio Preview support
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation 'androidx.compose.material:material-icons-core'
    // Optional - Add full set of material icons
    implementation 'androidx.compose.material:material-icons-extended'
    // Optional - Add window size utils
    implementation 'androidx.compose.material3.adaptive:adaptive'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.9.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
    // Optional - Integration with LiveData
    implementation 'androidx.compose.runtime:runtime-livedata'
    // Optional - Integration with RxJava
    implementation 'androidx.compose.runtime:runtime-rxjava2'

}

Kotlin

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.10.01")
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // Choose one of the following:
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    // or Material Design 2
    implementation("androidx.compose.material:material")
    // or skip Material Design and build directly on top of foundational components
    implementation("androidx.compose.foundation:foundation")
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation("androidx.compose.ui:ui")

    // Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-test-manifest")

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation("androidx.compose.material:material-icons-core")
    // Optional - Add full set of material icons
    implementation("androidx.compose.material:material-icons-extended")
    // Optional - Add window size utils
    implementation("androidx.compose.material3.adaptive:adaptive")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")
    // Optional - Integration with RxJava
    implementation("androidx.compose.runtime:runtime-rxjava2")

}

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

GitHub でホストされている Jetpack 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 内プレビューで確認できます。

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