Wear Navigation and Actions

This lesson describes how to implement action and navigation drawers in your app using the WearableDrawerLayout class.

Note: For the corresponding components in the Wear UI Library, see Action and Navigation Drawers in the Wear UI Library.

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

• Navigation drawer: The navigation drawer lets users switch between views of your app, similar to the navigation drawer on a phone. The navigation drawer is accessible when the user reaches the top of the scrolling content, or when there is no scrolling content from normal scrolling or from flings. You can allow the drawer to be opened anywhere within the scrolling parent's content by setting the setShouldOnlyOpenWhenAtTop() method to false.
• Single 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 a single page, use the app:navigation_style attribute with a value set to single_page.
• Action Drawer: The action drawer provides easy access to common actions in your app. The action drawer appears at the bottom of the screen and provides context-specific user actions, similar to the action bar on a phone. The action drawer will peek 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 or the app:drawer_title attribute.

Figure 1. Navigation and Action Drawers.

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

• Action drawer: By default, the action drawer shows the first action with a chevron symbol when there is more than one action. If you prefer to display just the overflow icon (3 vertical dots) without the first action, you can override the default behavior by setting the show_overflow_in_peek flag to true. For example:

  <android.support.wearable.view.drawer.WearableActionDrawer
      android:id="@+id/bottom_drawer"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@android:color/holo_blue_dark"
      app:show_overflow_in_peek="true"/>
  

  By default, the action drawer will peek when the 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.setShouldPeekOnScrollDown() method to true.
• Navigation drawer: By default, the navigation drawer will peek when a user arrives at the top of the content either by normal scrolling or due to a fling.