Horologist

New features and APIs

The Compose for Wear OS 1.1 release includes the following new functionality (baseline profiles already added for new components):

Outlined style for Chips and Buttons

To give you additional ability to customize the user interface, we added outlined styles for Chips and Buttons. New OutlinedChip and OutlinedButton composables provide a transparent component with a thin border that can be used for medium-emphasis actions. Also available for compact versions: OutlinedCompactChip and OutlinedCompactButton.

OutlinedChip and OutlinedButton composables

Modifying Chip and Button shapes

Starting from version 1.1, you can also modify shapes for Chip/ToggleChip and Button/ToggleButton components using new functions overloads.

Different Chip and Button shapes

Placeholder API

A new experimental API has been added to implement placeholder support. This can be used to achieve three distinct visual effects separately or all together:

A placeholder background brush effect used in containers such as Chip and Cards to draw over the normal background when waiting for content to load.
A Modifier.placeholder() to draw a stadium shaped placeholder widget over the top of content that is being loaded.
A Modifier.placeholderShimmer() for gradient/shimmer effect that is drawn over the top of the other effects to indicate to users that the current state is waiting for data to load.

These effects are designed to be coordinated and shimmer and wipe-off in an orchestrated fashion.

Placeholder API usage examples

Check out the reference docs and sample in Horologist to see how to apply the placeholder to common use cases, such as a Chip with icon and a label that puts placeholder over individual content slots and draws a placeholder shimmer on top while waiting for data to load.

Modifier.scrollAway

Horologist’s fadeAway modifier has been graduated to scrollAway modifier in version 1.1. Modifier.scrollAway scrolls an item vertically in and out of view, based on the scroll state, and already has overloads to work with Column, LazyColumn and ScalingLazyColumn.

Use this modifier to make TimeText fade out of the view as the user starts to scroll a list of items upwards.

ScrollAway modifier usage with TimeText

Additional parameters in CurvedTextStyle

CurvedTextStyle now supports additional parameters (fontFamily, fontWeight, fontStyle, fontSynthesis) to specify font details when creating a curved text style. Extended curved text style can be used on both curvedText and basicCurvedText.

Applying different font to curved text

UX and accessibility improvements

The 1.1 release also focuses on bringing a refined user experience, improvements for TalkBack support and overall better accessibility:

ToggleChip and SplitToggleChip support usage of animated toggle controls (Checkbox, Switch and RadioButton) that can be used instead of the static icons provided by ToggleChipDefaults.
Default gradient colors for Chip/ToggleChip and Cards were adjusted to match the latest UX specification.
Updated a number of the default colors in the MaterialTheme to improve accessibility as the original colors did not have sufficient contrast.
Accessibility improvements to Picker so that multi-picker screens are navigable with screen readers and the content description is accessible.
InlineSlider and Stepper now have button roles, so that TalkBack can recognize them as buttons.
The PositionIndicator in Scaffold is now positioned and sized so that it only takes the space needed. This is useful when semantic information is added to it, so TalkBack gets the correct bounds of the PositionIndicator on screen.

It’s time ⌚ to bring your app to the wrist!

Get started

To begin developing with Compose for Wear OS, get started with hands-on experience trying our codelab, and make sure to check out the documentation and samples. Visit Compose for Wear OS release notes for full list of changes available in version 1.1.

Note that using version 1.1 of Compose for Wear OS requires using the version 1.3 of androidx.compose libraries and therefore Kotlin 1.7.10. Check out the Compose to Kotlin Compatibility Map for more information.

Provide feedback

Compose for Wear OS continues to evolve with the features you’ve been asking for. Please do continue providing us feedback on the issue tracker and join Kotlin Slack #compose-wear channel to connect with the Google team and dev community.

We’re excited to see a growing number of apps using Compose for Wear OS in production, and we’re grateful for all issues and requests that help us to make the toolkit better!

Start building for Wear OS now

Discover even more with technical sessions from the Android Dev Summit providing guidance on app architecture, testing, handling rotary input, and verticalized sessions for media and fitness.

Posted by Kseniia Shumelchyk, Android Developer Relations Engineer

Today we’re launching version 1.0 of Compose for Wear OS, the first stable release of our modern declarative UI toolkit designed to help developers create beautiful, responsive apps for Google’s smartwatch platform.

Compose for Wear OS was built from the bottom up in Kotlin with assumptions of modern app architecture. It makes building apps for Wear OS easier, faster, and more intuitive by following the declarative approach and offering powerful Kotlin syntax.

The toolkit not only simplifies UI development, but also provides a rich set of UI components optimized for the watch experience with built-in support of Material design for Wear OS, and it’s accompanied by many powerful tools in Android Studio to streamline UI iteration.

What this means

The Compose for Wear OS 1.0 release means that the API is stable and has what you need to build production-ready apps. Moving forward, Compose for Wear OS is our recommended approach for building user interfaces for Wear OS apps.

Your feedback has helped shape the development of Compose for Wear OS; our developer community has been with us each step of the way, engaging with us on Slack and providing feedback on the APIs, components, and tooling. As we are working on bringing new features to future versions of Compose for Wear OS, we will continue to welcome developer feedback and suggestions.

We are also excited to share how developers have already adopted Compose in their Wear OS apps and what they like about it.

What developers are saying

Todoist helps people organize, plan and collaborate on projects. They are one of the first companies to completely rebuild their Wear OS app using Compose and redesign all screens and interactions:

“When the new Wear design language and Compose for Wear OS were announced, we were thrilled. It gave us new motivation and opportunity to invest into the platform.”

Todoist application

Relying on Compose for Wear OS has improved both developer and user experience for Todoist:

“Compose for Wear OS helped us tremendously both on the development side and the design side. The guides and documentation made it easy for our product designers to prepare mockups matching the new design language of the platform. And the libraries made it very easy for us to implement these, providing all the necessary widgets and customizations. Swipe to dismiss, TimeText, ScalingLazyList were all components that worked very well out-of-the-box for us, while still allowing us to make a recognizable and distinct app.”

Outdooractive helps people plan routes for hiking, cycling, running, and other outdoor adventures. As wearables are a key aspect of their product strategy, they have been quick to update their offering with an app for the user's wrist.

Outdooractive application

Outdooractive has already embraced Wear OS 3, and by migrating to Compose for Wear OS they aimed for developer-side benefits such as having a modern code base and increased development productivity:

“Huge improvement is how lists are created. Thanks to ScalingLazyColumn it is easier (compared to RecyclerView) to create scrolling screens without wasting resources. Availability of standard components like Chip helps saving time by being able to use pre-fabricated design-/view-components. What would have taken us days now takes us hours.”

The Outdooractive team also highlighted that Compose for Wear OS usage help them to strive for better app quality:

“Improved animations were a nice surprise, allowing smoothly hiding/revealing components by just wrapping components in “AnimatedVisibility” for example, which we used in places where we would normally not have invested any time in implementing animations.”

Another developer we’ve been working with, Period Tracker helps keep track of period cycles, ovulation, and the chance of conception.

Period Tracker application

They have taken advantage of our UI toolkit to significantly improve user interface and quickly develop new features available exclusively on Wear OS:

“Compose for Wear OS provided us with many kits to help us bring our designs to life. For example, we used Chips to design the main buttons for period recording, water drinking, and taking medication, and it also helped us create a unique look for the latest version of Kegel workout.”

Similarly to other developers, Period Tracker noted that Compose for Wear OS helped them to achieve better developer experience and improved collaboration with design and development teams:

“For example, before Chips components were available, we had to use a custom way to load images on buttons which caused a lot of adaptation work. Yes, Compose for Wear OS improved our productivity and made our designers more willing to design a better user experience on wearables.”

Check out the in-depth case studies to learn more about how other developers are using Jetpack Compose.

1.0 release

Let’s look into the key features available with 1.0 release:

Material: The Compose Material catalog for Wear OS already offers more components than are available with View-based layouts. The components follow material styling and also implement material theming, which allows you to customize the design for your brand.
Declarative: Compose for Wear OS leverages Modern Android Development and works seamlessly with other Jetpack libraries. Compose-based UIs in most cases result in less code and accelerate the development process as a whole, read more.
Interoperable: If you have an existing Wear OS app with a large View-based codebase, it's possible to gradually adopt Compose for Wear OS by using the Compose Interoperability APIs rather than having to rewrite the whole codebase.
Handles different watch shapes: Compose for Wear OS extends the foundation of Compose, adding a DSL for all curved elements to make it easy to develop for all Wear OS device shapes: round, square, or rectangular with minimal code.
Performance: Each Compose for Wear OS library ships with its own baseline profiles that are automatically merged and distributed with your app’s APK and are compiled ahead of time on device. In most cases, this achieves app performance for production builds that is on-par with View-based apps. However, it’s important to know how to configure, develop, and test your app’s performance for the best results. Learn more.

Note that using version 1.0 of Compose for Wear OS requires using the version 1.2 of androidx.compose libraries and therefore Kotlin 1.7.0. Read more about Jetpack Compose 1.2 release here.

Tools and libraries

Android Studio

The declarative paradigm shift also alters the development workflow. The Compose tooling available in Android Studio will help you build apps more productively.

Android Studio Dolphin includes a new project template with Compose for Wear OS to help you get started.

The Composable Preview annotation allows you to instantly verify how your app’s layout behaves on different watch shapes and sizes. You can configure the device preview to show different Wear OS device types (round, rectangle, etc):

import androidx.compose.ui.tooling.preview

@Preview(

device = Devices.WEAR_OS_LARGE_ROUND,

showSystemUi = true,

backgroundColor = 0xff000000,

showBackground = true

)

@Composable

fun PreviewCustomComposable() {

CustomComposable(...)

}

Starting with Android Studio Electric Eel, Live Edit supports iterative code development for Wear OS, providing quick feedback as you make changes in the editor and immediately reflecting UI in the Preview or running app on the device.

Horologist is a group of open-source libraries from Google that supplement Wear OS development, which we announced with the beta release of Compose for Wear OS. Horologist has graduated a number of experimental APIs to stable including TimeText fadeAway modifiers, WearNavScaffold, the Date and Time pickers.

Date and Time pickers from Horologist library

Learning Compose

If you are unfamiliar with using Jetpack Compose, we recommend starting with the tutorial. Many of the development principles there also apply to Compose for Wear OS.

To learn more about Compose for Wear OS check out:

Compose for Wear OS codelab for hands-on experience
Documentation for a quick start guide and implementation guidance
Learning pathway for a step-by-step journey
Wear OS samples repository on GitHub.

Now that Compose for Wear OS has reached its first stable release, it’s time to create beautiful apps built for the wrist with Compose!

Join the community

Join the discussion in the Kotlin Slack #compose-wear channel to connect with the team and other developers and share what you’re building.

Provide feedback

Please keep providing us feedback on the issue tracker and let us know your experience!

For more information about building apps for Wear OS, check out the developer site.

googblogs.com

All Google blogs and Press in one site

Tag Archives: Horologist

Compose for Wear OS 1.1 is now stable: check out new features!