クイック スタート

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

Groovy

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

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

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

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

Groovy

dependencies {

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

  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 をセットアップするをご覧ください。

部品構成表を使用する

Compose 部品構成表(BOM)を使用すると、BOM のバージョンのみを指定して、すべての Compose ライブラリ バージョンを管理できます。BOM 自体は、さまざまな Compose ライブラリの安定版へのリンクを含んでおり、それらが適切に連携するように機能します。アプリで BOM を使用するときに、Compose ライブラリの依存関係自体にバージョンを追加する必要はありません。BOM バージョンを更新すると、使用しているすべてのライブラリが自動的に新しいバージョンに更新されます。

特定の BOM バージョンにマッピングされている Compose ライブラリ バージョンを見つけるには、BOM とライブラリ バージョンのマッピングを確認してください。

Compose Compiler ライブラリが BOM に含まれていないのはなぜですか?

Compose Kotlin コンパイラ拡張機能(androidx.compose.compiler)は、Compose ライブラリ バージョンにリンクされていません。代わりに、Kotlin コンパイラ プラグインのバージョンにリンクされており、Compose の他の部分とは異なる頻度でリリースされます。したがって、お使いの Kotlin バージョンと互換性のあるバージョンを使用してください。プラグインの各バージョンにマッピングされている Kotlin バージョンは、Compose と Kotlin の互換性マップにあります。

BOM の指定と異なるライブラリ バージョンを使用するにはどうすればよいですか?

build.gradle の依存関係セクションで、BOM プラットフォームのインポートを維持します。ライブラリ依存関係のインポートで、目的のバージョンを指定します。たとえば、BOM で指定されているバージョンと無関係にマテリアル 3 のアルファ版を使用したい場合に、依存関係を宣言する方法は次のとおりです。

dependencies {
    // Import the Compose BOM
    implementation platform('androidx.compose:compose-bom:2022.10.00')

    // Override Material Design 3 library version with a pre-release version
    implementation 'androidx.compose.material3:material3:1.1.0-alpha01'

    // Import other Compose libraries without version numbers
    // ..
    implementation 'androidx.compose.foundation:foundation'
}

BOM はすべての Compose ライブラリを自動的にアプリに追加しますか?

いいえ。アプリに Compose ライブラリを実際に追加して使用するには、モジュール(アプリレベル)の Gradle ファイル(通常は app/build.gradle)で、各ライブラリを個別の依存関係の行として宣言する必要があります。

BOM を使用すると、アプリ内の任意の Compose ライブラリのバージョンの互換性を維持できますが、BOM が実際にそれらの Compose ライブラリをアプリに追加することはありません。

将来的に、Compose ライブラリは個別にバージョニングされる予定です。つまり、バージョン番号はそれぞれ独自のペースでインクリメントされるようになります。各ライブラリの最新の安定版リリースはテスト済みであり、適切に連携することが保証されています。ただし、各ライブラリの最新の安定版を見つけるのが困難な場合があります。BOM を利用すると、そのような最新バージョンを自動的に使用できます。

BOM の使用は義務ですか?

いいえ。個々の依存関係バージョンを手動で追加することもできます。しかし、すべての最新の安定版を同時に使用することが容易になるので、BOM を使用することをおすすめします。

BOM をバージョン カタログと一緒に使用できますか?

はい。BOM 自体をバージョン カタログに含めて、他の Compose ライブラリ バージョンを省略することができます。

[libraries]
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "androidxComposeBom" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation" }

なお、モジュールの build.gradle に BOM をインポートすることを忘れないでください。

dependencies {
    val composeBom = platform(libs.androidx.compose.bom)
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // import Compose dependencies as usual
}

BOM に関する問題を報告したり、フィードバックを送信したりするにはどうすればよいですか?

Issue Tracker で問題を報告できます。

BOM とライブラリ バージョンのマッピング

ライブラリ グループ 2022.10.00 のバージョン
androidx.compose.animation:animation 1.3.0
androidx.compose.animation:animation-core 1.3.0
androidx.compose.animation:animation-graphics 1.3.0
androidx.compose.foundation:foundation 1.3.0
androidx.compose.foundation:foundation-layout 1.3.0
androidx.compose.material:material 1.3.0
androidx.compose.material:material-icons-core 1.3.0
androidx.compose.material:material-icons-extended 1.3.0
androidx.compose.material:material-ripple 1.3.0
androidx.compose.material3:material3 1.0.0
androidx.compose.material3:material3-window-size-class 1.0.0
androidx.compose.runtime:runtime 1.3.0
androidx.compose.runtime:runtime-livedata 1.3.0
androidx.compose.runtime:runtime-rxjava2 1.3.0
androidx.compose.runtime:runtime-rxjava3 1.3.0
androidx.compose.runtime:runtime-saveable 1.3.0
androidx.compose.ui:ui 1.3.0
androidx.compose.ui:ui-geometry 1.3.0
androidx.compose.ui:ui-graphics 1.3.0
androidx.compose.ui:ui-test 1.3.0
androidx.compose.ui:ui-test-junit4 1.3.0
androidx.compose.ui:ui-test-manifest 1.3.0
androidx.compose.ui:ui-text 1.3.0
androidx.compose.ui:ui-text-google-fonts 1.3.0
androidx.compose.ui:ui-tooling 1.3.0
androidx.compose.ui:ui-tooling-data 1.3.0
androidx.compose.ui:ui-tooling-preview 1.3.0
androidx.compose.ui:ui-unit 1.3.0
androidx.compose.ui:ui-util 1.3.0
androidx.compose.ui:ui-viewbinding 1.3.0