Try the Compose way  
Jetpack Compose on Wear OS is the recommended UI toolkit for Wear OS.  
[Handle different screen sizes using Compose on Wear OS →](https://developer.android.com/training/wearables/compose/screen-size)  
![](https://developer.android.com/static/images/android-compose-ui-logo.png)

After you understand how to[handle different watch shapes](https://developer.android.com/training/wearables/apps/layouts), decide which surface you want to use.

Common app layouts include the following:

- Single screen (simplest): UI elements are limited to what is visible at one time without scrolling.
- Vertical container (most common): content exists beyond the viewable portion of the screen and is accessible by scrolling.
- Other options: lists, paging, or 2D panning.

These layout types are described in the sections that follow. You can use a combination of layout types if you need multiple screens.

**Note:** For your activity, inherit from either a`ComponentActivity`or, if you use fragments, a`FragmentActivity`. 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.
![](https://developer.android.com/static/wear/images/screen_opts_4.png)

**Figure 1.**An example of a single screen layout.

Single screens work well with a[BoxInsetLayout](https://developer.android.com/reference/androidx/wear/widget/BoxInsetLayout)in combination with a[ConstraintLayout](https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout)to arrange your elements.

## Vertical container

A vertical container is the most common type of app layout. Some content isn't visible on the screen, but it is accessible by scrolling.

Figure 2 shows several complete app layouts in which only a portion of the content can be seen on the circular screen of a watch. In these examples, the main content is in the top portion of the container, and other Critical User Journeys (CUJs) and settings are at the bottom. This is a best practice for laying out content.
![](https://developer.android.com/static/wear/images/screen_opts_2.png)

**Figure 2.**Examples of vertical container layouts.

Unlike in a single screen app layout, don't use`BoxInsetLayout`. Instead, use a`ConstraintLayout`inside a[NestedScrollView](https://developer.android.com/reference/androidx/core/widget/NestedScrollView). Inside the`ConstraintLayout`, place whatever widgets make the most sense for your app. This lets you take advantage of the extra space on the sides of a circular display.
![](https://developer.android.com/static/wear/images/screen_opts_3.gif)

**Figure 3.** Content in a`ConstraintLayout`inside a`NestedScrollView`.

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 in the example in figure 3.

**Note:** When 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](https://developer.android.com/training/wearables/apps/lists).
- **Horizontal paging** : for use cases with multiple sibling screens, use a[horizontal swipe](https://developer.android.com/guide/navigation/navigation-swipe-view-2). 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](https://developer.android.com/training/gestures/scale#pan)in different directions. Enable[swipe-to-dismiss](https://developer.android.com/training/wearables/apps/exit#swipe-to-dismiss)if your activity takes up the entire screen.