Compose for Wear OS now in Developer Preview!

Posted by Jeremy Walker, Developer Relations Engineer

Blue background with illustration of clock

At this year’s Google I / O, we announced that we’re bringing the best of Jetpack Compose to Wear OS. Well, today, Compose for Wear OS is in Developer Preview after a series of successful alpha releases.

Compose simplifies and speeds up UI development, and so does Compose for Wear OS with built-in Material You support that helps you create beautiful apps with less code.

What you’ve learned about building mobile apps with Jetpack Compose also translates directly into the Wear OS version. Like mobile, feel free to start testing it right away, and we want to incorporate your feedback into the libraries’ early iterations before the beta release.

This article will review the most important composites we have built and point you to the resources to get started using them.

Let’s get started!

Most of the wear and tear changes you make will be in the top architectural layers.

Flowchart showing the top two boxes circled in red.  The boxes' order reads: Material, Foundation, UI, Runtime

This means that many of the dependencies you already use with Jetpack Compose do not change when you target Wear OS. For example, UI, Runtime, Compiler and Animation dependencies will remain the same.

However, you will need the correct Wear OS material, Navigation and Foundation libraries, which are different from the libraries you have previously used in your mobile app.

Below is a comparison to clarify the differences:

1. Developers may continue to use other materials-related libraries, e.g. Material ripples and material icons that expand with the Wear Compose Material library.

Although it is technically possible to use the mobile dependencies on Wear OS, we always recommend using the wear-specific versions for the best experience.

Note: We are adding more wear components with future releases. If you feel something is missing, let us know.

Here is an example build.gradle file:

// Example project in app/build.gradle file
dependencies {
    // Standard Compose dependencies...

    // Wear specific Compose Dependencies
    // Developer Preview starts with Alpha 07, with new releases coming soon.
    def wear_version = "1.0.0-alpha07"
    implementation "androidx.wear.compose:compose-material:$wear_version"
    implementation "androidx.wear.compose:compose-foundation:$wear_version"

    // For navigation within your app...
    implementation "androidx.wear.compose:compose-navigation:$wear_version"

    // Other dependencies...
}

Once you have added the right dependencies on wear material, foundation and navigation, you are ready to go.

Let’s examine some composite materials you can start using today.

As a general rule, many of the Wear composites corresponding to the mobile versions may use the same code. The code for styling color, style and shapes with MaterialTheme is also identical to mobile.

For example, to create a Wear OS button, your code looks like this:

Button(
    modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
    onClick = { /*...*/ },
    enabled = enabledState
) {
    Icon(
        painter = painterResource(id = R.drawable.ic_airplane),
        contentDescription = "phone",
        modifier = Modifier
            .size(24.dp)
            .wrapContentSize(align = Alignment.Center),
    )
}

The code above is very similar to the mobile page, but the library creates a Wear OS-optimized version of the button, that is, a button circular in size and size ButtonDefaults to follow Wear OS Material Guidelines.

Blue circle with a black flight logo in the middle

Below are several composable examples from the library:

In addition, we have introduced many new composite materials that improve the wear experience:

We also offer a wear-optimized composition bar for lists, ScalingLazyColumnextending LazyColumn and adds changes in scaling and transparency to better support round surfaces. You can see in the app below, the content shrinks and fades at the top and bottom of the screen to help read:

GIF shows clock face scrolling through calendar

If you look at the code, you can see that it is the same as LazyColumn, just with a different name.

val scalingLazyListState: ScalingLazyListState = 
    rememberScalingLazyListState()

ScalingLazyColumn(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(6.dp),
    state = scalingLazyListState,
) {
    items(messageList.size) { message ->
        Card(/*...*/) { /*...*/ }
    }

    item {
        Card(/*...*/) { /*...*/ }
    }
}

Wear has its own version of Box, SwipeToDismissBox, which adds support for the stroke-to-reject gesture (similar to the back button / gesture on the mobile) out of the box.

Here is a simple example of the code:

// Requires state (different from Box).
val state = rememberSwipeToDismissBoxState()

SwipeToDismissBox(
    modifier = Modifier.fillMaxSize(),
    state = state
) { swipeBackgroundScreen ->

    // Can render a different composable in the background during swipe.
    if (swipeBackgroundScreen) {
        /* ... */
        Text(text = "Swiping Back Content")
    } else {
        /* ... */
        Text( text = "Main Content")
    }
}

Here is a more complex example of the behavior:

GIF of clock face showing calendar agenda

Finally, we also offer a Navigation component, SwipeDismissableNavHostthat works like NavHost on mobile, but also supports iron-to-reject gesture out of the box (actually uses SwipeToDismissBox under the radiator hood).

Here is an example (code):

GIF shows clock face alarm

Scaffold provides a layout structure to help you arrange screens in plain patterns, just like mobile, but instead of an App Bar, FAB or drawer, it supports Wear specific layouts with top-level components such as Time, Vignette and the scroll / position indicator.

The code is very similar to what you would type on your mobile.

We are excited to bring Jetpack Compose to Wear OS and make watch development faster and easier. To dive straight in and create an app, check out our Quick Start Guide. If you want to see working examples (both simple and complex), take a look at our sample repo.

The developer example is your opportunity to influence the APIs, so please share your feedback here or join Slack # compose-wear channel and let us know it there!

Leave a Comment