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


Apps on Wear OS use the same layout techniques as other Android devices
but need to be designed with watch-specific constraints.


**Note:** Don't port the exact functionality and UI from a mobile app to Wear OS and expect
a good user experience.


If you design your app for a rectangular handheld device, content near the corners of the screen
might be cropped on round watches. If you are using a scrollable vertical list, this is less of
an issue, as the user can scroll to center the content. However, for single screens, it can
provide a bad user experience.


If you use the following settings for your layout, text displays incorrectly on devices
with round screens:  

```xml
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="@string/very_long_hello_world"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
```


To solve this problem, use layouts in the [Wear OS UI Library](https://developer.android.com/training/wearables/views) that support round devices.

- You can use a [`BoxInsetLayout`](https://developer.android.com/reference/androidx/wear/widget/BoxInsetLayout) to prevent views from being cropped near the edges of round screens.
- You can use a [WearableRecyclerView](https://developer.android.com/reference/androidx/wear/widget/WearableRecyclerView) to create a curved layout when you want to display and manipulate a vertical list of items optimized for round screens.


For more information about designing apps, read the
[Wear OS design guidelines](https://developer.android.com/training/wearables/design).

## Use a BoxInsetLayout

![](https://developer.android.com/static/wear/images/02_uilib.png)


**Figure 2.** Window insets on a round screen.


The [`BoxInsetLayout`](https://developer.android.com/reference/androidx/wear/widget/BoxInsetLayout) class in the Wear OS UI Library lets
you define a layout that works for round screens. This class lets you
easily align views on the center or near the edges of the screen.


The gray square in figure 2 shows the area where the `BoxInsetLayout`
can automatically place its child views on round screens after applying
the required window insets. To be displayed inside this area, child
views specify the `layout_boxedEdges` attribute with the following values:

- A combination of `top`, `bottom`, `left`, and `right`. For example, a `"left|top"` value positions the child's left and top edges inside the gray square in figure 2.
- The `"all"` value positions all the child's content inside the gray square in figure 2. This is the most common approach with a [`ConstraintLayout`](https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout) inside.


The layout shown in figure 2 uses the `<BoxInsetLayout>`
element and works on round screens:  

```xml
<androidx.wear.widget.BoxInsetLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:padding="15dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        app:layout_boxedEdges="all">

        <TextView
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="@string/sometext"
            android:textAlignment="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:src="@drawable/cancel" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:src="@drawable/ok" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.wear.widget.BoxInsetLayout>
```


Notice the parts of the layout marked in bold:

-
  `android:padding="15dp"`


  This line assigns padding to the `<BoxInsetLayout>`
  element.
-
  `android:padding="5dp"`


  This line assigns padding to the inner `ConstraintLayout` element.
-
  `app:layout_boxedEdges="all"`


  This line ensures that the `ConstraintLayout` element
  and its children are boxed inside the area defined by the window
  insets on round screens.

## Use a curved layout

The [WearableRecyclerView](https://developer.android.com/reference/androidx/wear/widget/WearableRecyclerView) class in the Wear OS UI Library
lets you opt-in to a curved layout optimized for round screens.
To enable a curved layout for scrollable lists in your
app, see [Create lists on Wear OS](https://developer.android.com/training/wearables/ui/lists#creating).