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.

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 Media Controls (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!

Posted by Michael Stillwell – Developer Relations Engineer

This post is part of Wear OS Spotlight Week. Today, we’re focusing on creating engaging Wear OS tiles with new resources and updated design guidance.

Wear OS is all about providing users with the right information at the right time. While a full app is great for immersive experiences, sometimes users just need a quick glance at information or a simple way to take action.

Tiles are fast, predictable surfaces that users can access with a simple swipe from their watch face. They are designed for quick, frequent tasks like checking the weather, starting a timer, or tracking fitness goals.

To streamline your workflow from concept to launch, we’re pleased to announce a collection of resources to help you build beautiful and effective tiles using the Material 3 Expressive design system.

• For designers, see the design guidance for tiles, tile layouts and the Figma design kit. These resources help you craft expressive, modern tiles that feel like a cohesive and premium part of the Wear OS experience.
• For developers, see the official documentation, as well as the code sample on GitHub — now with a ready-to-use repository of sample layout implementations updated for Material 3 Expressive.

These layouts are an evolution of a previous version based on Material 2.5, now updated to Material 3 Expressive to create a modern, premium feel that makes your tile a more cohesive part of the Wear OS.

We hope these resources serve as inspiration and a practical starting point, whether you’re new to Wear OS development or looking to add a tile to your existing app.

Get started with sample layouts

Tiles are built declaratively using the ProtoLayout library. Material 3 Expressive’s Primary Layout is organized around a slot-based architecture. Running from top to bottom, these slots are:

• An optional titleSlot for a header.
• A mandatory mainSlot for your core content.
• An optional bottomSlot for supplemental actions.

Your app implements a TileService, which returns a layout when requested by the system. This layout is then used to build and render the tile. Learn how to get started with tiles.

As an example, here’s the “Goal” layout for visualizing step count. The titleSlot contains the “Steps” text, the mainSlot holds the graphic data card with a progress ring and step data, and the bottomSlot features the “Track” edge-hugging button. (The icon that appears at the top of the tile is specified in your app’s manifest is and drawn by the system.)

The code for this layout is structured logically around these slots:

fun layout(
    context: Context,
    deviceParameters: DeviceParameters,
    steps: Int,
    goal: Int
) =
    materialScope(
        context = context,
        deviceConfiguration = deviceParameters
    ) {
        val stepsString = NumberFormat.getNumberInstance().format(steps)
        val goalString = NumberFormat.getNumberInstance().format(goal)
        primaryLayout(
            titleSlot = { text("Steps".layoutString) },
            // Adjust margins to create more space when using fully rounded corners
            margins = PrimaryLayoutMargins.MIN_PRIMARY_LAYOUT_MARGIN,
            mainSlot = {
                graphicDataCard(
                    onClick = clickable(),
                    height = expand(),
                    colors = filledTonalCardColors(),
                    title = { text(stepsString.layoutString) },
                    content = { text("of $goalString".layoutString) },
                    horizontalAlignment = LayoutElementBuilders.HORIZONTAL_ALIGN_END,
                    graphic = {
                        constructGraphic(
                            mainContent = {
                                circularProgressIndicator(
                                    staticProgress = 1F * steps / goal,
                                    // On supported devices, animate the arc
                                    dynamicProgress =
                                    DynamicFloat.onCondition(
                                        PlatformEventSources.isLayoutVisible()
                                    )
                                        .use(1F * data.steps / data.goal)
                                        .elseUse(0F)
                                        .animate(
                                            CircularProgressIndicatorDefaults
                                                .recommendedAnimationSpec
                                        ),
                                    startAngleDegrees = 200F,
                                    endAngleDegrees = 520F,
                                )
                            },
                            iconContent = { icon(ICON_ID) },
                        )
                    },
                )
            },
            bottomSlot = {
                textEdgeButton(onClick = clickable()) { text("Track".layoutString) }
            },
        )
    }

With this simple function, you get a great-looking, responsive tile. The ProtoLayout Material3 library handles the heavy lifting, such as setting margins to avoid clipping on round screens and ensuring components adapt smoothly to different display sizes.

Create custom tile layouts

While our layouts cover many common use cases, you’ll sometimes need a unique layout. The Material 3 Expressive components provide a flexible foundation for building custom designs.

To translate designs into code, start with the most visually similar layout and modify it. The following sections explain how to modify an existing layout slot by slot.

Customize the title and bottom slots

The titleSlot is often a text() element. To verify that the tap targets of the other elements are interactive, you may wish to hide the title slot on smaller devices. Learn how to develop tiles for different screen sizes.

primaryLayout(
    titleSlot =
        if (isLargeScreen()) {
            { text("$tasksLeft mindful tasks left".layoutString) }
        } else {
            null
        },
    // ...
)

The bottomSlot provides users with a primary action, typically an EdgeButton. You can use a textEdgeButton() for a descriptive action. Alternatively, you can use an icon such as + by using an iconEdgeButton.

Using an icon is a two-step process:

1. Define the iconEdgeButton in your layout, giving your icon a unique resource ID string:

primaryLayout(
    // ...
    bottomSlot = {
        iconEdgeButton(
            onClick = clickable(),
            modifier = LayoutModifier.contentDescription("Add event"),
            iconContent = { icon("icon_plus_id") }
        )
    }
)

2. Provide the actual drawable resource in onTileResourcesRequest():

override fun onTileResourcesRequest(
    requestParams: RequestBuilders.ResourcesRequest
) =
    Futures.immediateFuture(
        ResourceBuilders.Resources.Builder()
            .setVersion(requestParams.version)
            .addIdToImageMapping(
                "plus_icon_id",
                ResourceBuilders.ImageResource.Builder()
                    .setAndroidResourceByResId(
                        ResourceBuilders.AndroidImageResourceByResId.Builder()
                            .setResourceId(R.drawable.outline_add_2_24)
                            .build()
                    )
                    .build()
            )
            .build()
    )

See Alarm.kt for a full code sample demonstrating this approach.

Customize the main slot

The mainSlot is where the core content of your tile lives and where the most significant customization occurs. Let’s walk through a few examples.

Case study: Workout tile

This tile needs to adapt its layout for different screen sizes. For the smaller layout, three simple iconButton components are a perfect fit. In the larger layout, the central button displays more data (duration, unit, and an icon). Even though it’s semantically still a button, in this case the iconDataCard element is a better fit. It’s specifically designed to display multiple pieces of data, and we can easily adjust its width and height.

iconDataCard(
    title = { text("30".layoutString, typography = DISPLAY_MEDIUM) },
    content = { text("Mins".layoutString, typography = TITLE_MEDIUM) },
    secondaryIcon = { icon("icon_run_id") },
    shape = shapes.large, // adjust the corner shape
    onClick = clickable(),
    // make element more prominent on larger screens
    width = if (isLargeScreen()) weight(1.5f) else expand(),
    height = expand(),
    // ...
)

See Workout.kt for the full source code.

Case study: Skiing stats tile

The design for this tile is built around a pill-shaped element that displays three lines of text, each with unique typography. A textDataCard() is perfect for this, offering slots for a “title” (the metric), “content” (the value), and “secondaryText” (the units). These slots come with default styling that you can override to match your design precisely.

fun MaterialScope.statTextButton(stat: Stat) =
    textDataCard(
        onClick = clickable(),
        width = expand(),
        height = expand(),
        shape = shapes.extraLarge,
        title = {
            text(
                stat.value.layoutString,
                typography =
                    if (isLargeScreen()) {
                        Typography.NUMERAL_SMALL
                    } else {
                        Typography.NUMERAL_EXTRA_SMALL
                    }
            )
        },
        content = {
            text(
                stat.unit.layoutString,
                typography =
                    if (isLargeScreen()) {
                        Typography.TITLE_MEDIUM
                    } else {
                        Typography.TITLE_SMALL
                    }
            )
        },
        secondaryText = {
            text(
                stat.label.layoutString,
                typography =
                    if (isLargeScreen()) {
                        Typography.TITLE_MEDIUM
                    } else {
                        Typography.TITLE_SMALL
                    }
            )
        }
    )

Notice how the typography constants are varied according to the screen size (TITLE_MEDIUM vs. TITLE_SMALL, for example). Given the variety of screen and font sizes on Wear OS, this is a key technique to keep text legible. Instead of trying to manually tweak your layout for every possible combination, focus on adjusting the typography by using different font size constants.

For a consistent look, try to stick to the same “category” of typography constant, such as BODY_MEDIUM on small screens and BODY_LARGE on larger ones. Avoid jumping between different categories, like from LABEL_LARGE to DISPLAY_SMALL, as these constants can vary in more than just size, affecting font weight and other visual properties.

See Ski.kt for the full source code.

Another approach to adapting a layout to different screen sizes is simply to add or remove elements depending on the display size, as demonstrated by the Weather.kt layout. While both versions display the same current conditions, the larger version adds more information to the forecast.

Customize colors

You might notice that the templates don’t specify a color scheme, yet they adapt to the user’s chosen theme on Wear OS 6. This is due to dynamic theming, a system feature that automatically generates a color scheme by extracting seed colors from sources like the user’s watch face. For tiles, this is the default behavior.

As a developer, this gives you two main options for your tile’s appearance:

Option 1 (recommended): Follow dynamic color theming. A dynamic theme is used by default. In this case, you should provide a defaultColorScheme to be used as a fallback if the user disables dynamic theming or if the device doesn’t support it. This approach creates a consistent and cohesive feel, allowing your tile to integrate seamlessly with the system.

val myColorScheme =
    ColorScheme(
        primary = ...
        onPrimary = ...
        // 27 more
    )

materialScope(
  defaultColorScheme = myColorScheme
) {
  // If the user selects "no theme" in settings, myColorScheme is used.
  // Otherwise, the system-provided theme is used.
}

Option 2: Use your brand colors. To ensure brand consistency, you can force your tile to always use your custom color scheme by setting allowDynamicTheme to false. In this case, the same colors will always be used, irrespective of the user’s selected color theme.

materialScope(
  allowDynamicTheme = false,
  defaultColorScheme = myColorScheme
) {
  // myColorScheme is *always* used.
}

See Theming for more information on the theming system.

Develop and debug

To speed up your development cycle, Wear OS provides several tools to help you debug and test your tiles directly in Android Studio and on the command line.

• Preview tiles in Android Studio. This is especially helpful when developing layouts for different screen sizes.
• Manipulate tiles with adb. Useful for QA tasks, including screenshot testing.

Dive in and start building

These resources are designed to make building high-quality Wear OS tiles easier and more inspiring. We can’t wait to see what you create with them.

Explore the layouts and get started today by checking out the Figma design kit or the code on GitHub.

Posted by Fahd Imtiaz – Senior Product Manager and Kseniia Shumelchyk – Engineering Manager, Developer Relations

This week at Made by Google, we introduced the new suite of Pixel devices, including the Pixel 10 Pro Fold and Pixel Watch 4. These devices are more than just an evolution in hardware; they are built to showcase the latest updates in Android, creating new possibilities for you to build experiences that are more helpful, personal, and adaptive than before.

Let’s explore what this moment means for your apps and how you can start building today.

Give your app more room to shine on foldable and large screens

The new Pixel 10 Pro Fold represents the next step in mobile computing, inviting you to think beyond a single screen. With a stunning 8-inch inner display that unfolds to create an immersive, large screen experience and a fully-capable 6.4-inch outer display, your apps have a powerful and flexible stage to shine. Its advanced durability and all-day battery life make this form factor ready for everyday use, raising user expectations for premium app experiences.

Building a truly adaptive app is how you unlock the full potential of this hardware. On the new Pixel 10 Pro Fold, users will multitask with enhanced Split Screen and drag-and-drop, or use hands-free tabletop modes for entertainment. Your app must support resizability and both portrait and landscape orientations to deliver the seamless, dynamic layouts these new experiences demand. Following the best practices on adaptive development is the key to providing an optimal experience on every screen and in every posture.

To help you build these adaptive experiences, we offer a suite of powerful tools. You can use existing tools like Jetpack Window Manager and the Compose Adaptive Layouts Libraries today. And coming soon to beta, Compose Adaptive Layout Library 1.2 will introduce new adaption strategies like Levitate and Reflow, plus support for Large and Extra Large width Window Class Sizes.

The goal is to not be confined to a single screen, but build one app that works great everywhere, from phones and foldables to tablets and other large screens. This is your opportunity to expand your app’s reach and deliver the dynamic experiences users now expect. With the tools at your fingertips, you can start building for every screen today. Learn how you can unlock your app’s full potential with adaptive development at developer.android.com/adaptive-apps.

Bring your most expressive apps to the wrist

The new Pixel Watch 4 is here, and it’s the first smartwatch built to showcase the full power of Material 3 Expressive on Wear OS 6. This is where the vision for the platform truly comes to life, allowing you to build stunning, modern apps and tiles without compromising on performance. With this release, you no longer have to choose between beautiful animations and battery life; with Wear OS 6, you can build experiences that are beautiful, helpful, and powerful, all at once.

To get that modern look, you can use the new Material 3 Expressive libraries for Compose on Wear OS, which provide powerful components like the TransformingLazyColumnuid lists and the EdgeButton to create UIs that feel natively built for the wrist.

This focus on design naturally extends to the centerpiece of the user’s experience, the watch face itself. To give you more creative control, we’ve introduced version 4 of the Watch Face Format, which unlocks possibilities like fluid, animated state transitions and lets users select their own photos for the background. And to help developers create their own watch face marketplaces, we’ve introduced the Watch Face Push API. We’ve partnered with well-known watch face developers – including Facer, TIMEFLIK, WatchMaker, and Pujie – who are bringing their unique watch face experiences to the new devices that users can already get today.

All of this is built on a more reliable and efficient foundation, with watches updating to Wear OS 6 seeing up to a 10% improvement in battery life and quicker app launches. This gives you the confidence to use these new creative tools, knowing your app will perform beautifully. Start building apps for the wrist using the resources and guidance at developer.android.com/wear.

Ready to build for every screen today?

The opportunities for your app are bigger than ever, and you can start today. See how your app performs across screen sizes by using the resizable emulator in Android Studio, and explore our large-screen design gallery for inspiration.

For your wearables, the best way to begin is by upgrading your UI with the new Material 3 Expressive libraries for Compose on Wear OS and exploring the engaging experiences you can build with the Watch Face Push API. Finally, use the Wear OS 6 emulator to test and verify your app’s experience.

You can find all the resources you need, including documentation, samples, and guides at developer.android.com/adaptive-apps and developer.android.com/wear.

We can’t wait to see what you develop next!

Posted by Matthew McCullough – Vice President, Product Management, Android Developer

We just dropped an I/O Edition of The Android Show, where we unpacked exciting new experiences coming to the Android ecosystem: a fresh and dynamic look and feel, smarts across your devices, and enhanced safety and security features. Join Sameer Samat, President of Android Ecosystem, and the Android team to learn about exciting new development in the episode below, and read about all of the updates for users.

Tune into Google I/O next week – including the Developer Keynote as well as the full Android track of sessions – where we’re covering these topics in more detail and how you can get started.

Start building with Material 3 Expressive

The world of UX design is constantly evolving, and you deserve the tools to create truly engaging and impactful experiences. That’s why Material Design’s latest evolution, Material 3 Expressive, provides new ways to make your product more engaging, easy to use, and desirable. Learn more, and try out the new Material 3 Expressive: an expansion pack designed to enhance your app’s appeal by harnessing emotional UX, making it more engaging, intuitive, and desirable for users. It comes with new components, motion-physics system, type styles, colors, shapes and more.

Material 3 Expressive will be coming to Android 16 later this year; check out the Google I/O talk next week where we’ll dive into this in more detail.

A fluid design built for your watch’s round display

Wear OS 6, arriving later this year, brings Material 3 Expressive design to Google’s smartwatch platform. New design language puts the round watch display at the heart of the experience, and is embraced in every single component and motion of the System, from buttons to notifications. You’ll be able to try new visual design and upgrade existing app experiences to a new level. Next week, tune in to the What’s New in Android session to learn more.

Plus some goodies in Android 16…

We also unpacked some of the latest features coming to users in Android 16, which we’ve been previewing with you for the last few months. If you haven’t already, you can try out the latest Beta of Android 16.

A few new features that Android 16 adds which developers should pay attention to are Live updates, professional media and camera features, desktop windowing for tablets, major accessibility enhancements and much more:

• Live Updates allow your app to show time-sensitive progress updates. Use the new ProgressStyle template for an improved experience around navigation, deliveries, and rideshares.
• Professional media and camera features include hybrid auto exposure, precise color temperature and tint adjustments, night mode scene detection, and support for the new Advanced Professional Video format.

Watch the What’s New in Android session and the Live updates talk to learn more.

Tune in next week to Google I/O

This was just a preview of some Android-related news, so remember to tune in next week to Google I/O, where we’ll be diving into a range of Android developer topics in a lot more detail. You can check out What’s New in Android and the full Android track of sessions to start planning your time.

We can’t wait to see you next week, whether you’re joining in person or virtually from anywhere around the world!

Posted by Chiara Chiappini – Developer Relations Engineer

This year, we’re excited to introduce Wear OS 6: the most power-efficient and expressive version of Wear OS yet.

Wear OS 6 introduces the new design system we call Material 3 Expressive. It features a major refresh with visual and motion components designed to give users an experience with more personalization. The new design offers a great level of expression to meet user demand for experiences that are modern, relevant, and distinct. Material 3 Expressive is coming to Wear OS, Android, and all your favorite Google apps on these devices later this year.

The good news is that you don’t need to compromise battery for beauty: thanks to Wear OS platform optimizations, watches updating from Wear OS 5 to Wear OS 6 can see up to 10% improvement in battery life.¹

Wear OS 6 developer preview

// returns a LayoutElement for use in onTileRequest()
materialScope(context, requestParams.deviceConfiguration) {
    primaryLayout(
        mainSlot = {
            text(
                text = "Hello, World!".layoutString,
                typography = BODY_LARGE,
            )
        }
    )
}