Introducing Material 3 Expressive for Wear OS

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:

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