このページは Cloud Translation API によって翻訳されました。

クイックスタート

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

Android Studio を入手する

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

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

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

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

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

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

Compose を使い始めるには、まずプロジェクトにビルド構成を追加する必要があります。アプリの build.gradle ファイルに次の定義を追加します。

Groovy

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.11"
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.11"
    }
}

以下の点にご注意ください。

Android の BuildFeatures ブロックの内側で compose フラグを true に設定すると、Compose 機能が有効になります。
ComposeOptions ブロックで定義されている Kotlin コンパイラ拡張機能のバージョンは Kotlin のバージョンに関連付けられています。互換性マップを参照し、プロジェクトの Kotlin バージョンと一致するライブラリのバージョンを選択してください。

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

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.04.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:material3-window-size-class'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.8.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
    // 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.04.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:material3-window-size-class")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.8.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
    // 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 からサンプルアプリプロジェクトをインポートする手順は次のとおりです。

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

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

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

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
Compose を使用したナビゲーション
Compose レイアウトのテスト
集中して対応

クイック スタート

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

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

Groovy

Kotlin

Groovy

Kotlin

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

あなたへのおすすめ

クイックスタート