1page.title=Wear Navigation and Actions 2meta.tags="wear", "wear-preview", "navigation", "action" 3page.tags="wear" 4page.image=/wear/preview/images/card_drawer.png 5 6@jd:body 7 8<div id="qv-wrapper"> 9<div id="qv"> 10 11 <h2>In this document</h2> 12 <ol> 13 <li><a href="#create a drawer">Create a Drawer Layout</a></li> 14 <li><a href="#initialize">Initialize the Drawer List</a></li> 15 <li><a href="#creating">Create a Custom Drawer View</a></li> 16 <li><a href="#listen to events">Listen for Drawer Events</a></li> 17 <li><a href=#peeking">Peeking Drawers</a></li> 18 </ol> 19 20 <h2>You should also read</h2> 21 <ul> 22 <li><a href="http://www.google.com/design/spec-wear/components/navigation-drawer.html"> 23 Navigation Drawer Design</a> </li> 24 <li> 25 <a href="http://www.google.com/design/spec-wear/components/action-drawer.html"> 26 Action Drawer Design</a> 27 </ul> 28 29 <h2>See Also</h2> 30 <ol> 31 <li> 32 <a href="https://github.com/googlesamples/android-WearDrawers">Sample app with 33 navigation and action drawers</a> 34 </li> 35 </ol> 36 37</div> 38</div> 39<p>As part of the <a href="http://www.google.com/design/spec-wear">Material Design</a> 40 for Android Wear, Wear 2.0 adds interactive navigation and action drawers. 41 The navigation drawer appears at the top of the screen and lets users jump to 42 different views within 43the app, similar to the navigation drawer on a phone. The action drawer appears 44at the bottom of the screen and provides context-specific actions for the user, 45similar to the action bar on a phone. These drawers are accessible when the user 46swipes from the top or bottom of the screen, and they peek when users scroll in 47the opposite direction. </p> 48<div class="cols"> 49<div class="col-2of6"> 50 <img src="{@docRoot}wear/preview/images/nav_drawer.gif" alt="" style="padding:.5em"> 51 <p class="img-caption"> 52 <strong>Figure 1.</strong> Navigation and Action Drawers. 53 </p> 54</div> 55<div class="col-2of6"> 56 <img src="{@docRoot}wear/preview/images/action_drawer.gif" alt="" style="padding:.5em;""> 57</div> 58</div> 59<div class="cols"> 60 61<p>This lesson describes how to implement action and navigation drawers in your 62app using the {@code WearableDrawerLayout} APIs. For more information, see the 63downloadable <a href="{@docRoot}preview/setup-sdk.html#docs-dl">API reference</a>. 64</p> 65 66<h2 id="create a drawer">Create a Drawer Layout</h2> 67To add an action or a navigation drawer, declare your user interface with a 68<code>WearableDrawerLayout</code> object as the root view of your layout. Inside 69 the <code>WearableDrawerLayout</code>, add one view that contains the main content 70 for the screen (your primary layout when the drawer is hidden) and additional 71 child views that contain the contents of the drawer.</h2> 72<p>For example, the following layout uses a <code>WearableDrawerLayout</code> with 73 three child views: a <code>FrameLayout</code> to contain the main content, a 74 navigation drawer, and an action drawer.</p> 75 76<pre> 77<android.support.wearable.view.drawer.WearableDrawerLayout 78 android:id="@+id/drawer_layout" 79 xmlns:android="http://schemas.android.com/apk/res/android" 80 xmlns:tools="http://schemas.android.com/tools" 81 android:layout_width="match_parent" 82 android:layout_height="match_parent" 83 tools:deviceIds="wear"> 84 85 <FrameLayout 86 android:layout_width="match_parent" 87 android:layout_height="match_parent" 88 android:id="@+id/content_frame"/> 89 90 <android.support.wearable.view.drawer.WearableNavigationDrawer 91 android:id="@+id/top_navigation_drawer" 92 android:layout_width="match_parent" 93 android:layout_height="match_parent"/> 94 95 <android.support.wearable.view.drawer.WearableActionDrawer 96 android:id="@+id/bottom_action_drawer" 97 android:layout_width="match_parent" 98 android:layout_height="match_parent"/> 99 100</android.support.wearable.view.drawer.WearableDrawerLayout> 101 102</pre> 103 104<h2 id="initialize">Initialize the Drawer List</h2> 105<p>One of the first things you need to do in your activity is to initialize the 106drawers list of items. You should implement {@code WearableNavigationDrawerAdapter} 107to populate the navigation drawer contents. To populate the action drawer with 108a list of actions, inflate an XML file into the Menu (via {@code MenuInflater}). 109</p> 110 111<p>The following code snippet shows how to initialize the contents of your drawers: 112</p> 113 114<pre> 115public class MainActivity extends WearableActivity implements 116WearableActionDrawer.OnMenuItemClickListener{ 117 private WearableDrawerLayout mwearableDrawerLayout; 118 private WearableNavigationDrawer mWearableNavigationDrawer; 119 private WearableActionDrawer mWearableActionDrawer; 120 121 ... 122 123 @Override 124 public void onCreate(Bundle savedInstanceState) { 125 super.onCreate(savedInstanceState); 126 setContentView(R.layout.activity_main); 127 128 ...... 129 130 131 // Main Wearable Drawer Layout that wraps all content 132 mWearableDrawerLayout = (WearableDrawerLayout) findViewById(R.id.drawer_layout); 133 134 // Top Navigation Drawer 135 mWearableNavigationDrawer = (WearableNavigationDrawer) findViewById(R.id.top_navigation_drawer); 136 mWearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this)); 137 138 // Peeks Navigation drawer on the top. 139 mWearableDrawerLayout.peekDrawer(Gravity.TOP); 140 141 // Bottom Action Drawer 142 mWearableActionDrawer = (WearableActionDrawer) findViewById(R.id.bottom_action_drawer); 143 144 // Populate Action Drawer Menu 145 Menu menu = mWearableActionDrawer.getMenu(); 146 MenuInflater inflater = getMenuInflater(); 147 inflater.inflate(R.menu.action_drawer_menu, menu); 148 mWearableActionDrawer.setOnMenuItemClickListener(this); 149 150 // Peeks action drawer on the bottom. 151 mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM); 152 } 153} 154 155</pre> 156 157<h2 id="creating">Create a Custom Drawer View</h2> 158 159<p>To use custom views in drawers, add <code>WearableDrawerView</code> to the 160<code>WearableDrawerLayout</code>. To set the peek view and drawer contents, add 161 them as children of the {@code WearableDrawerView} and specify their IDs in the 162 {@code peek_view} and {@code drawer_content} attributes respectively. You must 163 also specify the drawer position with the {@code android:layout_gravity} 164 attribute. </p> 165 166<p> The following example specifies a top drawer with peek view and drawer 167contents:</p> 168 169<pre> 170 <android.support.wearable.view.drawer.WearableDrawerView 171 android:layout_width="match_parent" 172 android:layout_height="match_parent" 173 android:layout_gravity="top" 174 android:background="@color/red" 175 app:drawer_content="@+id/drawer_content" 176 app:peek_view="@+id/peek_view"> 177 <FrameLayout 178 android:id="@id/drawer_content" 179 android:layout_width="match_parent" 180 android:layout_height="match_parent"> 181 <!-- Drawer content goes here. --> 182 </FrameLayout> 183 <LinearLayout 184 android:id="@id/peek_view" 185 android:layout_width="wrap_content" 186 android:layout_height="wrap_content" 187 android:layout_gravity="center_horizontal" 188 android:orientation="horizontal"> 189 <!-- Peek view content goes here. --> 190 <LinearLayout> 191 </android.support.wearable.view.drawer.WearableDrawerView> 192 193</pre> 194 195<h2 id="listen to events">Listen for Drawer Events</h2> 196<p>To listen for drawer events, call {@code setDrawerStateCallback()} on your 197{@code WearableDrawerLayout} and pass it an implementation of 198{@code WearableDrawerLayout.DrawerStateCallback}. This interface provides callbacks 199 for drawer events such as <code>onDrawerOpened()</code>, 200 <code>onDrawerClosed(),</code> and <code>onDrawerStatechanged()</code>.</p> 201 202<h2 id="peeking">Peeking Drawers</h2> 203<p>To set the drawers to temporarily appear, call <code>peekDrawer()</code> on 204your {@code WearableDrawerLayout} and pass it the {@code Gravity} of the drawer. 205 This feature is especially useful because it allows immediate access to the 206 alternate drawer views or actions associated with it: </p> 207 208<pre>{@code mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);}</pre> 209 210 211
