Defining Layouts

Wearables use the same layout techniques as handheld Android devices, but need to be designed with specific constraints. Do not port functionality and the UI from a handheld app and expect a good experience. For more information on how to design great wearable apps, read the Android Wear Design Guidelines.

When you create layouts for Android Wear apps, you need to account for devices with square and round screens. Any content placed near the corners of the screen may be cropped on round Android Wear devices, so layouts designed for square screens do not work well on round devices. For a demonstration of this type of problem, see the video Full Screen Apps for Android Wear.

For example, Figure 1 shows how the following layout looks on square and round screens:

Figure 1. Demonstration of how a layout designed for square screens does not work well on round screens.

Thus, using the following settings for your layout, the text doesn't display correctly on devices with round screens:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_square" />
</LinearLayout>

There are two approaches to solving this problem:

1. Use special layouts included in the Wearable UI Library for both square and round devices.
   • BoxInsetLayout - The layout applies different window insets depending on the shape of the device screen. Use this approach when you want to use a similar layout on both screen shapes without having views cropped near the edges of round screens.
   • Curved Layout - Use the curved layout when you want to display and manipulate a vertical list of items optimized for round screens.
2. Provide alternative layout resources for square and round devices as described in the Providing Resources guide. At runtime, Wear detects the shape of the device screen and loads the correct layout.

Android Studio includes the Wearable UI Library on your wear module by default when you use the Project Wizard. To compile your project with this library, ensure that the Extras > Google Repository package is installed in the Android SDK manager and that the following dependency is included in the build.gradle file of your wear module:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.google.android.support:wearable:+'
}

You need the 'com.google.android.support:wearable' dependency to implement the layout techniques shown in the following section. You can browse the API reference documentation for the Wearable UI Library classes.

Use a BoxInsetLayout

The BoxInsetLayout class included in the Wearable UI Library extends FrameLayout and lets you define a single layout that works for both square and round screens. This class applies the required window insets depending on the screen shape and 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 BoxInsetLayout can automatically place its child views on round screens after applying the required window insets. To be displayed inside this area, children views specify the layout_box attribute with these values:

• A combination of top, bottom, left, and right. For example, "left|top" 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.

On square screens, the window insets are zero and the layout_box attribute is ignored.

Figure 3. A layout definition that works on both square and round screens.

The layout shown in Figure 3 uses the <BoxInsetLayout> element and works on square and round screens:

<android.support.wearable.view.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">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        app:layout_box="all">

        <TextView
            android:gravity="center"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="@string/sometext"
            android:textColor="@color/black" />

        <ImageButton
            android:background="@null"
            android:layout_gravity="bottom|left"
            android:layout_height="50dp"
            android:layout_width="50dp"
            android:src="@drawable/ok" />

        <ImageButton
            android:background="@null"
            android:layout_gravity="bottom|right"
            android:layout_height="50dp"
            android:layout_width="50dp"
            android:src="@drawable/cancel" />
    </FrameLayout>
</android.support.wearable.view.BoxInsetLayout>

Notice the parts of the layout marked in bold:

• android:padding="15dp"

  This line assigns padding to the <BoxInsetLayout> element. Because the window insets on round devices are larger than 15dp, this padding only applies to square screens.

• android:padding="5dp"

  This line assigns padding to the inner FrameLayout element. This padding applies to both square and round screens. The total padding between the buttons and the window insets is 20 dp on square screens (15+5) and 5 dp on round screens.

• app:layout_box="all"

  This line ensures that the FrameLayout element and its children are boxed inside the area defined by the window insets on round screens. This line has no effect on square screens.

Use a Curved Layout

The WearableRecyclerView class included in the Wearable UI Library lets you opt-in for a curved layout oprtimized for round screens. To learn how to enable curved layout for scrollable lists in your app, see Creating a Curved Layout.

Use Different Layouts for Square and Round Screens

You can provide alternative resources for specific device configurations, e.g. for square and round screens. For more information, see the instructions in a blog post on this subject.

To support round and square watches, consider organizing layouts as follows:

• The layout/ directory contains layouts that work for both circular and square watches.
• The layout-round/ and layout-notround/ directories contain layouts that are specific to the shape of a screen.

This approach of using the -round and -notround resource qualifiers also can be applied to dimensions or other resource types. For example, you can use the res/values, res/values-round, and res/values-notround resource directories. By organizing resources in this way, you can share a single layout but change only certain attributes, based on a device type.