After you understand how to handle different watch shapes, decide which type of overlay you want to use.
The following list describes the overlay screen types. You may use a combination of these if you need multiple screens.
- Single Screen (simplest): UI elements limited to what is visible at one time without scrolling.
- Vertical Container (most common): Content exists beyond the viewable portion of the screen (accessible with scrolling).
- Other options (lists, paging, or 2D panning).
Note: For your activity, you should inherit from either a
FragmentActivity (if you are using fragments).
The other activity types use mobile-specific UI elements that you don't need for Wear OS.
The user sees all elements in a single screen without scrolling. This means you can include only a small number of elements.
BoxInsetLayout is a Wear OS UI widget that allows you to define a single layout
that works for square, rectangle, and round screens. This class applies the required window
insets, depending on the screen shape, and lets you easily align views in the center of the
screen. However, if you don't mind creating separate layouts to take advantage of each screen
To learn more, see
Use different layouts for square and round screens.
A vertical container is the most common type of overlay and contains additional content not visible on the screen but accessible with scrolling.
The following images show several complete overlay examples, in which only a portion of the content would be viewable on the circular screen of a watch. The main content is in the top portion of the container. In these examples, other Critical User Journeys (CUJs) and settings are at the bottom.
Unlike a single screen overlay, don't use
BoxInsetLayout. Instead, place a
ConstraintLayout inside a
This allows you to take advantage of the extra space on the sides of a circular display.
ConstraintLayout, place whatever widgets make the most sense for your app.
Make sure the content at the top and bottom of your vertical container is small enough to fit in the top and bottom of a circular display, as with the previous example.
Whenever possible, add a scroll indicator to your
NestedScrollView by setting
android:scrollbars="vertical" in the XML. This helps users identify that there is
more content available and helps them see where they are in relation to all the content.
Other options for overlay screens
Lists: display large sets of data with the
WearableRecyclerViewwidget optimized for Wearable surfaces. For more information, see Create lists on Wear OS.
- Horizontal paging: For use cases with multiple sibling screens, use a horizontal swipe. If you use horizontal paging, you must support swipe-to-dismiss for the left edge.
- 2D Panning: For use cases like maps, users can drag to pan in different directions. Enable swipe-to-dismiss if your activity takes up the entire screen.