Posted by Kseniia Shumelchyk – Engineering Manager, Android Developer Relations, and Rastislav Vaško – Head of Android at Doist
Since we expanded Android to smartwatches, Todoist has continually evolved their Wear OS experience. In the latest version of the platform, Wear OS 6, they leveraged Compose for Wear OS to bring Material 3 Expressive best practices to life, refreshing their app’s and tile’s appearance in the process.
Todoist and the Wear OS opportunity
Todoist is a popular task management application designed to help users organize, prioritize, and complete their tasks across their personal and professional lives the moment they come to mind. Its core philosophy embraces a clean, simple interface that provides a robust set of features, making it accessible for casual users while still being effective for power users and teams.
Here, Wear OS comes into frame – a smartwatch isn’t just a smaller phone, it’s an immediate, personal companion. The ability to glance at your wrist for timely information or quickly capture a task is a uniquely powerful experience. With the revitalization of Wear OS, driven by a modern toolkit and a unified platform, the opportunity to create these delightful experiences has never been greater.
Todoist on their Wear OS evolution
The Todoist team has always been committed to being wherever their users are, helping them organize their work and lives with minimal friction.
“We’ve had a Wear OS app ever since Android Wear 1.0 came out in 2014! Since that time, our experience on Wear OS has evolved to become a perfect platform for quick interactions and easy data access,” said Rastislav Vaško, head of Android at Doist.
When Wear OS began its new chapter a few years ago, Todoist saw the chance to do more than just maintain their existing app, and instead completely reimagine what a task manager on your wrist could be. This marked an important milestone when they migrated the whole codebase to Jetpack Compose along with a UX refresh, and saw a solid user base growth rate increase by 50%.
Over the recent months, since Wear OS 6 Developer Preview came out, Todoist developers have been working on both visual and under-the-hood improvements of the Wear OS experience, specifically:
- Material 3 Expressive redesign and Wear OS 6 support, bringing an even more fluid and modern look and feel to the app and tiles.
- Credential Manager migration, enabling a seamless authentication experience for new and existing users.
“This time we didn’t add new experiences, but we wanted the existing ones to get better – through new UI patterns, dynamic theming, and simpler authentication,” Rastislav said.
Implementing Material 3 Expressive redesign
On wearables, a highly-glanceable form factor, developers need to make every tap count, and Todoist’s design philosophy is built on this principle. As the team put it, “On Wear OS, we’re focusing only on the very essential actions. Each screen and each tap should be meaningful and provide value to the user”.
This focus on simplicity allowed Todoist to fully embrace the new design language and APIs that make modern Wear OS development so compelling, so they knew from the start that they wanted to adopt Material 3 Expressive:
“Material 3 Expressive brings a lot of fluid interactions and delight to Wear OS, and we wanted to leverage these new patterns,” notes Rastislav. “It’s more than just a fresh coat of paint; it’s a design system built for the modern wearable experience”.
As a first step, Todoist design team has used Wear Material 3 Expressive Figma design kits and guiding principles to craft an updated UX for Todoist app and tiles that allowed them to understand the new design language and use relevant Material 3 elements.
Implementing the new design language was made significantly easier by the modern developer toolkit, as the Wear Compose Material 3 and Wear Protolayout Material 3 libraries provide updated and extended color schemes, typography, and shapes, as well as a full set of UI components, and layouts that come with built-in support for expressive motion.
Perhaps best of all, Todoist was able to implement an elegant solution that didn’t require lots of complicated code, as Jetpack Compose matched nicely to design elements in Figma kit. According to the team, “That was the best part – we didn’t need to solve any hard challenges… The APIs work, and they’re simple and intuitive!”.
Todoist developers have taken advantage of the new components introduced in the Material 3 library. In particular, a combination of ScreenScaffold, which lays out the structure of a screen and coordinates transitions of the scroll indicator and time text label; EdgeButton, which has a special shape designed for the bottom of the screen; and TransformingLazyColumn for vertically scrolling lists—altogether creates a coherent user experience.
@Composable private fun CreateItemLayout( state: CreateItemViewModel.Parsed, // ... scrollState: TransformingLazyColumnState = rememberTransformingLazyColumnState(), ) = ScreenScaffold( modifier = Modifier.background(MaterialTheme.colorScheme.background), scrollState = scrollState, contentPadding = rememberResponsiveColumnPadding( first = ColumnItemType.Button, last = ColumnItemType.EdgeButtonPadding, ), edgeButton = { EdgeButton( text = stringResource(id = R.string.action_home_create_item), colors = TodoistButtonDefaults.primaryButtonColors(), onClick = onSubmitClick, enabled = state.isReadyToSubmit, ) }, ) { contentPadding -> val transformationSpec = rememberTransformationSpec() TransformingLazyColumn( modifier = modifier.fillMaxSize(), contentPadding = contentPadding, verticalArrangement = Arrangement.spacedBy( space = 4.dp, alignment = Alignment.Top, ), horizontalAlignment = Alignment.Start, state = scrollState, ) { // ... } }
This seamless integration between design and development extended to tiles, where the library provides a composable-like, declarative approach to building tiles, which made integration feel like a natural extension of the main app: “Technically, the new Tiles API resembles Compose, which we’re big fans of, so it felt very natural to use it right away”.
As an example, for the ‘Day Progress’ Tile, Todoist used one of the standard layouts that use a Slots-based approach:
class DayProgressTileRenderer( context: Context, private val onClickAction: Action, ) : SingleTileLayoutRenderer<DayProgressTileState, Unit>(context) { override fun renderTile( state: DayProgressTileState, deviceParameters: DeviceParametersBuilders.DeviceParameters, ) = materialScope( context = context, deviceConfiguration = deviceParameters, defaultColorScheme = state.theme.toTileColorScheme(context), ) { primaryLayout( titleSlot = { titleSlot(context) }, mainSlot = { mainSlot(context, state, onClickAction) }, labelForBottomSlot = { labelForBottomSlot(context) }, bottomSlot = { bottomSlot(context, state) }, margins = PrimaryLayoutMargins.MIN_PRIMARY_LAYOUT_MARGIN, ) } // ... private fun MaterialScope.mainSlot(...) = graphicDataCard(...) private fun MaterialScope.labelForBottomSlot(context: Context) = text( text = context.getString(R.string.tile_day_progress_goal).layoutString, typography = Typography.TITLE_SMALL, )
The slots extend MaterialScope automatically, which means no extra work is needed for styling.
The protolayout-material3 library provides a large number of components designed according to the Material 3 Expressive specifications and user interface recommendations, which the Todoist team has taken advantage of. An example is the graphicDataCard, which Todoist used for the main slot on this tile.
Todoist’s Tile also supports dynamic color theming, which, implementation-wise, requires no effort from developers as the top-level materialScope function has the allowDynamicTheme flag set to true by default.
Streamlining authentication with Credential Manager
To put the cherry on top of the update, Todoist also implemented a new user authentication experience with the new Credential Manager API on Wear OS.
Credential Manager provides a simplified, standardized user sign-in experience that can be implemented with minimal effort by reusing the same code as the mobile version.
Todoist especially appreciated the standardized UI: “…the [Credential Manager] UI is managed by the [Wear OS] library, which makes the work easy, freeing us up to concentrate on our app’s unique features, rather than reinventing the wheel…”.
Previously, Todoist had implemented its own UI that incorporated supported authentication methods, such as reusing an auth token from an existing mobile sign-in, legacy Google Sign-In, and OAuth 2.0, which allowed users to complete their sign-in on a connected phone.
After the migration, the Todoist authentication flow relies on the Credential Manager UI, which provides a single entry point for available sign-in methods and accounts, including passwords, passkeys, and federated identities like “Sign in with Google.” Users can now enjoy a streamlined experience with a single-tap sign-in on their watch.
For apps migrating to Credential Manager, we recommend keeping at least one backup authentication method in case a user taps “Dismiss.” The Todoist team reused their previous options: OAuth 2.0 and data layer token sharing.
And since they already had a mobile integration, Todoist was able to reuse their mobile code: “We were already using Credential Manager in Todoist for Android, so… it was a no-brainer to adopt it. We’re providing the same seamless experience in both apps while simplifying and reusing code.”
Impact of the transformation
With their revamped experience completed, Todoist was thrilled with the results: “the Edge Hugging Button just feels delightful to use! But seriously, authentication is simpler and faster with Credential Manager”. Rastislav reports excellent user feedback, and the team is now preparing to make the updates available to all users in the coming weeks.
With their robust user base on Wear OS, Todoist expects to continue growing as they invest further and see a strong business case to continue their commitment to wearables.
Rastislav also sums it up well with the final future-looking quote: “We’re invested in Wear! Currently we’re exploring new Tiles, but also AI features.”
Todoist’s recommendations to Android and Wear OS developers
As an active member in the ever-growing Wear OS app ecosystem, Todoist was eager to provide some simple advice for other developers interested in Material 3 Expressive: “Just follow the docs and examples. The samples available for Wear OS are superb and always up-to-date”.
They also recommend embracing Wear OS as a whole: “It’s a mature yet fun platform to develop for! Your designers will need to focus on the essence of your product, your developers have a great testing ground to explore new patterns and APIs, and your users will appreciate having faster and easier access to your product.”
Get started with Material 3 Expressive and Credential Manager
With its new features and modern elegance, Wear OS 6 with Material 3 Expressive provides a smartwatch platform that is delightful for users, and convenient for developers.
Learn more about the Material 3 Expressive for Wear OS design system, and get access to the Material 3 Expressive components and layouts using latest Wear Compose Material 3 and Wear Protolayout Material 3 Jetpack libraries.
For even more resources for developers visit:
- Wear OS samples on Github including dedicated samples for Compose and Tiles
- Migration developer guidance that covers apps and tiles
- Create delightful Wear OS widgets using sample tile layouts in Material 3 Expressive
- Codelabs for Compose on Wear OS and Tiles on Wear OS for hands-on start
To learn more about Credential Manager on Wear OS check out developer guidance and sample app.
