Working with Screen Sizes

PDF for offline use

Let us know how you feel about this

Translation Quality


0/250

last updated: 2017-06

Android Wear devices can have either a rectangular or a round display, which can also be different sizes.

Screenshots of rectangular and round Wear displays

Identifying Screen Type

The Wear support library provides some controls that help you detect and adapt to different screen shapes, such as WatchViewStub and BoxInsetLayout.

Be aware that some of the other support library controls (such as GridViewPager) automatically detect screen shape themselves and shouldn't be added as children of the controls described below.

WatchViewStub

See the WatchViewStub sample to see how to detect screen type and display a different layout for each type.

The main layout file contains a android.support.wearable.view.WatchViewStub which references different layouts for rectangular and round screens using the app:rectLayout and app:roundLayout attributes:

<android.support.wearable.view.WatchViewStub
    xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/stub"
  app:rectLayout="@layout/rect_layout"
  app:roundLayout="@layout/round_layout" />

The solution contains different layouts for each style which will be selected at run-time:

Files shown under Resources/layout

BoxInsetLayout

Rather than build different layouts for each screen type, you can also create a single view that adapts to rectangular or round screens.

This Google example shows how to use the BoxInsetLayout to use the same layout on both rectangular and round screens.

Wear UI Designer

The Xamarin Android Designer supports both rectangular and round screens:

Selecting the Android Wear Square screen in the Xamarin Android Designer

The design surface in rectangular style is shown here:

Design surface in rectangular style

The design surface in round style is shown here:

Design surface in round style

Wear Simulator

The Google Emulator Manager contains device definitions for both screen types. You can create rectangular and round emulators to test your app.

Wear device definitions shown in the Google Emulator Manager

The emulator will render like this for a rectangular screen:

Emulator rendering of a rectangular screen

It will render like this for a round screen:

Emulator rendering of a round screen

Video

Fullscreen apps for Android Wear from developers.google.com.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.