Google は、黒人コミュニティに対する人種平等の促進に取り組んでいます。取り組みを見る

Android Studio で Jetpack Compose を使用する

Jetpack Compose は、Android のネイティブ UI を構築するための最新のツールキットです。宣言型のプログラミング モデルに基づいているため、UI の外観をシンプルに記述できます。それ以外については Compose が処理するため、アプリの状態が変化すると、UI が自動的に更新されます。Kotlin をベースに構築されているため、Java プログラミング言語と完全に相互運用可能であり、すべての Android API と Jetpack API に直接アクセスできます。また、既存の UI ツールキットと互換性があるため、従来のビューと新しいビューを組み合わせて使用できます。さらに、最初からマテリアルとアニメーションを考慮して設計されています。

Jetpack Compose に関する最適な開発エクスペリエンスを確保するには、Android Studio プレビューの最新 Canary 版をダウンロードしてください。ダウンロードすると、Android Studio を使用して Jetpack Compose でアプリを開発する際に、新しいプロジェクト テンプレートや Compose UI をすぐにプレビューできるなど、スマート エディタの機能を活用できます。

Android Studio Canary を入手する

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. Gradle を構成するの説明に従って、プロジェクトの build.gradle ファイルが正しく構成されていることを確認します。

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

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

既存のプロジェクトで Jetpack Compose を使用する場合は、必要な設定と依存関係を指定してプロジェクトを構成する必要があります。

Kotlin を設定する

プロジェクトで Kotlin 1.4.0 以降を使用していることを確認します。

plugins {
  id 'org.jetbrains.kotlin.android' version '1.4.0'
}

Gradle を設定する

以下に示すように、アプリの最小 API レベルを 21 以上に設定し、アプリの build.gradle ファイルで Jetpack Compose を有効にする必要があります。また、Kotlin コンパイラ プラグインのバージョンも設定します。

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...

    // Set both the Java and Kotlin compilers to target Java 8.

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
        useIR = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion "1.0.0-alpha01"
    }
}

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

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

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

    // UI Tests
    androidTestImplementation 'androidx.ui:ui-test:1.0.0-alpha01'
}