Tools for Compose

Android Studio brings a lot of new features specifically for Jetpack Compose. It embraces a code-first approach while improving the developer productivity without having to choose between using design interface or code editor.

A fundamental difference between View-based UI and Jetpack Compose is that Compose doesn't rely on View to render its composables. As a consequence of this architecture approach, Android Studio offers extended features for Jetpack Compose without having to open an emulator or connect to a device. Compared to Android Views, this allows a faster, iterative process for developers to implement their UI designs.

To enable Android Studio-specific features for Jetpack Compose, you need to add these dependencies in your application build.gradle(.kts) file. You can either use the Bill of Materials (BOM) or define dependencies individually.

Bill of Materials

  val composeBom = platform("androidx.compose:compose-bom:2023.01.00")
  implementation(composeBom)

  debugImplementation("androidx.compose.ui:ui-tooling")
  implementation("androidx.compose.ui:ui-tooling-preview")

Individually

  debugImplementation("androidx.compose.ui:ui-tooling:1.5.2")
  implementation("androidx.compose.ui:ui-tooling-preview:1.5.2")

Design

Create components, design systems, and screens to align with design specs.
PreviewParameter Multipreview
The @Preview annotation allows you to preview your composables. Learn how to preview, organize, and interact with them.
Learn more
Animation Preview
Android Studio allows you to design and inspect animations using the Animation Preview pane. With this, you can preview an animation frame by frame and make sure it aligns with required behavior.
Learn more

Develop

Accelerate building the UI and testing the running application with less context switching.
Live Edit
Learn how to use Live Edit and apply changes to avoid a full build and accelerate your development process.
Learn more
Live templates Gutter icons
Learn how to use features inside the Android Studio editor window for improved productivity.
Learn more

Debug

Debug your Compose UI to understand your app. Learn more about analyzing layout, recompositions, and composition tracing to improve the UI performance of your app.
Recomposition counts Semantics
Learn how to inspect a Compose layout in an emulator or physical device.
Learn more
System Tracing
Use composition tracing to trace your composable functions in a system trace.
Learn more

Additional Tools

Relay provides instant handoff of Android UI components between designers and developers. Designers can use the Relay for Figma plugin to annotate and package UI components for developer use, including information about layout, styling, dynamic content, and interaction behavior.
Learn more

Latest news and videos