Jetpack Compose For Wear OS Part-I

3 min readOct 25, 2022

In this article, We will discuss how to use Jetpack Compose to build apps for Android Wear OS with the help of our FitWatch app. Also, We’ll discuss how it is different from Compose for mobile.

Checkout the source code on GitHub: https://github.com/mutualmobile/FitWatchCompose

Add the dependency

implementation "androidx.wear.compose:compose-material:$wear_compose_version"

ScalingLazyColumn

You probably have used LazyColumn in your mobile apps to produce a vertically scrolling list.

Because a round device is smaller at the top and bottom, there is less space to show items. Therefore, Wear OS has its own version of LazyColumn to better support those round devices.

ScalingLazyColumn extends LazyColumn to support both scaling and transparency at the top and bottom of the screen to make the content more readable to the user.

Here’s a demo from our FitWatch App:

val scalingLazyListState = rememberScalingLazyListState()ScalingLazyColumn(
    state = scalingLazyListState,
    scalingParams = ScalingLazyColumnDefaults.scalingParams(
        edgeScale = 0.5f,
        minTransitionArea = 0.65f,
        maxTransitionArea = 0.70f
    ),
) {
    featureItems.forEachIndexed { index, featureListItem ->
        item(key = featureListItem.title) {
            FeatureCard(
                modifier = Modifier.padding(
                    top = if (index == 0) {
                        24.dp
                    } else {
                        8.dp
                    }
                ),
                featureListItem.icon, featureListItem.title,
                onClick = {
                    onClick(featureListItem.title)
                }
            )
        }
    }
}

To get the state of ScalingLazyColumn, we need to use rememberScalingLazyListState(). We can tweak scalingParams to get the desired scaling effect. Rest all is similar to a LazyColumn. We can pass in the content as shown in the above example.

Scaffold

While most of Compose for Wear OS is quite similar to the Compose for mobile, the scaffold is quite different. We do not have AppBar, FloatingActionButton, SideNavigation etc in Wear OS compose. Instead, we can use components like TimeText, PositionIndicator and Vignette. These components are very simple and intuitive to use. Let’s see them one by one in detail.

Scaffold(
    timeText = { 
        if (!scalingLazyListState.isScrollInProgress) TimeText()
    },
    positionIndicator = {
        PositionIndicator(scalingLazyListState = scalingLazyListState)
    },
    vignette = { Vignette(vignettePosition =        VignettePosition.TopAndBottom) 
    }
) {
    ScalingLazyColumn(
        state = scalingLazyListState,
    ) {
        ...
    }
}

TimeText

TimeText uses curved text under the hood and gives developers an easy way to show the time without placing the composable or having to do any work with time-related classes.

PositionIndicator

The PositionIndicator (also known as the Scrolling Indicator) is an indicator on the right side of the screen to show the current indicator location based on the type of state object you pass in. In our case, that will be the ScalingLazyListState.