UI Widgets documentation for Wear 2.0 preview. am: 0fce5d13 am: cf3fa15b

@jd:body

<p>stub</p>

 No newline at end of file

<div id="qv-wrapper">

<div id="qv">

    <h2>In this document</h2>

    <ol>

      <li><a href="#create a drawer">Create a Drawer Layout</a></li>

      <li><a href="#initialize">Initialize the Drawer List</a></li>

      <li><a href="#creating">Create a Custom View Drawer</a></li>

      <li><a href="#listen to events">Listen for Drawer Events</a></li>

      <li><a href=#peeking">Peeking Drawers</a></li>

    </ol>

   <h2>You should also read</h2>

   <ul>

   <li><a href="https://spec.googleplex.com/wear/components/navigation-drawer.html">

   Navigation Drawer Design</a> </li>

   <li>

   <a href="https://spec.googleplex.com/wear/components/action-drawer.html">

   Action Drawer Design</a>

   </ul>

  <h2>Samples</h2>

  <ol>

  </ol>

</div>

</div>

<p>Wear 2.0 adds interactive navigation and action drawers that users can pull

from the top or bottom edge of the window, respectively. The navigation drawer

appears at the top of the screen and lets users jump to different views within

the app, similar to the navigation drawer on a phone. The action drawer appears

at the bottom of the screen and provides context-specific actions for the user,

similar to the action bar on a phone. These drawers are accessible when the user

swipes from the top or bottom of the screen, and they peek when users scroll in

the opposite direction. </p>

<div class="cols">

<div class="col-2of6">

  <img src="{@docRoot}wear/preview/images/nav_drawer.gif" alt="" style="padding:.5em">

  <p class="img-caption">

      <strong>Figure 1.</strong> Navigation and Action Drawers.

    </p>

</div>

<div class="col-2of6">

  <img src="{@docRoot}wear/preview/images/action_drawer.gif" alt="" style="padding:.5em;"">

</div>

</div>

<div class="cols">

<p>This lesson describes how to implement action and navigation drawers in your

app using the {@code WearableDrawerLayout} APIs.

</p>

<h2 id="create a drawer">Create a Drawer Layout</h2>

To add an action or a navigation drawer, declare your user interface with a

<code>WearableDrawerLayout</code> object as the root view of your layout.  Inside

 the <code>WearableDrawerLayout</code>, add one view that contains the main content

  for the screen (your primary layout when the drawer is hidden) and additional

  child views that contain the contents of the drawer.</h2>

<p>For example, the following layout uses a <code>WearableDrawerLayout</code> with

 three child views: a <code>FrameLayout</code> to contain the main content, a

 navigation drawer, and an action drawer.</p>

<pre>

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

    android:id="@+id/drawer_layout"

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:deviceIds="wear">

    <FrameLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:id="@+id/content_frame"/>

    <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"/>

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

</pre>

<h2 id="initialize">Initialize the Drawer List</h2>

<p>One of the first things you need to do in your activity is to initialize the

drawers list of items. You should implement {@code WearableNavigationDrawerAdapter}

to populate the navigation drawer contents. To populate the action drawer with

a list of actions, inflate an XML file into the Menu (via MenuInflater).</p>

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

</p>

<pre>

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

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

        // Populate Action Drawer Menu

        Menu menu = mWearableActionDrawer.getMenu();

        MenuInflater inflater = getMenuInflater();

        inflater.inflate(R.menu.action_drawer_menu, menu);

        mWearableActionDrawer.setOnMenuItemClickListener(this);

        // Peeks action drawer on the bottom.

        mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);

    }

}

</pre>

<h2 id="creating">Create a Custom View Drawer</h2>

<p>To use custom views in drawers,  add  <code>WearableDrawerView</code> to  the

<code>WearableDrawerLayout</code>. To set the contents of the drawer, call <code>

<a href="https://x20web.corp.google.com/~psoulos/docs/reference/android/support/wearable/view/drawer/WearableDrawerView.html#setDrawerContent(android.view.View)">setDrawerContent(View)</a></code>

 instead of manually adding the view to the hierarchy. You must also specify the

  drawer position with the <code>android:layout_gravity</code> attribute. </p>

<p> The following example specifies a top drawer:</p>

<pre>

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

    <FrameLayout 

    android:id=”@+id/content” />

    <WearableDrawerView

        android:layout_width=”match_parent”

        andndroid:layout_height=”match_parent”

        android:layout_gravity=”top”>

        <FrameLayout 

            android:id=”@+id/top_drawer_content” />

    </WearableDrawerView>

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

</pre>

<h2 id="listen to events">Listen for Drawer Events</h2>

<p>To listen for drawer events, call {@code setDrawerStateCallback()}on your

{@code WearableDrawerLayout} and pass it an implementation of

{@code WearableDrawerLayout.DrawerStateCallback}. This interface provides callbacks

 for drawer events such as <code>onDrawerOpened()</code>,

 <code>onDrawerClosed(),</code> and <code>onDrawerStatechanged()</code>.</p>

<h2 id="peeking">Peeking Drawers</h2>

<p>To  set the drawers to temporarily appear, call  <code>peekDrawer()</code> on

your {@code WearableDrawerLayout} and pass it the {@code Gravity} of the drawer.

 This feature is especially useful because it allows immediate access to the

 alternate drawer views or actions associated with it. </p>

<pre>{@code mWearableDrawerLayout.peekDrawer</code>(<code>Gravity.BOTTOM);}</pre>

<p>You can also call {@code setPeekContent()} on your drawer to display a custom

 view when the drawer is peeking.</p>