Blog Infos
Author
Published
Topics
,
Published

Google recently announced that Compose for Wear OS is in Developer Preview. In this blog post, you will understand how to use Scaffold in Wear OS to build apps using different Material Design components.

If you have built Android apps in Jetpack Compose, I have good news, all components in Compose will continue to work as expected in Wear OS, it’s just that we have some additional components that have been built taking the Wear OS platform into consideration.

If you are interested in exploring other components in Compose for Wear OS you can check out other blogs that I have written.

Let’s get started!

Adding the Wear OS dependencies

def wearVersion = "1.0.0-alpha08"
implementation "androidx.wear.compose:compose-material:$wearVersion"
view raw build.gradle hosted with ❤ by GitHub

Just like while making an Android app we can use a Scaffold to add common UI elements like top app bar, bottom app bar etc, we can use the Scaffold from the androidx.wear.compose.material package to add the common Material Design components in a Wear OS app.

Let’s have a look at the method signature of Scaffold

@Composable
public fun Scaffold(
modifier: Modifier = Modifier,
vignette: @Composable (() -> Unit)? = null,
positionIndicator: @Composable (() -> Unit)? = null,
timeText: @Composable (() -> Unit)? = null,
content: @Composable () -> Unit
)
view raw Scaffold.kt hosted with ❤ by GitHub

Let me give a brief overview of all these parameters and later in the blog, we will understand each of these components in detail.

  • vignette is the blur that you can see on the top and bottom edges of a scrollable container
  • positionIndicator is the scrollbar that appears on the side of your scrollable container
  • timeText is the time that you see at the top of your screen

The following code snippet shows how we can use the Scaffold component

Scaffold(
timeText = {
TimeText()
},
vignette = {
Vignette(vignettePosition = VignettePosition.TopAndBottom)
},
positionIndicator = {
PositionIndicator(
scalingLazyListState = scalingLazyListState
)
}
) {
// omitted for brevity
..
..
}
view raw MainActivity.kt hosted with ❤ by GitHub

This is how the Scaffold would look like:

Note: The list implementation has been skipped on purpose to keep things simple. Let’s focus on Scaffold in this blog.

All the components used inside Scaffold are from the Compose for Wear OS library. Let’s understand how they work

This component will add the time text at the top of your screen. Let’s look at its method signature

@Composable
fun TimeText(
modifier: Modifier = Modifier,
timeSource: TimeSource = TimeTextDefaults.timeSource(timeFormat()),
timeTextStyle: TextStyle = TimeTextDefaults.timeTextStyle(),
contentPadding: PaddingValues = TimeTextDefaults.ContentPadding,
leadingLinearContent: (@Composable () -> Unit)? = null,
leadingCurvedContent: (@Composable CurvedRowScope.() -> Unit)? = null,
trailingLinearContent: (@Composable () -> Unit)? = null,
trailingCurvedContent: (@Composable CurvedRowScope.() -> Unit)? = null,
textLinearSeparator: @Composable () -> Unit = { TextSeparator(textStyle = timeTextStyle) },
textCurvedSeparator: @Composable CurvedRowScope.() -> Unit = {
CurvedTextSeparator(curvedTextStyle = CurvedTextStyle(timeTextStyle))
},
)
view raw TimeText.kt hosted with ❤ by GitHub

This might look too much but it is really simple, the screenshot below might help you to understand it better. The timeSource parameter will retrieve the current time of the watch. The timeFormat() would be the format that the user has chosen for their watch whether it is in 24 hour or 12 hour format.

In Wear OS, the screen can be circular or square shaped, to make it easy to handle these scenarios we have these linear and curved parameters, the linear parameters will only be applied to square watches and the curved parameters will be applied to the circular watches. So if you want to show some text before the time text you can use leadingLinearContent or leadingCurvedContent. Similarly to show text after the time text, you can use trailingLinearContent or trailingCurvedContent.

The last parametertextLinearSeparator or textCurvedSeparator by default will add a “.” before or after the time text to separate it from the leading and trailing content (check it out in the screenshot above). You can customise it to add anything you want. This text separator will only be added if you use any of the above leading/trailing texts.

This composable will blur the top or bottom edge of the screen slightly. Let’s have a look at the method signature

@Composable
public fun Vignette(
vignettePosition: VignettePosition,
modifier: Modifier = Modifier,
)
view raw Vignette.kt hosted with ❤ by GitHub

Job Offers

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

,

Creating your first Wear OS app using compose

This will be an introductory session into the world of wearable apps. In this session we’ll discuss how to create a latest up to date wearable app by using “Compose for Wear OS” and Horologist…
Watch Video

Creating your first Wear OS app using compose

Mikhail Kulaha
Compose engineer
Google

Creating your first Wear OS app using compose

Mikhail Kulaha
Compose engineer
Google

Creating your first Wear OS app using compose

Mikhail Kulaha
Compose engineer
Google

Jobs

Here we just have to provide where all we want to blur the screen. The values that we can provide to vignettePosition are TopBottom and TopAndBottom.

You can check the screenshot below to see how Vignette looks.

This component will add a scrollbar to the scrollable composable. This component has multiple method signatures as it supports multiple scrollable components, let’s have a look at one of these method signatures

@Composable
public fun PositionIndicator(
scalingLazyListState: ScalingLazyListState,
modifier: Modifier = Modifier,
reverseDirection: Boolean = false
)

The parameter scalingLazyListState is the scrolling state used to implement the PositionIndicator. The reverseDirection if given the true value will make the scrollbar move in the opposite direction of the scroll so if the user is scrolling down, the scroll bar will move up. The following video may make it easier to understand the difference.

 

It’s an exciting time to be an Android developer, Jetpack Compose makes UI development enjoyable. I had fun making Wear OS apps in Jetpack Compose, I hope you enjoyed the blog post.

The GitHub repository of this sample app has been linked below

If you have feedback, feel free to tweet/message me on Twitter.

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog
In the world of Jetpack Compose, where designing reusable and customizable UI components is…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu