Skip to content

Most visited

Recently visited

navigation

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 user experience. For more information on designing 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. Content near the corners of the screen may be cropped on round Android Wear devices. Therefore, layouts designed for square screens can have display issues on round devices. For a demonstration of this 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 this problem:

  1. Using layouts in the Wear UI Library for both square and round devices.
    • BoxInsetLayout - This 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 this layout when you want to display and manipulate a vertical list of items optimized for round screens.
  2. Providing 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.

To compile an Android Studio project with this library, ensure that the Extras > Google Repository package is installed in the Android SDK manager. Additionally, include the following dependencies in the build.gradle file of your wear module:

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

Use a BoxInsetLayout

Figure 2. Window insets on a round screen.

The BoxInsetLayout class in the Wear UI Library 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.

Note: The BoxInsetLayout class replaces a similar, deprecated class in the Wearable Support Library.

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, child views specify the layout_box attribute with these values:

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.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">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        app:boxedEdges="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.wear.widget.BoxInsetLayout>

Notice the parts of the layout marked in bold:

Use a Curved Layout

The WearableRecyclerView class in the Wear UI Library lets you opt-in for a curved layout, optimized for round screens. To enable a 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 relevant instructions in a blog post on this subject.

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

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.

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Follow Google Developers on WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience.
(Sep 2017 survey)