Posted by Kseniia Shumelchyk – Engineering Supervisor, Android Developer Relations, and Rastislav Vaško – Head of Android at Doist
Since we expanded Android to smartwatches, Todoist has regularly advanced their Put on OS expertise. Within the newest model of the platform, Put on OS 6, they leveraged Compose for Put on OS to carry Materials 3 Expressive finest practices to life, refreshing their app’s and tile’s look within the course of.
Todoist and the Put on OS alternative
Todoist is a well-liked activity administration software designed to assist customers manage, prioritize, and full their duties throughout their private {and professional} lives the second they arrive to thoughts. Its core philosophy embraces a clear, easy interface that gives a sturdy set of options, making it accessible for informal customers whereas nonetheless being efficient for energy customers and groups.
Right here, Put on OS comes into body – a smartwatch is not only a smaller cellphone, it is a right away, private companion. The flexibility to look at your wrist for well timed info or shortly seize a activity is a uniquely highly effective expertise. With the revitalization of Put on OS, pushed by a contemporary toolkit and a unified platform, the chance to create these pleasant experiences has by no means been higher.
Todoist on their Put on OS evolution
The Todoist workforce has all the time been dedicated to being wherever their customers are, serving to them manage their work and lives with minimal friction.
“We’ve had a Put on OS app ever since Android Put on 1.0 got here out in 2014! Since that point, our expertise on Put on OS has advanced to turn into an ideal platform for fast interactions and straightforward knowledge entry,” mentioned Rastislav Vaško, head of Android at Doist.
When Put on OS started its new chapter a number of years in the past, Todoist noticed the prospect to do extra than simply preserve their current app, and as a substitute utterly reimagine what a activity supervisor in your wrist might be. This marked an vital milestone once they migrated the entire codebase to Jetpack Compose together with a UX refresh, and noticed a strong consumer base progress fee enhance by 50%.
Over the latest months, since Put on OS 6 Developer Preview got here out, Todoist builders have been engaged on each visible and under-the-hood enhancements of the Put on OS expertise, particularly:
“This time we didn’t add new experiences, however we wished the present ones to get higher – via new UI patterns, dynamic theming, and easier authentication,” Rastislav mentioned.
Implementing Materials 3 Expressive redesign
On wearables, a highly-glanceable type issue, builders must make each faucet depend, and Todoist’s design philosophy is constructed on this precept. Because the workforce put it, “On Put on OS, we’re focusing solely on the very important actions. Every display screen and every faucet must be significant and supply worth to the consumer”.
This deal with simplicity allowed Todoist to completely embrace the brand new design language and APIs that make fashionable Put on OS improvement so compelling, so that they knew from the beginning that they wished to undertake Materials 3 Expressive:
“Materials 3 Expressive brings plenty of fluid interactions and delight to Put on OS, and we wished to leverage these new patterns,” notes Rastislav. “It is greater than only a contemporary coat of paint; it’s a design system constructed for the trendy wearable expertise”.
As a primary step, Todoist design workforce has used Put on Materials 3 Expressive Figma design kits and guiding ideas to craft an up to date UX for Todoist app and tiles that allowed them to know the brand new design language and use related Materials 3 parts.
Implementing the brand new design language was made considerably simpler by the trendy developer toolkit, because the Put on Compose Materials 3 and Put on Protolayout Materials 3 libraries present up to date and prolonged coloration schemes, typography, and shapes, in addition to a full set of UI elements, and layouts that include built-in help for expressive movement.
Maybe better of all, Todoist was capable of implement a chic resolution that didn’t require a lot of sophisticated code, as Jetpack Compose matched properly to design parts in Figma equipment. In accordance with the workforce, “That was one of the best half – we didn’t want to resolve any exhausting challenges… The APIs work, and so they’re easy and intuitive!”.
Todoist builders have taken benefit of the brand new elements launched within the Materials 3 library. Particularly, a mixture of ScreenScaffold, which lays out the construction of a display screen and coordinates transitions of the scroll indicator and time textual content label; EdgeButton, which has a particular form designed for the underside of the display screen; and TransformingLazyColumn for vertically scrolling lists—altogether creates a coherent consumer expertise.
@Composable non-public enjoyable CreateItemLayout( state: CreateItemViewModel.Parsed, // ... scrollState: TransformingLazyColumnState = rememberTransformingLazyColumnState(), ) = ScreenScaffold( modifier = Modifier.background(MaterialTheme.colorScheme.background), scrollState = scrollState, contentPadding = rememberResponsiveColumnPadding( first = ColumnItemType.Button, final = ColumnItemType.EdgeButtonPadding, ), edgeButton = { EdgeButton( textual content = stringResource(id = R.string.action_home_create_item), colours = TodoistButtonDefaults.primaryButtonColors(), onClick = onSubmitClick, enabled = state.isReadyToSubmit, ) }, ) { contentPadding -> val transformationSpec = rememberTransformationSpec() TransformingLazyColumn( modifier = modifier.fillMaxSize(), contentPadding = contentPadding, verticalArrangement = Association.spacedBy( area = 4.dp, alignment = Alignment.High, ), horizontalAlignment = Alignment.Begin, state = scrollState, ) { // ... } }
This seamless integration between design and improvement prolonged to tiles, the place the library offers a composable-like, declarative method to constructing tiles, which made integration really feel like a pure extension of the principle app: “Technically, the brand new Tiles API resembles Compose, which we’re huge followers of, so it felt very pure to make use of it immediately”.
For example, for the ‘Day Progress’ Tile, Todoist used one of many commonplace layouts that use a Slots-based method:
class DayProgressTileRenderer( context: Context, non-public val onClickAction: Motion, ) : SingleTileLayoutRenderer<DayProgressTileState, Unit>(context) { override enjoyable 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, ) } // ... non-public enjoyable MaterialScope.mainSlot(...) = graphicDataCard(...) non-public enjoyable MaterialScope.labelForBottomSlot(context: Context) = textual content( textual content = context.getString(R.string.tile_day_progress_goal).layoutString, typography = Typography.TITLE_SMALL, )
The slots lengthen MaterialScope routinely, which suggests no further work is required for styling.
The protolayout-material3 library offers a lot of elements designed based on the Materials 3 Expressive specs and consumer interface suggestions, which the Todoist workforce has taken benefit of. An instance is the graphicDataCard, which Todoist used for the principle slot on this tile.
Todoist’s Tile additionally helps dynamic coloration theming, which, implementation-wise, requires no effort from builders because the top-level materialScope operate has the allowDynamicTheme flag set to true by default.
Streamlining authentication with Credential Supervisor
To place the cherry on prime of the replace, Todoist additionally applied a brand new consumer authentication expertise with the brand new Credential Supervisor API on Put on OS.
Credential Supervisor offers a simplified, standardized consumer sign-in expertise that may be applied with minimal effort by reusing the identical code because the cell model.
Todoist particularly appreciated the standardized UI: “…the [Credential Manager] UI is managed by the [Wear OS] library, which makes the work straightforward, liberating us up to focus on our app’s distinctive options, somewhat than reinventing the wheel…”.
Beforehand, Todoist had applied its personal UI that integrated supported authentication strategies, resembling reusing an auth token from an current cell sign-in, legacy Google Signal-In, and OAuth 2.0, which allowed customers to finish their sign-in on a related cellphone.
After the migration, the Todoist authentication move depends on the Credential Supervisor UI, which offers a single entry level for accessible sign-in strategies and accounts, together with passwords, passkeys, and federated identities like “Check in with Google.” Customers can now get pleasure from a streamlined expertise with a single-tap sign-in on their watch.
For apps migrating to Credential Supervisor, we suggest conserving at the very least one backup authentication technique in case a consumer faucets “Dismiss.” The Todoist workforce reused their earlier choices: OAuth 2.0 and knowledge layer token sharing.
And since they already had a cell integration, Todoist was capable of reuse their cell code: “We had been already utilizing Credential Supervisor in Todoist for Android, so… it was a no brainer to undertake it. We’re offering the identical seamless expertise in each apps whereas simplifying and reusing code.”
Affect of the transformation
With their revamped expertise accomplished, Todoist was thrilled with the outcomes: “the Edge Hugging Button simply feels pleasant to make use of! However significantly, authentication is less complicated and sooner with Credential Supervisor”. Rastislav experiences wonderful consumer suggestions, and the workforce is now making ready to make the updates accessible to all customers within the coming weeks.
With their strong consumer base on Put on OS, Todoist expects to proceed rising as they make investments additional and see a robust enterprise case to proceed their dedication to wearables.
Rastislav additionally sums it up properly with the ultimate future-looking quote: “We’re invested in Put on! At present we’re exploring new Tiles, but in addition AI options.”
Todoist’s suggestions to Android and Put on OS builders
As an energetic member within the ever-growing Put on OS app ecosystem, Todoist was keen to offer some easy recommendation for different builders focused on Materials 3 Expressive: “Simply observe the docs and examples. The samples accessible for Put on OS are very good and all the time up-to-date”.
Additionally they suggest embracing Put on OS as a complete: “It’s a mature but enjoyable platform to develop for! Your designers might want to deal with the essence of your product, your builders have an amazing testing floor to discover new patterns and APIs, and your customers will respect having sooner and simpler entry to your product.”
Get began with Materials 3 Expressive and Credential Supervisor
With its new options and fashionable class, Put on OS 6 with Materials 3 Expressive offers a smartwatch platform that’s pleasant for customers, and handy for builders.
Be taught extra in regards to the Materials 3 Expressive for Put on OS design system, and get entry to the Materials 3 Expressive elements and layouts utilizing newest Put on Compose Materials 3 and Put on Protolayout Materials 3 Jetpack libraries.
For much more assets for builders go to:
To study extra about Credential Supervisor on Put on OS try developer steering and pattern app.