Compose tooling

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 design interface or code editor only.

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, allowing a faster iterative process for developers to implement their UI designs.

To enable Android Studio specific features for Jetpack Compose, you need to add this dependency in your application build.gradle file:

implementation "androidx.compose.ui:ui-tooling:1.0.0-beta01"

Composable Preview

A composable is defined by a function, annotated with @Composable:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

To enable a preview of this composable, you need to create another composable, annotated with @Composable and @Preview, emitting the composable you’ve created initially:

@Preview
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

Finally, click on the split (design/code) view to open the right side panel where your preview will be displayed:

@Preview accepts parameters to customize the way Android Studio will render it. You can add these parameters manually in your code, or click on the gutter icon next to @Preview to display the configuration picker, to let you select and change those configuration parameters.

@Preview features

Android Studio offers some features to extend composable previews. You can change their container design, interact with them, or deploy them directly to an emulator or device.

Interactive mode

The interactive mode allows you to interact with a preview in a similar fashion you would do on a device. The interactive mode is isolated in a sandbox environment (isolated from other previews), where you can click elements and enter user input in the preview; the preview even plays animations. It’s a quick way to test different states and gestures of your composable, like a checkbox being checked or empty.

Preview interactive mode runs directly inside Android Studio without an emulator running, which results in some limitations:

• No network access
• No file access
• Some Context APIs may not be fully available

Deploy Preview

You can deploy a specific @Preview to an emulator or physical device. The preview is deployed within the same project app as a new activity, so it shares the same context and permissions, which means you don't have to write boilerplate code like asking for a permission if it has already been granted.

Code navigation and composable outlines

You can hover over a preview to see the outlines of the composables contained within. Clicking on a composable outline triggers your editor view to navigate to its definition.

Copy @Preview render

Every rendered preview can be copied as an image by right clicking on it.

@Preview configuration

@Preview takes extra parameters to change the preview rendering configuration. Those parameters can be set manually in the code or changed through the preview gutter icon:

Set background color

By default, your composable will be displayed with a transparent background. To add a background, add the showBackground and backgroundColor parameters. Keep in mind that backgroundColor is a ARGB Long, not a Color value:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}

Dimensions

By default, @Preview dimensions are chosen automatically to wrap its content. If you want to set the dimensions manually, you can add heightDp and widthDp parameters. Keep in mind those values are already interpreted as Dp, you don't need to add .dp at the end of the value:

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}

Locale

To test different user locales, you need to add the locale parameter:

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greetings))
}

System UI

If you need to display the status and action bars inside a preview, add the showSystemUi parameter:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}

Editor actions

Android Studio has also features inside the editor area to improve your productivity with Jetpack Compose.

Live Templates

Android Studio has added these Compose-related live templates, which allow you to enter code snippets for fast insertion by typing the corresponding template abbreviation:

• comp to set up a @Composable function
• prev to create a @Preview composable function
• paddp to add a padding Modifier in dp
• weight to add a weight Modifier
• W, WR, WC to surround the current composable with a Box, Row, or Columncontainer

Gutter icons

Gutter icons are contextual actions visible on the sidebar, next to the line numbers. Android Studio introduces several gutter icons specific to Jetpack Compose to ease your developer experience.

Preview picker

You can change @Preview parameters directly from the gutter icon:

Deploy preview

You can deploy a @Preview to the emulator or physical device directly from the gutter icon:

Color picker

Whenever a color is defined inside or outside a composable, its preview is shown on the gutter. You can change the color via the color picker by clicking on it like this:

Image resource picker

Whenever a drawable, vector, or image is defined inside or outside a composable, its preview is shown on the gutter. You can change it via the image resource picker by clicking on it like this:

Iterative code development

As a mobile developer, you’re often developing your app’s UI step by step rather than developing everything at once. Android Studio embraces this approach with Jetpack Compose by providing tools that don’t require a full build to inspect, modify values and verify the final result.

Live Literals

Android Studio can update in real time some constant literals used in composables within previews, emulator, and physical device. Here are some supported types:

• Int
• String
• Color
• Dp
• Boolean

You can view constant literals that trigger real time updates without compilation step by enabling these highlighted values:

Apply Changes

Apply Changes allows you to update code and resources without having to redeploy your app to an emulator or physical device (with some limitations).

Whenever you add, modify, or delete composables, you can update your app without having to redeploy it by clicking on this button:

Layout Inspector

Layout inspector allows you to inspect a Compose layout inside a running app in an emulator or physical device.

Animations

Android Studio allows you to inspect animations from interactive previews. If an animation is described in a composable preview, you can inspect the exact value of each animated value at a given time, pause the animation, loop it, fast-forward it, or slow it, to help you debug the animation throughout its transitions:

@Preview
@Composable
fun PressedSurface() {
    val (pressed, onPress) = remember { mutableStateOf(false) }
    val transition = updateTransition(
        targetState = if (pressed) SurfaceState.Pressed else SurfaceState.Released
    )

    val width by transition.animateDp { state ->
        when (state) {
            SurfaceState.Released -> 20.dp
            SurfaceState.Pressed -> 50.dp
        }
    }
    val surfaceColor by transition.animateColor { state ->
        when (state) {
            SurfaceState.Released -> Color.Blue
            SurfaceState.Pressed -> Color.Red
        }
    }
    val selectedAlpha by transition.animateFloat { state ->
        when (state) {
            SurfaceState.Released -> 0.5f
            SurfaceState.Pressed -> 1f
        }
    }

    Surface(
        color = surfaceColor.copy(alpha = selectedAlpha),
        modifier = Modifier
            .toggleable(value = pressed, onValueChange = onPress)
            .size(height = 200.dp, width = width)
    ){}
}

To enable the animation inspector, click on this button: