Adding Jetpack Compose to your app

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

Set up your development environment

Install the right Android Studio version

For the best experience developing with Jetpack Compose, you should download Android Studio, and configure the Android Gradle Plugin that corresponds to the version of Android Studio:

buildscript {
    dependencies {
        classpath ""

Configure Kotlin

Make sure you're using Kotlin 1.6.10 in your project:

plugins {
    id 'kotlin-android'

Configure Gradle

You need to set your app’s minimum API level to 21 or higher and enable Jetpack Compose in your app's build.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"

    composeOptions {
        kotlinCompilerExtensionVersion '1.1.1'

Add Jetpack Compose toolkit dependencies

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

dependencies {
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.4.0'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.1.1'
    // Animations
    implementation 'androidx.compose.animation:animation:1.1.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.1.1'

Reuse your View theme in Compose

If you just added Compose to your project, you might want Compose to inherit the themes available in the View system instead of rewriting your own Material theme in Compose from scratch.

If you're using the MDC library in your Android app, the MDC Compose Theme Adapter library allows you to easily re-use the color, typography and shape theming from your existing View-based themes, in your composables. That's achieved using the MdcTheme API.

If you're using AppCompat XML themes instead, use the AppCompat Compose Theme Adapter that contains the AppCompatTheme API.

Include the dependency you need in your app’s build.gradle file, as shown below:

dependencies {
    // When using a MDC theme
    implementation ""

    // When using a AppCompat theme
    implementation ""

Start migrating to Compose

Imagine we want to migrate the user greeting text to Jetpack Compose in our application. We could have the following content in a XML layout:

    <!-- Other content -->

        ... />

To migrate it to Compose, we can replace the TextView with a ComposeView keeping the same layout parameters and id. All other XML attributes will be migrated to Compose:

    <!-- Other content -->


Then, in either the Activity or Fragment that uses that XML layout, we get the ComposeView from it and call the setContent method to add Compose content into it:

class MyActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // ...

        val greeting = findViewById<ComposeView>(
        greeting.setContent {
            MdcTheme { // or AppCompatTheme

private fun Greeting() {
        text = stringResource(R.string.greeting),
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .padding(horizontal = dimensionResource(R.dimen.margin_small))

For more information about ComposeView and other interoperability APIs, check out the Interoperability APIs guide. To learn more about stringResource, dimensionResource, and other resource APIs in Compose, check out the Resources in Compose guide.

Test your hybrid UI

After migrating parts of your app to Compose, testing is critical to make sure you haven't broken anything.

When an activity or fragment uses Compose, instead of using ActivityScenarioRule, you need to use createAndroidComposeRule that integrates ActivityScenarioRule with a ComposeTestRule that lets you test Compose and View code at the same time.

class MyActivityTest {
    val composeTestRule = createAndroidComposeRule<MyActivity>()

    fun testGreeting() {
        val greeting = InstrumentationRegistry.getInstrumentation()


Check out Testing your Compose layout guide to learn more about testing and the interoperability with Espresso.

If you use the Navigation Component in your app, check out the Interoperability section of the Navigating with Compose guide.

Next steps

More information about Compose can be found in the documentation index. There are different approaches to adopt Compose in your app, learn more about this in the Adopting Compose in your app guide which also links to other guides such as Compose in your existing architecture and Compose in your existing UI.