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 frequently developed their Put on OS expertise. Within the newest model of the platform, Put on OS 6, they leveraged Compose for Put on OS to deliver Materials 3 Expressive greatest 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 job administration software designed to assist customers arrange, 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 telephone, it is a right away, private companion. The flexibility to look at your wrist for well timed info or shortly seize a job 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 larger.

Todoist on their Put on OS evolution

The Todoist crew has all the time been dedicated to being wherever their customers are, serving to them arrange 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 developed 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 fully reimagine what a job supervisor in your wrist might be. This marked an necessary milestone after they migrated the entire codebase to Jetpack Compose together with a UX refresh, and noticed a stable person base progress fee improve by 50%.

Over the current 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 prevailing ones to get higher – via new UI patterns, dynamic theming, and less complicated 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 crew put it, “On Put on OS, we’re focusing solely on the very important actions. Every display and every faucet ought to be significant and supply worth to the person”.

This concentrate on simplicity allowed Todoist to totally embrace the brand new design language and APIs that make trendy Put on OS growth so compelling, in order that they knew from the beginning that they wished to undertake Materials 3 Expressive:

“Materials 3 Expressive brings quite a lot 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 crew 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 grasp the brand new design language and use related Materials 3 components.

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 parts, and layouts that include built-in assist for expressive movement.

Maybe better of all, Todoist was capable of implement a sublime resolution that didn’t require a lot of sophisticated code, as Jetpack Compose matched properly to design components in Figma equipment. In line with the crew, “That was the most effective half – we didn’t want to resolve any onerous challenges… The APIs work, they usually’re easy and intuitive!”.

Todoist builders have taken benefit of the brand new parts launched within the Materials 3 library. Specifically, a mix of ScreenScaffold, which lays out the construction of a display 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; and TransformingLazyColumn for vertically scrolling lists—altogether creates a coherent person expertise.

@Composable
personal 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(
            house = 4.dp,
            alignment = Alignment.High,
        ),
        horizontalAlignment = Alignment.Begin,
        state = scrollState,
    ) {
       // ...
    }
}

This seamless integration between design and growth prolonged to tiles, the place the library supplies 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 massive followers of, so it felt very pure to make use of it immediately”.

For instance, for the ‘Day Progress’ Tile, Todoist used one of many commonplace layouts that use a Slots-based method:

class DayProgressTileRenderer(
    context: Context,
    personal 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,
        )
    }

// ...

personal enjoyable MaterialScope.mainSlot(...) = graphicDataCard(...)

personal 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 implies no additional work is required for styling.

The protolayout-material3 library supplies numerous parts designed in response to the Materials 3 Expressive specs and person interface suggestions, which the Todoist crew 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 high of the replace, Todoist additionally applied a brand new person authentication expertise with the brand new Credential Supervisor API on Put on OS.

Credential Supervisor supplies a simplified, standardized person 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 simple, liberating us up to focus on our app’s distinctive options, quite than reinventing the wheel…”.

Beforehand, Todoist had applied its personal UI that included supported authentication strategies, comparable to 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 telephone.

After the migration, the Todoist authentication circulation depends on the Credential Supervisor UI, which supplies a single entry level for out there sign-in strategies and accounts, together with passwords, passkeys, and federated identities like “Register with Google.” Customers can now take pleasure in a streamlined expertise with a single-tap sign-in on their watch.

For apps migrating to Credential Supervisor, we suggest conserving a minimum of one backup authentication methodology in case a person faucets “Dismiss.” The Todoist crew 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 have 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.”

Impression 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 severely, authentication is less complicated and quicker with Credential Supervisor”. Rastislav reviews wonderful person suggestions, and the crew is now making ready to make the updates out there to all customers within the coming weeks.

With their strong person 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! Presently we’re exploring new Tiles, but in addition AI options.”

Todoist’s suggestions to Android and Put on OS builders

As an lively member within the ever-growing Put on OS app ecosystem, Todoist was keen to supply some easy recommendation for different builders occupied with Materials 3 Expressive: “Simply comply with the docs and examples. The samples out there for Put on OS are excellent and all the time up-to-date”.

Additionally they suggest embracing Put on OS as an entire: “It’s a mature but enjoyable platform to develop for! Your designers might want to concentrate on the essence of your product, your builders have an incredible testing floor to discover new patterns and APIs, and your customers will respect having quicker and simpler entry to your product.”

Get began with Materials 3 Expressive and Credential Supervisor

With its new options and trendy class, Put on OS 6 with Materials 3 Expressive supplies a smartwatch platform that’s pleasant for customers, and handy for builders.

Study extra concerning the Materials 3 Expressive for Put on OS design system, and get entry to the Materials 3 Expressive parts 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 be taught extra about Credential Supervisor on Put on OS take a look at developer steering and pattern app.