Designing with personality: Introducing Material 3 Expressive for Wear OS

Posted by Chiara Chiappini – Android Developer Relations Engineer, and Kevin Hufnagle - Android Technical Writer

This post is part of Wear OS Spotlight Week. Today, we're focusing on creating modern, premium designs using the Material 3 Expressive design system.

When crafting the user interface for your Wear OS app or tile, consider how your experience expresses your brand while respecting the performance guidelines for watches, particularly battery use. With the new Material 3 Expressive design system, you can build performant UIs that truly shine on a wearable device.

A gallery of Material 3 Expressive experiences on Wear OS

This blog post walks you through the key principles of this new design system and how you can implement them to create more engaging and intuitive user experiences.

What’s new in Material 3 Expressive?

As mentioned in our announcement at I/O earlier this year and our unveiling of Google Pixel Watch 4 last week, Material 3 Expressive introduces several fundamental improvements from previous Wear OS design guidance, which aim to give your apps and tiles more personality and help users feel confident that they’re successfully taking quick actions on a round screen.

The key design principles include the following:

• Embrace the round form factor: Use the full screen with components like the edge-hugging button to complement the watch's form factor. This makes the UI feel well-suited for a user's wrist.
• Apply the proper screen layout on each surface: Take advantage of the new layouts and components—such as the 3-slot tile PrimaryLayout and the TransformingLazyColumn – to create more consistent, glanceable, and fluid user experiences for tiles and apps.
• Elevate your experience: The dynamic color system provides a richer palette for more vibrant themes in apps. Variable fonts allow for dynamic, customizable typography.
• Show off expressive animations: Light up your Wear OS experience with meaningful movement, such as spring animations and shape morphing.

Embrace the round form factor

Material 3 Expressive for Wear OS differentiates itself from systems designed for rectangular screens, offering a framework of components that are designed specifically for round screens, using the entire circular canvas to its full potential.


The edge-hugging button’s animated entrance and shape emphasizes the round form factor

One of the most noticeable examples of this is the edge-hugging button. It features a curved bottom edge that perfectly complements the round display. It’s a small but significant detail that helps make Material 3 Expressive feel right at home on your users’ wrists.

Apply the proper screen layout on each surface

Apps

For apps that let users scroll through content, Material 3 Expressive introduces the TransformingLazyColumn component. It provides built-in support for expressive and fluid scrolling animations that follow the side edges of the display. We’ve also added a new ScrollIndicator that provides a clear visual cue of the user’s position within a list. (This appears automatically when you use ScreenScaffold.) This, combined with the fluid animations of the TransformingLazyColumn, creates a more intuitive and engaging scrolling experience.


When using a TransformingLazyColumn, elements appear to get smaller as they get close to the top and bottom edge of the screen

For apps that don’t require scrolling, such as media players or confirmation dialogs, Material 3 Expressive provides templates that are optimized for glanceability and focus. These layouts rely on breakpoints and pagination to present a single task or set of controls to the user, minimizing distractions.

Tiles

The Material 3 Expressive design system also lets designers and developers create tiles that are both functional and visually engaging:


Tiles offer at-a-glance information and support quick actions to indicate progress on a task, such as drinking more water

Tiles can show a static message about a recent update, invite users to get started, and show progress of an ongoing activity related to fitness, media, and more.

The new 3-slot tile layout is designed to work for each of these use cases, as well as across a range of screen sizes, to provide a clear and consistent structure for your tile’s content.

Elevate your experience

Give your app or tile a signature look using extended color palettes and custom typography.

Color

The updated color system in Material 3 Expressive supports more colors—such as tertiary colors—to let you better reflect your brand’s personality and create a more immersive user experience. Use this color system to create themes that perfectly capture the mood of your brand, whether that’s a calming meditation app, the high-energy vibe of a fitness tracker, or something in between.

With Material 3 Expressive, apps and tiles can either follow the dynamic system color or stick to the brand colors. We especially recommend following the dynamic system colors in your tiles, for higher cohesion with other tiles. You can embrace dynamic colors in your app as well, for instance exposing settings to the user.


Dynamic color theme derived from the user-selected watch face (left), applied to a tile (right)

Typography

Typography is another key element of expressive design. Material 3 Expressive moves beyond static font weights and styles and embraces the versatility of variable fonts.

A single font contains adjustable axes, including weight and width. With Material 3 Expressive, you can tap into these customized looks to create dynamic and delightful typographic experiences.


A font that uses an adjusted weight. If desired, you can also use a different width to s t r e t c h the text.

Show off expressive animations

A foundational pillar of Material 3 Expressive’s animation capabilities is the concept of fluid motion, made possible primarily through shape morphing.


When the “9” button is pressed, the “8” button moves out of the way to accommodate the expanded size of the “9” button.

Components no longer have to be rigid – they can now dynamically change their shape in response to user input! Buttons, in particular, can transform shape and size to achieve eye-catching springy animation effects and provide more visual contrast between states such as “play” and “pause.” This not only makes the UI more visually interesting but also helps in guiding the user’s attention and providing clear feedback.

An experience that’s ready for prime time!

By adopting the Material 3 Expressive design system, you can create Wear OS apps and tiles that feel more dynamic, personal, and intuitive. By applying principles like rounded components, screen layouts, richer color palettes, and spring animations, you can build experiences that feel perfectly designed for use on a user’s wrist.

To get you inspired, we’ve included some examples from some of Google’s apps below:


Edge-hugging button for an incoming call using the Phone app (left); toggle buttons in the Alarms app (right)

At-a-glance actions within the tile for the Google Maps app (left); progress of ongoing audio playback in the YouTube Music app (right)


Get started with Material 3 Expressive for Wear OS

To learn more, explore the following resources:

• Recently-updated design documentation
• Design kits for apps and tiles in Figma
• Codelabs for Compose on Wear OS and Tiles on Wear OS
• Best practices for migrating app UI to Material 3 Expressive and migrating tiles to Material 3 Expressive
• Sample apps on GitHub

We can’t wait to see the designs that you create and share with the Wear OS community!