Contributor Kseniia ShumelchykDeveloper Relations Engineer, and John Nichol, Technical Leader for Compose for WearOS
Today we are releasing a beta release of Compose for Wear OS. This is the latest declarative UI toolkit designed to help developers create beautiful Wear OS user experiences.
Compose for Wear OS adds support for watch-optimized components that feature Wear OS’s latest material design. The components are built on top of the core Compose library, and the toolkit leverages the latest Android development to accelerate the entire development process.
In this beta release, Compose for Wear OS is a full feature of the 1.0 release released later this year, with the features you need to build production-ready apps. It also means that the API is stable. From now on, we will focus on the performance of the 1.0 release and the polishing of existing components.
In beta
Since the last I / O, we’ve been working hard to get the most out of Jetpack Compose to Wear OS, work with the community through Slack, and collect developer feedback on APIs, components, and tools. As a result, many components have been improved, including navigation, lazy list scaling, input and gesture support, and more.
The first beta release follows the 21 alpha release. The main changes since the announcement of the Developer Preview are:
🆕 Input component
Since we were asked for a user input component, we added various components that could be adjusted to suit the clock app.
- Picker allows the user to select an item from the scroll list. By default, the list of selectable items repeats “infinitely” in both directions, giving the impression of a rotating cylinder when viewed from the side. Interestingly, Picker uses the ScalingLazyColumn implementation underneath to help develop and improve many advanced ScalingLazyColumn features.
- The slider allows the user to choose from a variety of values, which is great for adjusting settings such as font size and brightness.
- Stepper is a full-screen control component that allows the user to choose from a range of values. For example, the user can control the volume of the headphones.
🆕 Dialog
Added full-screen alerts and confirmation composables that can be used as either navigation destinations or traditional full-screen dialogs. These are layered on top of other content. The dialog supports swiping to close and displays the parent content in the background during the swipe gesture.
For consistency with Scaffold, the Position Indicator and Vignette are displayed in a full screen dialog.
🆕 Progress indicator
Added Circular Progress Indicator, a progress indicator optimized for clock screens, to show progress by animating the indicator along a circular track in the clockwise direction.
There are several options for using the CircularProgressIndicator: either to show infinite progress or to show the percentage of completion of tasks in progress. The progress indicator creates a gap in the circular track, leaving space for other content such as TimeText when used in full screen.
🆕 Page indicator
To help implement pagination, the UI toolkit provides a HorizontalPageIndicator component that represents the number of pages and the total number of selected pages.
Depending on the shape of the screen, the HorizontalPageIndicator provides a form factor-specific visual indication of the active page and page length.
Improvement
- ScalingLazyColumn: Improved default behavior to match Wear OS material design, such as updated scaling parameters, additional padding for defaults, and getting the size from the size of the content.
- Scaffolding: Added PageIndicator slot to ensure correct position on round screen.
- Navigation: Ensures the same functionality as create navigation and adds edge swipe support for a great experience with full screen and page scrolling.
- Curved elements: Added Curved Modifiers and a new DSL. This allows developers to use concepts suitable for curved worlds such as radial, angle, sweep, (counterclockwise), inside / outside. CurvedLayout is a bridge between the linear and curved worlds, and Curves Composable can be used to introduce traditional configurable components as needed.
With these recent additions, the Wear OS Creation Materials Catalog contains more components than are available for view-based layouts, providing a ready-to-use implementation of the new Wear OS design guidelines.
tool
Android Studio Electric Eel provides the latest features for the best experience developing with Compose for Wear OS.
- Editor and tool support improves autocomplete and editor actions
- Wear an OS-specific composable preview
- 🆕 Live editing for real-time debugging support
- 🆕 Created for Wear OS project templates
Holologist
Today we are also announcing the release of Horologist, a Google open source project that provides a set of Wear libraries that complement the functionality provided by Compose for WearOS and other WearOS APIs.
Read about watches
Horologist provides useful Compose extensions.
- Media UI components such as playback control and volume screen
- Material date and time picker
- A navigation-enabled scaffold with TimeText and PositionIndicator that keeps scrolling and navigation screen changes and synchronization.
Horologist grows and provides developers with additional tools to build great Wear OS apps in a variety of areas. experience. Check out the Horologist on Github to provide feedback and general features that may be useful to Wear developers. Stay tuned for future releases.
Introduction
Many of the mobile Compose development principles apply to the Compose for Wear OS, so if you’re new to the UI toolkit, start with the Jetpack Compose basics.
We have prepared a set of resources to help you get started with Compose for WearOS.
Now that the Compose for Wear OS is in beta, it’s a great time to get started with Compose to quickly implement your app or update your existing UI. For more information on building apps for Wear OS, visit the developer site.
Tell us about your experience with Compose for Wear OS and what you can build. Participate in Kotlin Slack discussions # Compose-wear Create channels and continue to provide feedback on your issue tracking system.
Happy composition!