Overlays

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 can be provided by a complication or Tile.
overlay-rich
For adjusting preferences
To provide access to education and preferences.
overlay-pref

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.
Wet mode
Learn how to disable touch screen using wet mode.