Skip to content

Most visited

Recently visited

navigation

Wear Navigation and Actions

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

Figure 1. Navigation and Action Drawers.

This lesson describes how to implement action and navigation drawers in your app using the WearableDrawerLayout class. For more information, see the Wear API reference.

Create a Drawer Layout

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

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:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:deviceIds="wear">

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/linear_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />

    </android.support.v4.widget.NestedScrollView>

    <android.support.wearable.view.drawer.WearableNavigationDrawer
        android:id="@+id/top_navigation_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.wearable.view.drawer.WearableActionDrawer
        android:id="@+id/bottom_action_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:action_menu="@menu/action_drawer_menu"/>

</android.support.wearable.view.drawer.WearableDrawerLayout>

Create a single page navigation drawer

A single page navigation drawer provides a faster and more streamlined navigation to different views in your app. To create a single page navigation drawer with 1-7 icons, apply the attribute navigation_style="single_page" to the drawer. For example:

<android.support.wearable.view.drawer.WearableNavigationDrawer
    android:id="@+id/top_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_light"
    app:navigation_style="single_page"/>

Initialize the Drawer Contents

One of the first things you need to do in your activity is to initialize the drawers list of items. You must implement WearableNavigationDrawerAdapter to populate the navigation drawer contents. You can populate the action drawer contents in your layout XML file using the app:action_menu attribute.

app:action_menu="@menu/action_drawer_menu"

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

public class MainActivity extends  WearableActivity implements
WearableActionDrawer.OnMenuItemClickListener{
    private WearableDrawerLayout mWearableDrawerLayout;
    private WearableNavigationDrawer mWearableNavigationDrawer;
    private WearableActionDrawer mWearableActionDrawer;

    ...

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ...

        // Main Wearable Drawer Layout that wraps all content
        mWearableDrawerLayout = (WearableDrawerLayout) findViewById(R.id.drawer_layout);
        mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);
        mWearableDrawerLayout.peekDrawer(Gravity.TOP);

        // Top Navigation Drawer
        mWearableNavigationDrawer = (WearableNavigationDrawer) findViewById(R.id.top_navigation_drawer);
        mWearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this));

        // Peeks Navigation drawer on the top.
        mWearableDrawerLayout.peekDrawer(Gravity.TOP);

        // Bottom Action Drawer
        mWearableActionDrawer = (WearableActionDrawer) findViewById(R.id.bottom_action_drawer);

        mWearableActionDrawer.setOnMenuItemClickListener(this);
    }
}

Create a Custom Drawer View

To use custom views in drawers, add 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 peek_view and drawer_content attributes respectively. You must also specify the drawer position with the android:layout_gravity attribute.

Important: 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.wearable.view.drawer.WearableDrawerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="top"
    android:background="@color/red"
    app:drawer_content="@+id/drawer_content"
    app:peek_view="@+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.wearable.view.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 interface provides callbacks for drawer events such as onDrawerOpened(), onDrawerClosed() and onDrawerStatechanged().

Peeking Drawers

To cause the drawers to peek, call peekDrawer() on your WearableDrawerLayout and pass it the Gravity of the drawer. This feature is especially useful because it allows immediate access to the alternate app views and actions associated with them:

mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);
The drawers peek in the following ways:
This site uses cookies to store your preferences for site-specific language and display options.

Hooray!

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 one-minute survey?
Help us improve Android tools and documentation.