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.
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.
- For richer interactions
- To provide richer interaction than a complication or Tile.
- For adjusting preferences
- To provide access to education and preferences.
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.