Adding Jetpack Compose to your app

Stay organized with collections Save and categorize content based on your preferences.

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 "com.android.tools.build:gradle:7.3.0"
        ...
    }
}

Configure Kotlin

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

plugins {
    id 'kotlin-android'
}

Configure Gradle

You need to set your app’s minimum API level to 21 or higher, enable Jetpack Compose in your app's build.gradle file, and add the library dependencies, as shown in the Quick start guide.

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 "com.google.android.material:compose-theme-adapter:1.1.16"

    // When using a AppCompat theme
    implementation "com.google.accompanist:accompanist-appcompat-theme:0.25.1"
}

Start migrating to Compose

See Migration strategy for guidance on how to begin your migration to Compose. There, learn how to safely and incrementally introduce Compose into your codebase.

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

Test your mixed Compose/Views 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 {
    @Rule
    @JvmField
    val composeTestRule = createAndroidComposeRule<MyActivity>()

    @Test
    fun testGreeting() {
        val greeting = InstrumentationRegistry.getInstrumentation()
            .targetContext.resources.getString(R.string.greeting)

        composeTestRule.onNodeWithText(greeting).assertIsDisplayed()
    }
}

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.