apk.fm / News / Compose for Wear OS now in Developer Preview!

Compose for Wear OS now in Developer Preview!


Posted by Jeremy Walker, Developer Relations Engineer

Blue background with illustration of watch

At this yr’s Google I/O, we introduced we’re bringing the very best of Jetpack Compose to Wear OS. Nicely, immediately, Compose for Wear OS is in Developer Preview after quite a few profitable alpha releases.

Compose simplifies and accelerates UI growth, and the identical is true of Compose for Wear OS, with built-in help for Materials You that can assist you create stunning apps with much less code.

As well as, what you’ve discovered constructing cellular apps with Jetpack Compose interprets on to the Wear OS model. Identical to cellular, you’re welcome to start out testing it out immediately, and we wish to incorporate your suggestions into the early iterations of the libraries earlier than the beta launch.

This text will evaluate the primary composables we have constructed and level you in direction of sources to get began utilizing them.

Let’s get began!

Many of the Wear associated modifications you make will likely be on the high architectural layers.

Flow chart showing the top two boxes circled in red. Boxes order reads: Material, Foundation, UI, Runtime

Which means most of the dependencies you already use with Jetpack Compose do not change when concentrating on Wear OS. For instance, the UI, Runtime, Compiler, and Animation dependencies will stay the identical.

Nevertheless, you’ll need to make use of the right Wear OS Materials, Navigation, and Basis libraries that are completely different from the libraries you’ve gotten used earlier than in your cellular app.

Beneath is a comparability to assist make clear the variations:

1. Builders can proceed to make use of different materials associated libraries like materials ripple and materials icons prolonged with the Wear Compose Materials library.

Whereas it is technically potential to make use of the cellular dependencies on Wear OS, we at all times advocate utilizing the wear-specific variations for the very best expertise.

Notice: We will likely be including extra wear composables with future releases. When you really feel any are lacking, please tell us.

This is an instance construct.gradle file:

// Instance venture in app/construct.gradle file
dependencies {
    // Commonplace Compose dependencies...

    // Wear particular Compose Dependencies
    // Developer Preview begins with Alpha 07, with new releases coming quickly.
    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 inside your app...
    implementation "androidx.wear.compose:compose-navigation:$wear_version"

    // Different dependencies...

After you have added the precise Wear Materials, Basis, and Navigation dependencies, you might be able to get began.

Let’s discover some composables you can begin utilizing immediately.

As a basic rule, most of the Wear composables which are equal to the cellular variations can use the identical code. The code for styling shade, typography, and shapes with MaterialTheme is similar to cellular as properly.

For instance, to create a Wear OS button your code appears to be like like this:

    modifier = Modifier.measurement(ButtonDefaults.LargeButtonSize),
    onClick = { /*...*/ },
    enabled = enabledState
) {
        painter = painterResource(id = R.drawable.ic_airplane),
        contentDescription = "telephone",
        modifier = Modifier
            .wrapContentSize(align = Alignment.Heart),

The code above is similar to the cellular facet, however the library creates a Wear OS optimized model of the button, that’s, a button round in form and sized by ButtonDefaults to observe Wear OS Materials Tips.

Blue circle with a black airplane logo in the middle

Beneath are a number of composable examples from the library:

As well as, we have launched many new composables that enhance the Wear expertise:

We additionally supply a wear optimized composable for lists, ScalingLazyColumn, which extends LazyColumn and provides scaling and transparency modifications to raised help spherical surfaces. You’ll be able to see within the app under, the content material shrinks and fades on the high and backside of the display to assist readability:

GIF showing watch face scrolling though calendar

When you take a look at the code, you’ll be able to see it is the identical as LazyColumn, simply with a special title.

val scalingLazyListState: ScalingLazyListState = 

    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Association.spacedBy(6.dp),
    state = scalingLazyListState,
) {
    gadgets(messageList.measurement) { message ->
        Card(/*...*/) { /*...*/ }

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

Wear has its personal model of Field, SwipeToDismissBox, which provides help for the swipe-to-dismiss gesture (just like the again button/gesture on cellular) out of the field.

This is a easy instance of the code:

// Requires state (completely different from Field).
val state = rememberSwipeToDismissBoxState()

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

    // Can render a special composable within the background throughout swipe.
    if (swipeBackgroundScreen) {
        /* ... */
        Textual content(textual content = "Swiping Again Content material")
    } else {
        /* ... */
        Textual content( textual content = "Important Content material")

This is a extra advanced instance of the conduct:

GIF of watch face showing calendar agenda

Lastly, we additionally supply a Navigation composable, SwipeDismissableNavHost, which works similar to NavHost on cellular but in addition helps the swipe-to-dismiss gesture out of the field (really makes use of SwipeToDismissBox below the hood).

This is an instance (code):

GIF showing watch face alarm

Scaffold offers a structure construction that can assist you organize screens in widespread patterns, similar to cellular, however as a substitute of an App Bar, FAB, or Drawer, it helps Wear particular layouts with top-level elements like Time, Vignette, and the scroll/place indicator.

The code is similar to what you’ll write on cellular.

We’re excited to convey Jetpack Compose to Wear OS and make watch growth sooner and simpler. To dive proper in and create an app, try our fast begin information. To see working examples (each easy and sophisticated), take a look at our pattern repo.

The Developer Preview is your alternative to affect the APIs, so please share your suggestions right here or be part of the Slack #compose-wear channel and tell us there!

Source hyperlink

Take a comment