Using the Wear UI Library

Add a Dependency on the Android Support Library
Import Classes from the Wear UI Library Package
Use the Right Element Names in Layout Files
Example of Using a Library Class
Action and Navigation Drawers in the Wear UI Library

Android support libraries enable consistent, optimized user interfaces across apps. Starting with the 26.0.0 Beta1 revision of the Android Support Library, you can use the Wear UI Library in your user interfaces.

The Wear UI Library includes (but is not limited to) the following classes, which have the same names and benefits as older classes in the existing Wearable Support Library:

BoxInsetLayout. A layout that applies insets for round screens.
SwipeDismissFrameLayout. A layout that enables a user to dismiss any view by swiping on the screen from left to right.
WearableRecyclerView. A view that provides a curved layout, such as the layout used for the main Wear application launcher.

Also see Action and Navigation Drawers in the Wear UI Library.

Add a Dependency on the Android Support Library

The Wear UI Library is delivered with the Android Support Library. For a release timeline that includes the Android Support Library, see the schedule for the O Developer Preview.

To use the Wear UI Library, add the following dependency in your Wear module's build.gradle file:

dependencies {
    ...
    compile 'com.android.support:wear:26.0.0-beta2'
}

If necessary, include a dependency on the Wearable Support Library (see Creating or Updating a Project). Also see Adding Support Libraries.

Import Classes from the Wear UI Library Package

When you use a class from the Wear UI Library, import that class from the android.support.wear.widget package. See the Example of Using a Library Class.

Use the Right Element Names in Layout Files

In layout files, use fully qualified names that correspond to the Wear UI Library (rather than to the Wearable Support Library).

For example, to use the SwipeDismissFrameLayout class from the Wear UI Library, you could specify the following in a layout file:

<android.support.wear.widget.SwipeDismissFrameLayout
    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:id="@+id/swipe_dismiss_root" >
 
    <TextView
        android:id="@+id/test_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Swipe the screen to dismiss me." />
</android.support.wear.widget.SwipeDismissFrameLayout>

Example of Using a Library Class

The classes in the Wear UI Library have functionality that is the same or similar to that in the Wearable Support Library. Some class, method and attribute names are updated to improve consistency with the Android Support Library.

For example, an activity that uses the WearableRecyclerView class from the Wearable Support Library could include the following code:

import android.support.wearable.view.WearableRecyclerView;
...
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.wearable_recycler_view_basic);
    WearableRecyclerView wrv = findViewById(R.id.wrv);
    wrv.setLayoutManager(new ChildLayoutManager());
    wrv.setAdapter(new TestAdapter());
}

Similarly, an activity that uses the WearableRecyclerView class from the Wear UI Library could include the following code. Differences from the above code are in bold:

import android.support.wear.widget.WearableRecyclerView;
...
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.wearable_recycler_view_basic);
    WearableRecyclerView wrv = findViewById(R.id.wrv);
    wrv.setLayoutManager(new WearableLinearLayoutManager(this));
    wrv.setAdapter(new TestAdapter());
}

Action and Navigation Drawers in the Wear UI Library

The Wear UI Library has components for action and navigation drawers. The components in the Wear UI Library, described below, replace the similar components in the Wearable Support Library.

With the WearableDrawerView class, you can enable users to open a drawer anywhere in the scrolling parent's content by setting the setOpenOnlyAtTopEnabled() method to false.

The interactive drawers are the following:

Navigation drawer. You can enable users to switch between views in your app.
- Multi-page navigation drawer. You can present the contents of a navigation drawer in a single page or as multiple pages. To display the navigation drawer contents in multiple pages, use the app:navigationStyle attribute with a value set to multiPage.
Action Drawer. Lets you provide easy access to common actions in your app. The action drawer appears at the bottom of the screen and has context-specific user actions, similar to the action bar on a phone. The action drawer peeks when the user reaches the top or bottom of the scrolling content, whether from normal scrolling or from flings.
- Set title: You can set the title of the action drawer using either the setTitle() method (of WearableActionDrawerView) or the app:drawerTitle attribute.

For the relevant components in the Wear UI Library, see the API reference for the android.support.wear.widget.drawer package. The classes include the following:

Create a drawer layout

To add an action or a navigation drawer to your app, declare a user interface with a WearableDrawerLayout object as the root view of the layout. Inside the WearableDrawerLayout, if content is scrolling, add one view that implements the NestedScrollingChild() interface to contain the main content and the additional child views that contain the drawer contents.

For example, the following layout uses a WearableDrawerLayout with three child views: A LinearLayout to contain the main content, a navigation drawer, and an action drawer.

<android.support.wearable.view.drawer.WearableDrawerLayout
    android:id="@+id/drawer_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ScrollView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:nestedScrollingEnabled="true">
        <LinearLayout
            android:id="@+id/linear_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" />
    </ScrollView>
    <android.support.wear.widget.drawer.WearableNavigationDrawerView
        android:id="@+id/top_navigation_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <android.support.wear.widget.drawer.WearableActionDrawerView
        android:id="@+id/bottom_action_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:actionMenu="@menu/action_drawer_menu"/>
</android.support.wear.widget.drawer.WearableDrawerLayout>

By default, a navigation drawer is a single-page drawer. However, a single page drawer may not be fitting for your app, especially if your app has more than seven views, or has views that are not easily represented with icons. To create a multi-page navigation drawer, apply the attribute navigationStyle="multiPage" to the drawer. For example:

<android.support.wear.widget.drawer.WearableNavigationDrawerView
    android:id="@+id/top_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_light"
    app:navigationStyle="multiPage"

Initialize the drawer contents

As one of the primary steps for an Activity, you initialize the drawers' lists of items. You must extend WearableNavigationDrawerAdapter to populate the navigation drawer contents. You can populate the action drawer contents in your layout XML file using the app:actionMenu attribute:

app:actionMenu="@menu/action_drawer_menu"

The following shows how to initialize the contents of your drawers:

public class MainActivity extends WearableActivity implements
        OnMenuItemClickListener{
    private WearableDrawerLayout mWearableDrawerLayout;
    private WearableNavigationDrawerView mWearableNavigationDrawer;
    private WearableActionDrawerView mWearableActionDrawer;
    ...
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...
        // Main wearable drawer layout that wraps all content
        // Top navigation drawer
        mWearableNavigationDrawer = (WearableNavigationDrawerView) findViewById(R.id.top_navigation_drawer);
        mWearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this));
        // Peeks navigation drawer on the top.
        mWearableNavigationDrawer.getController().peekDrawer();
        // Bottom action drawer
        mWearableActionDrawer = (WearableActionDrawerView) findViewById(R.id.bottom_action_drawer);
        // Peeks action drawer on the bottom.
        mWearableActionDrawer.getController().peekDrawer();
        mWearableActionDrawer.setOnMenuItemClickListener(this);
    }
}

Create a custom drawer view

To use custom views in drawers, add a WearableDrawerView to the WearableDrawerLayout. To set the peek view and drawer contents, add them as children of the WearableDrawerView and specify their IDs in the peekView and drawerContent attributes, respectively. Also specify the drawer position using either a top or bottom value for the android:layout_gravity attribute (only top and bottom are supported).

Custom peek views must specify their own top and bottom padding.

The following example specifies a top drawer with peek view and drawer contents:

<android.support.wear.widget.drawer.WearableDrawerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="top"
    android:background="@color/red"
    app:drawerContent="@+id/drawer_content"
    app:peekView="@+id/peek_view">
    <FrameLayout
        android:id="@id/drawer_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- Drawer content goes here.  -->
    </FrameLayout>
    <LinearLayout
        android:id="@id/peek_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        android:orientation="horizontal">
        <!-- Peek view content goes here.  -->
    <LinearLayout>
</android.support.wear.widget.drawer.WearableDrawerView>

Listen for drawer events

To listen for drawer events, call setDrawerStateCallback() on your WearableDrawerLayout and pass it an implementation of WearableDrawerLayout.DrawerStateCallback. This abstract class provides callbacks for drawer events such as onDrawerOpened(), onDrawerClosed(), and onDrawerStatechanged().

Peeking drawers

To cause a drawer to peek, call getController() for access to peekDrawer(), closeDrawer(), and openDrawer().

For example:

mActionDrawer.getController().peekDrawer();

By default, the action drawer shows the first action with a chevron when there are multiple actions. If you prefer to display just the overflow icon (three vertical dots) without the first action, override the default behavior by setting the showOverflowInPeek flag to true. For example:

<android.support.wear.widget.drawer.WearableActionDrawerView
    android:id="@+id/bottom_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_dark"
    app:showOverflowInPeek="true"/>

By default, the action drawer peeks when a user reaches the top or bottom of the main scrolling content (that is, the view that implements NestedScrollingChild), whether from normal scrolling or from flings. If you prefer, you can make the drawer peek whenever the user is scrolling down, by setting the actionDrawer.setPeekOnScrollDownEnabled() method to true.

The navigation drawer, by default, peeks when a user arrives at the top of the content, either by normal scrolling or due to a fling.

Most visited

Recently visited

Results for