Pular para o conteúdo

Mais visitados

Visitados recentemente


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="http://schemas.android.com/apk/res/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 '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: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 MainActivity.java:

private int mChinSize;
protected void onCreate(Bundle savedInstanceState) {
    // find the outermost element
    final View container = findViewById(R.id.outer_container);
    // 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;
Este site usa cookies para armazenar suas preferências quanto às opções de idioma e exibição específicas ao site.

Receba as dicas e notícias mais recentes para desenvolvedores Android que ajudarão você a ter sucesso no Google Play.

* Campos obrigatórios


Siga o Google Developers no WeChat

Navegar neste site em ?

Você solicitou uma página em , mas sua preferência de idioma para este site está definida como .

Quer alterar sua preferência de idioma e navegar neste site em ? Para alterar a preferência de idioma depois, use o menu de idiomas na parte inferior de cada página.

É preciso ter o nível de API ou superior para esta aula

Este documento está oculto porque o nível de API selecionado para a documentação é o . Para alterar o nível, clique no seletor acima da barra de navegação esquerda.

Para mais informações sobre como especificar o nível de API que o seu app precisa, leia o artigo Compatibilidade com diferentes versões de plataforma.

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