Welcome experience | Compose Developer Preview for Wear OS

Author/Developer Relations Engineer Jeremy Walker

At this year's Google I/O Conference , we announced the introduction of the excellent features of Jetpack Compose into Wear OS. After successfully releasing multiple alpha versions, Wear OS version Compose is now available for developer preview.

Compose simplifies and accelerates UI development , as is the Wear OS version of Compose. With the built-in Material You support, you can build more beautiful applications with less code.

In addition, your experience in using Jetpack Compose to build mobile applications can also be directly applied to the Wear OS version. Just like on mobile devices, you are welcome to start testing immediately. We also hope to incorporate your feedback into the early iterations of the library before the Beta version is released.

This article will review a few of the main composable items we built and introduce the many resources to help you get started.

Start now!

dependency

Most of the changes you make to the Wear device will be at the top architecture layer .

This means that when designing for Wear OS, many of the dependencies you use with Jetpack Compose will not change. For example, the UI, runtime, compiler, and animation dependencies will all remain unchanged.

However, you need to use the appropriate Wear OS Material, navigation and basic development library, which is different from the development library you used in the mobile application.

The following is a related comparison, which can help you distinguish the differences between the two:

Wear OS dependencies (androidx.wear.*)	vs.	mobile dependencies (androidx.*)
androidx.wear.compose:compose-material	replace	androidx.compose.material:material¹
androidx.wear.compose:compose-navigation	replace	androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation	Additional	androidx.compose.foundation:foundation

1. Developers can continue to use other Material-related development libraries, such as Material Ripple and the Material icon extended by Wear Compose Material development library.

Although it is technically possible to use mobile dependencies on Wear OS, we still recommend that you use the version dedicated to Wear for the best experience.

Note: We will add more Wear combinable items in future versions. If you think there are any omissions, welcome to share with us .

Here is a sample 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...
}

After adding the correct Wear Material, basics, and navigation dependencies, you can get started.

items

Let’s take a look at some composable items that can be used immediately.

In general, many combinable items that are equivalent to the mobile version of Wear can use the same code. style color, typography and the use of MaterialTheme shape code is the same.

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 above code is very similar to the mobile code, but the library creates a Wear OS optimized version of the button, that is, ButtonDefaults ) to comply with Wear OS Material guidelines.

Here are some examples of combinable items in the development library:

• button
• card
• icon
• text

In addition, we have also introduced many new combinable items that can enhance the Wear experience:

• Chip
• ToggleChip
• BasicCurvedText
• TimeText

We also provided a combinable item ScalingLazyColumn optimized for Wear for the list, extended LazyColumn and added scaling and transparency changes to better support the circular interface. As you can see in the app below, the content is reduced and faded at the top and bottom of the screen to improve readability:

Looking at the code, you can see that the code is the LazyColumn , but the name is different.

val scalingLazyListState: ScalingLazyListState = 
    rememberScalingLazyListState()

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

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

slide to close

Wear has its own Box , which is SwipeToDismissBox . This version adds support for the slide-to-close gesture out of the box (similar to the back button/gesture in mobile devices).

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 complicated example:

Navigation

Finally, we also provide navigation items can be combined SwipeDismissableNavHost , the items can be combined with a mobile device NavHost works like, but also support out of the box slide closed gestures (actually used in the background SwipeToDismissBox ). Here is an example ( code ).

Scaffold

Scaffold provides a layout structure to help you arrange the screen in a common pattern like a mobile device, but not the application bar, floating action button (FAB), or navigation drawer. Scaffold supports Wear-specific layouts and provides top-level components such as time, curve text styles, and scroll/position indicators.

• TimeText
• Curved text style
• PositionIndicator

This part of the code very similar to the code you use on the mobile app.

Start using

We are very happy to introduce Jetpack Compose to Wear OS, making watch development faster and easier. If you want to experience and create applications directly, please check out our Quick Start Guide .

To see possible examples (both simple and complex), you can visit our example repo :

Your feedback helps us to increase and improve the API in the Developer Preview, you are welcome to us share your feedback , or join Slack # Compose-Wear channel to share with us! You are also welcome to continue to follow the "Android Developer" WeChat official account to learn more about the latest content.

You are welcome to click here to submit feedback to us, or share your favorite content or problems found. Your feedback is very important to us, thank you for your support!