App layouts

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

After you understand how to handle different watch shapes, decide which surface you want to use.

The following list describes common app layouts. 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 ComponentActivity or FragmentActivity (if you are using fragments). The other activity types use mobile-specific UI elements that you don't need for Wear OS.

Single screen

The user sees all elements in a single screen without scrolling. This means you can include only a small number of elements.

Figure 1. Multiple examples of single screens.

Single screens work well with BoxInsetLayout in combination with a ConstraintLayout to arrange your elements.

A 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 shape, use layout-round and layout-notround. To learn more, see Use different layouts for square and round screens.

Vertical container

A vertical container is the most common type of app and contains additional content not visible on the screen but accessible with scrolling.

The following images show several complete app layouts, 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 app, don't use BoxInsetLayout. Instead, place a ConstraintLayout inside a NestedScrollView. This allows you to take advantage of the extra space on the sides of a circular display.

Inside the 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.

Note: 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 app layouts

  • Lists: display large sets of data with the WearableRecyclerView widget 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.