Langsung ke konten

Paling sering dikunjungi

Terakhir dikunjungi


Defining Layouts on Wear

Wear OS apps 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 Wear OS Design Guidelines.

When you create layouts for Wear OS apps, you need to account for devices with square and round screens. Content near the corners of the screen may be cropped on round Wear OS devices. Therefore, layouts designed for square screens can have display issues on round devices.

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

        android:text="@string/hello_square" />

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 ''

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:textColor="@color/black" />

            android:src="@drawable/ok" />

            android:src="@drawable/cancel" />

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

A Wear device can have a square or round screen. Your app needs to be able to support either device configuration. To do this, you should provide alternative resources. Apply the -round and -notround resource qualifiers to layouts, dimensions, or other resource types.

For example, consider organizing layouts as follows:

You can also 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 while changing only specific attributes, based on the device type.

Varying the values

An easy way to build for round and square watches is by using values/dimens.xml and values-round/dimens.xml. By specifying different padding settings, you can create the following layout with a single layout.xml file and the two dimens.xml files:

<dimen name="header_start_padding">36dp</dimen>
<dimen name="header_end_padding">22dp</dimen>
<dimen name="list_start_padding">36dp</dimen>
<dimen name="list_end_padding">22dp</dimen>
Using values-round/dimens.xml

Figure 4. Using values-round/dimens.xml.

<dimen name="header_start_padding">16dp</dimen>
<dimen name="header_end_padding">16dp</dimen>
<dimen name="list_start_padding">10dp</dimen>
<dimen name="list_end_padding">10dp</dimen>
Using values/dimens.xml

Figure 5. Using values/dimens.xml.

You should experiment with different values to see what works best.

Using XML to compensate for the chin

Some watches have an inset (also known as a “chin”) in an otherwise circular screen. If you don't compensate, some of your design may be obscured by the chin.

For example, you may have the following design:

Basic heart design

Figure 6. Basic heart design.

This activity_main.xml snippet defines its layout.


If you do nothing, part of the design will disappear into the chin.

Basic heart design

Figure 7. No fix applied.

You can use the fitsSystemWindows attribute to set the padding to avoid the chin. The following activity_main.xml snippet shows the use of fitsSystemWindows:

Using fitsSystemWindows

Figure 8. Using the fitsSystemWindows attribute.

Note that the top and bottom padding values that you defined are overridden to make everything fit in the system window. The way to fix this is to replace the padding values using an InsetDrawable.

Create an inset_favourite.xml file to define the padding values:

  android:insetBottom="5dp" />

Remove the padding from the activity_main.xml:

Using InsetDrawables

Figure 9. Using an InsetDrawables.

Managing the chin programmatically

If you require more control than what is possible declaratively using XML, you can programmatically adjust your layout. To obtain the size of the chin you should attach a View.OnApplyWindowInsetsListener to the outermost view of your layout.

Add the following to

private int mChinSize;
protected void onCreate(Bundle savedInstanceState) {
    // find the outermost element
    final View container = findViewById(;
    // attach a View.OnApplyWindowInsetsListener
    container.setOnApplyWindowInsetsListener(new View.OnApplyWindowInsetsListener() {
        public WindowInsets onApplyWindowInsets(View v, WindowInsets insets) {
            mChinSize = insets.getSystemWindowInsetBottom();
            // The following line is important for inner elements which react to insets
            return insets;
Situs ini menggunakan cookies untuk menyimpan preferensi Anda tentang bahasa di situs tertentu dan opsi tampilan.

Dapatkan berita dan tips terbaru dari developer Android yang akan membantu Anda mencapai kesuksesan di Google Play.

* Wajib Diisi


Ikuti Google Developers di WeChat

Buka situs ini dalam bahasa ?

Anda meminta halaman dalam bahasa , namun preferensi bahasa untuk situs ini adalah .

Ingin mengubah preferensi bahasa dan mengakses situs ini dalam bahasa ? Jika nanti Anda ingin mengubah preferensi bahasa, gunakan menu bahasa di bagian bawah setiap halaman.

Kelas ini memerlukan tingkat API atau yang lebih tinggi

Dokumen ini tersembunyi karena level API yang Anda pilih untuk dokumentasi ini adalah . Anda dapat mengubah level API dokumentasi dengan pemilih di atas menu navigasi sebelah kiri.

Untuk informasi lebih lanjut tentang menentukan level API yang diperlukan aplikasi Anda, baca Mendukung Versi Platform Yang Berbeda.

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)