Skip to content

Most visited

Recently visited

navigation

Wear Navigation and Actions

This lesson describes how to implement action and navigation drawers in your app.

As part of Material Design for Android Wear, two interactive drawers are available:

Figure 1. Navigation and Action Drawers.

For detailed information about the classes described on this page, see the API reference for the android.support.wear.widget.drawer package. The classes are in the Wear UI Library. For information about that library, and the deprecated classes (including classes formerly used for action and navigation drawers) that the Wear UI Library replaces, see Using the Wear UI Library.

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, it must support nested scrolling.

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.wear.widget.drawer.WearableDrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    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>

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

Create a Multi-page Navigation Drawer

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);
        ...
        // 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.

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)