Watch I/O | Compose for Wear OS Beta Release!

By Kseniia Shumelchyk, Developer Relations Engineer & John Nichol, Tech Lead of Compose for Wear OS

We officially released the beta version of Compose for Wear OS , our modern declarative user interface toolkit designed to help developers build beautiful user experiences for Wear OS.

Compose for Wear OS adds watch-optimized components based on Wear OS's latest Material design specifications and built on top of the core Compose library. The toolkit makes full use of Modern Android Development to speed up the overall development process.

With the beta release, Compose for Wear OS has the full functionality needed for version 1.0 (coming later this year) and is ready for you to build production-ready apps. This also means that its API is stable, and in the future we will focus on improving performance and continuing to polish existing components for version 1.0. Check out the Compose for Wear OS beta release video for more details.

Beta version introduction

Since last year's I/O conference, we've been working hard to bring the benefits of Jetpack Compose to Wear OS, and we've also engaged with the community via Slack to gather developer feedback on APIs, components, and tools. Some components have also been improved as a result, such as navigation, scaling lazy lists, input and gesture support, and more.

We've released 21 alphas before the current Beta 1. Let's take a look at the main changes since the release of the developer preview :

🆕 Input Components

Developers asked us to provide user input components, so we added different Composables for everyone to customize for their watch applications:

• Picker allows the user to select an item from a scrolling list. By default, this list of selectable items repeats "infinitely" in both directions, looking like a spinning drum from the side. Interestingly, Picker uses ScalingLazyColumn at the bottom to implement, and expands and polishes many advanced functions of ScalingLazyColumn.
• Sliders allow users to select from a range of values and are ideal components for adjusting settings such as font size or brightness.
• Stepper is a full-screen control component that allows the user to select from a range of values. For example, users can use it to control the volume of headphones.

🆕 Dialog

We've added Fullscreen Warning and Confirmation Composables, which can be used both as navigation destinations and as traditional fullscreen Dialogs that will be overlaid on top of any other content. The dialog supports swipe to close, which in turn shows the parent content in the background.

In keeping with Scaffold , the fullscreen dialog displays a PositionIndicator and a Vignette .

🆕 Progress Indicator

We've added CircularProgressIndicator , a progress indicator optimized for watch screens that shows progress by drawing the indicator along a clockwise circular track:

We have several options for how to use CircularProgressIndicator: either display infinite progress, or express the completion percentage of ongoing tasks. The progress indicator allows for a gap in the circular track to make room for other content, such as using TimeText when fullscreen.

🆕 Page indicator

To help you implement pagination, the UI Kit also provides the HorizontalPageIndicator component, which displays the total and selected pages:

The HorizontalPageIndicator will provide the currently displayed page and its position in the total number of pages, and will use the corresponding visual presentation method according to the actual shape of the screen.

Improvements at a glance

• ScalingLazyColumn : Improved default behavior to align with Wear OS's Material design, including updated scaling parameters, default extra padding, and taking dimensions from what it contains.
• Scaffold : Added PageIndicator slot to ensure correct positioning on circular screens.
• Navigation : Ensures the same functionality as Compose Navigation, and adds support for edge swiping for a good experience with full screen and page scrolling.
• Curved Elements : Added CurvedModifier and a new DSL that enables developers to use polar coordinate related concepts such as radial, angle, sweep, clockwise/counterclockwise, circle inside/outside, etc. CurvedLayout is a bridge between Cartesian and polar coordinates, and curvedComposable can be used to introduce traditional Composable components (provided it makes sense to do so).

With these latest additions, the Compose Material Component Catalog for Wear OS now has more components than View-based layouts and provides out-of-the-box functionality based on the new Wear OS Design Guidelines realization.

tool

Android Studio Electric Eel provides the latest features to give you the best experience in Compose for Wear OS development:

• Editor and tool support Improved autocompletion and editor actions
• Composable Preview for Wear OS
• 🆕 Real-time editing function that supports real-time debugging
• 🆕 Compose for Wear OS Project Template

Horologist

We also publish Horologist . This is a Google open source project that provides a set of Wear development libraries that complement the functionality provided by Compose for Wear OS and other Wear OS APIs.

]( https://devrel.andfun.cn/devrel/posts/2022/05/rcjsKm.png )

△ Learn more about Horology

Horologist provides useful Compose extensions for you to choose from:

• Media UI components, including playback and volume control interfaces
• Material style date and time picker
• Navigation-aware Scaffold with TimeText and PositionIndicator to keep pace with scrolling and navigation screen changes.

Horologist will continue to evolve to provide developers with more tools to build great Wear OS apps for different projects. Please check out the Horologist repo on Github, give us feedback, and contribute common features that may be useful to Wear developers. Please continue to pay attention to the next version!

Get started now

Many of the mobile Compose development principles also apply to the Wear OS version of Compose. If you are not familiar with this user interface toolkit, you can start with the basics of Jetpack Compose .

We've prepared a set of materials to help you get started with Compose for Wear OS:

• Compose for Wear OS Pathway .
• A quick start guide to help you create your first project
• The latest design and implementation guidelines for the Compose Material component catalog for Wear OS
• Simple and complex Compose for Wear OS examples , available on Github
• Compose for Wear OS Codelab for hands-on experience

With the arrival of Compose for Wear OS Beta, now is the time to start using Compose to build your own apps or use it to update existing interfaces. To learn more about building apps for Wear OS, go to the developer site .

We can't wait to hear your thoughts on using Compose for Wear OS and look forward to seeing what you build! Everyone is welcome to join the discussion in the Kotlin Slack #compos-wear channel, and please continue to submit feedback to us on the Issues Feedback page.

Happy writing with Compose!

You are welcome to click here to submit feedback to us, or to share what you like and problems you find. Your feedback is very important to us, thank you for your support!