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 View Drawer</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. 63</p> 64 65<h2 id="create a drawer">Create a Drawer Layout</h2> 66To add an action or a navigation drawer, declare your user interface with a 67<code>WearableDrawerLayout</code> object as the root view of your layout. Inside 68 the <code>WearableDrawerLayout</code>, add one view that contains the main content 69 for the screen (your primary layout when the drawer is hidden) and additional 70 child views that contain the contents of the drawer.</h2> 71<p>For example, the following layout uses a <code>WearableDrawerLayout</code> with 72 three child views: a <code>FrameLayout</code> to contain the main content, a 73 navigation drawer, and an action drawer.</p> 74 75<pre> 76<android.support.wearable.view.drawer.WearableDrawerLayout 77 android:id="@+id/drawer_layout" 78 xmlns:android="http://schemas.android.com/apk/res/android" 79 xmlns:tools="http://schemas.android.com/tools" 80 android:layout_width="match_parent" 81 android:layout_height="match_parent" 82 tools:deviceIds="wear"> 83 84 <FrameLayout 85 android:layout_width="match_parent" 86 android:layout_height="match_parent" 87 android:id="@+id/content_frame"/> 88 89 <android.support.wearable.view.drawer.WearableNavigationDrawer 90 android:id="@+id/top_navigation_drawer" 91 android:layout_width="match_parent" 92 android:layout_height="match_parent"/> 93 94 <android.support.wearable.view.drawer.WearableActionDrawer 95 android:id="@+id/bottom_action_drawer" 96 android:layout_width="match_parent" 97 android:layout_height="match_parent"/> 98 99</android.support.wearable.view.drawer.WearableDrawerLayout> 100 101</pre> 102<h2 id="initialize">Initialize the Drawer List</h2> 103<p>One of the first things you need to do in your activity is to initialize the 104drawers list of items. You should implement {@code WearableNavigationDrawerAdapter} 105to populate the navigation drawer contents. To populate the action drawer with 106a list of actions, inflate an XML file into the Menu (via MenuInflater).</p> 107 108<p>The following code snippet shows how to initialize the contents of your drawers: 109</p> 110<pre> 111public class MainActivity extends WearableActivity implements 112WearableActionDrawer.OnMenuItemClickListener{ 113 private WearableDrawerLayout mwearableDrawerLayout; 114 private WearableNavigationDrawer mWearableNavigationDrawer; 115 private WearableActionDrawer mWearableActionDrawer; 116 117 ... 118 119 @Override 120 public void onCreate(Bundle savedInstanceState) { 121 super.onCreate(savedInstanceState); 122 setContentView(R.layout.activity_main); 123 124 ...... 125 126 127 // Main Wearable Drawer Layout that wraps all content 128 mWearableDrawerLayout = (WearableDrawerLayout) findViewById(R.id.drawer_layout); 129 130 // Top Navigation Drawer 131 mWearableNavigationDrawer = (WearableNavigationDrawer) findViewById(R.id.top_navigation_drawer); 132 mWearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this)); 133 134 // Peeks Navigation drawer on the top. 135 mWearableDrawerLayout.peekDrawer(Gravity.TOP); 136 137 // Bottom Action Drawer 138 mWearableActionDrawer = (WearableActionDrawer) findViewById(R.id.bottom_action_drawer); 139 140 // Populate Action Drawer Menu 141 Menu menu = mWearableActionDrawer.getMenu(); 142 MenuInflater inflater = getMenuInflater(); 143 inflater.inflate(R.menu.action_drawer_menu, menu); 144 mWearableActionDrawer.setOnMenuItemClickListener(this); 145 146 // Peeks action drawer on the bottom. 147 mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM); 148 } 149} 150 151</pre> 152<h2 id="creating">Create a Custom View Drawer</h2> 153 154<p>To use custom views in drawers, add <code>WearableDrawerView</code> to the 155<code>WearableDrawerLayout</code>. To set the contents of the drawer, call <code> 156<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> 157 instead of manually adding the view to the hierarchy. You must also specify the 158 drawer position with the <code>android:layout_gravity</code> attribute. </p> 159<p> The following example specifies a top drawer:</p> 160<pre> 161<android.support.wearable.view.drawer.WearableDrawerLayout> 162 <FrameLayout 163 android:id=”@+id/content” /> 164 165 <WearableDrawerView 166 android:layout_width=”match_parent” 167 andndroid:layout_height=”match_parent” 168 android:layout_gravity=”top”> 169 <FrameLayout 170 android:id=”@+id/top_drawer_content” /> 171 </WearableDrawerView> 172</android.support.wearable.view.drawer.WearableDrawerView> 173 174</pre> 175 176<h2 id="listen to events">Listen for Drawer Events</h2> 177<p>To listen for drawer events, call {@code setDrawerStateCallback()}on your 178{@code WearableDrawerLayout} and pass it an implementation of 179{@code WearableDrawerLayout.DrawerStateCallback}. This interface provides callbacks 180 for drawer events such as <code>onDrawerOpened()</code>, 181 <code>onDrawerClosed(),</code> and <code>onDrawerStatechanged()</code>.</p> 182 183<h2 id="peeking">Peeking Drawers</h2> 184<p>To set the drawers to temporarily appear, call <code>peekDrawer()</code> on 185your {@code WearableDrawerLayout} and pass it the {@code Gravity} of the drawer. 186 This feature is especially useful because it allows immediate access to the 187 alternate drawer views or actions associated with it. </p> 188 189<pre>{@code mWearableDrawerLayout.peekDrawer</code>(<code>Gravity.BOTTOM);}</pre> 190 191<p>You can also call {@code setPeekContent()} on your drawer to display a custom 192 view when the drawer is peeking.</p> 193
