Overlays

Stay organized with collections Save and categorize content based on your preferences.

An overlay is a focused view that should handle tasks that are too complex for a complication, Tile, or notification. Overlays are immersive. In some ways they are similar to a mobile app's main user interface, but they do have some differences.

Other surfaces (Tiles, complications, and notifications) that accomplish simple tasks often link into an overlay to allow users to carry out more complex tasks.

overlay-flow

Review the following principles and use cases for a better understanding of overlays.

UX principles for an overlay

Design overlays with the following principles in mind:

Focus
Focus overlays on critical tasks to help people get things done within seconds to avoid ergonomic discomfort or arm fatigue
Shallow and linear
Avoid hierarchies deeper than two levels. Show navigation inline
Scroll
Views can scroll. This is a natural gesture for users to see more content on the watch

When to use an overlay

Use overlays in the following situations:

For additional info
Focus overlays on critical tasks to help people get things done within seconds to avoid ergonomic discomfort or arm fatigue.
overlay-focus
For richer interactions
To provide richer interaction than a complication or Tile.
overlay-rich
For adjusting preferences
To provide access to education and preferences.
overlay-pref

Building an overlay

Wear OS supports two distinctive ways of building an overlay:

If you're building a new Wear OS app, consider implementing your overlay using Compose for Wear OS.

Compose-based UIs in most cases result in less code and accelerates the development process of Android apps as a whole. See Why Compose for more information on the general advantages of a declarative UI framework.

The Compose Material Catalog for Wear OS follows material styling and also implements material theming, which allows you to customize the design for your brand. Compose for Wear OS offers more components than are available with Views, and is designed to help you create user experiences that conform to Wear OS design guidelines.

If you have an existing Wear OS app with a large view-based codebase, it's possible to gradually adopt Compose by using the Compose Interoperability APIs rather than having to rewrite the whole codebase.

Guides for creating overlays

Use the Wear UI Library
Learn how to import the Wear UI Library and the main classes.
Handle different watch shapes
Learn how to create layouts that look good on round, rectangle, and square Wear OS devices.
Single screens, vertical containers and other screen options
Learn how to construct the most common UI layouts for overlays.
Create lists
Learn how to create lists that are optimized for wearable devices.
Navigation
Learn how to construct your Wear OS app.
Exit full-screen activities
Learn how to exit full-screen activities.
Show confirmations
Learn how to show confirmation animations when users complete actions.
Ambient mode
Learn how to keep apps visible.
Speaker
Learn how to handle sound on Wear OS.