Use Android Studio with Jetpack Compose

Jetpack Compose is a modern toolkit for building native Android UI. It's based on the declarative programming model, so you can simply describe what your UI should look like, and Compose takes care of the rest—as app state changes, your UI automatically updates. Because it’s built on Kotlin, it's fully interoperable with the Java programming language and has direct access to all of the Android and Jetpack APIs. It’s compatible with the existing UI toolkit, so you can mix and match classic and new views, and it’s designed with Material and animations from the start. For the best experience developing with Jetpack Compose, you should download the latest canary version of Android Studio Preview. That’s because when you use Android Studio to develop your app with Jetpack Compose, you can benefit from smart editor features, such as New Project templates and the ability to immediately preview your Compose UI. Get Android Studio Canary After you've installed Android Studio, follow the instructions below to try a Jetpack Compose sample app, create a new Jetpack Compose app project, or add support for Jetpack Compose to an existing app project.

Try Jetpack Compose sample apps

After you’ve the latest version of Android Studio running, the fastest way to experiment with the capabilities of Jetpack Compose is by trying Jetpack Compose sample apps hosted on GitHub. To import a sample app project from Android Studio, proceed as follows: (一)If you’re in the Welcome to Android Studio window, select Import an Android code sample. If you already have an Android Studio project open, select File > New > Import Sample from the menu bar. (二)In the search bar near the top of the Browse Samples wizard, type "compose". (三)Select one of the Jetpack Compose sample apps from the search results and click Next. (四)Either change the Application name and Project location or keep the default values. (五)Click Finish. Android Studio downloads the sample app to the path you specified and opens the project. You can then inspect MainActivity.ktin each of the examples to see Jetpack Compose APIs such as crossfade animation, custom components, using typography, and displaying light and dark colors in the in-IDE preview.

Create a new app with support for Jetpack Compose

If you want to start a new project that includes support for Jetpack Compose by default, Android Studio includes new project templates to help you get started. To create a new project that include Jetpack Compose, proceed as follows: (一)If you’re in the Welcome to Android Studio window, click Start a new Android Studio project. If you already have an Android Studio project open, select File > New > New Project from the menu bar. (二)In the Select a Project Template window, select Empty Compose Activity and click Next. (三)In the Configure your project window, do the following: (一)Set the Name, Package name, and Save location as you normally would. (二)Note that, in the Language dropdown menu, Kotlin is the only available option because Jetpack Compose works only with classes written in Kotlin. (三)In the Minimum API level dropdown menu, select API level 21 or higher. (四)Click Finish. (五)Verify that the project'sbuild.gradle file is configured correctly, as described in Configure Gradle. Now you're ready to start developing an app using Jetpack Compose. To help you get started and learn about what you can do with the toolkit, try the Jetpack Compose tutorial.

Add Jetpack Compose to an existing project

If you want to use Jetpack Compose in an existing project, you’ll need to configure your project with required settings and dependencies.

Configure Kotlin

Make sure you're using Kotlin 1.4.0 or newer in your project:

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

Configure Gradle

You need to set your app’s minimum API level to 21 or higher and enable Jetpack Compose in your app'sbuild.gradle file, as shown below. Also set the version for the Kotlin compiler plugin.

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 {
        kotlinCompilerVersion '1.4.0'
        kotlinCompilerExtensionVersion '1.0.0-alpha05'
    }
}

Add Jetpack Compose toolkit dependencies

Include Jetpack Compose toolkit dependencies in your app’s build.gradlefile, as shown below:

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

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

Content and code samples on this page are subject to the licenses described in the Content License. Java is a registered trademark of Oracle and/or its affiliates. Last updated 2020-10-28 UTC.

Follow @AndroidDev on Twitter Check out Android Developers on YouTube ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● Get news and tips by email

Oct	NOV	Dec
	02
2019	2020	2021