1 page.title=Navigation Drawer 2 page.tags=DrawerLayout,SlidingPaneLayout 3 @jd:body 4 5 6 <a class="notice-developers" href="{@docRoot}training/implementing-navigation/nav-drawer.html"> 7 <div> 8 <h3>Developer Docs</h3> 9 <p>Creating a Navigation Drawer</p> 10 </div> 11 </a> 12 13 14 <p>The navigation drawer is a panel that transitions in from the left edge of the screen and 15 displays the apps main navigation options.</p> 16 17 18 <h4>Displaying the navigation drawer</h4> 19 20 <p>The user can bring the navigation drawer onto the screen by swiping from the left edge of the 21 screen or by touching the application icon on the action bar.</p> 22 23 <p>As the navigation drawer expands, it overlays the content but not the action bar. When the 24 drawer is fully extended, the action bar adjusts its content by replacing the current action 25 bar title with the app name and removing all actions that are contextual to the view underneath 26 the navigation drawer. The overflow menu with the standard action items for Settings and Help 27 remains visible.</p> 28 29 <img src="{@docRoot}design/media/navigation_drawer_overview.png"> 30 <div class="figure-caption"> 31 The user can open the drawer panel by touching the navigation drawer indicator. 32 </div> 33 34 <p>Because they are transient, navigation drawers make views less cluttered. You can also use 35 them at deeper levels in the navigation hierarchy, allowing users to switch to your app's most 36 important screens from anywhere in the app.</p> 37 38 <img src="{@docRoot}design/media/navigation_drawer_open_from_lower.png"> 39 <div class="figure-caption"> 40 Open the drawer from anywhere in your app by swiping from the left edge of the screen. 41 </div> 42 43 44 <h4>Dismissing the navigation drawer</h4> 45 46 <p> When the navigation drawer is expanded, the user can dismiss it in one of four ways: </p> 47 <ul> 48 <li>Touching the content outside the navigation drawer</li> 49 <li>Swiping to the left anywhere on the screen (including edge swipe from right)</li> 50 <li>Touching the app icon/title in the action bar</li> 51 <li>Pressing Back</li> 52 </ul> 53 54 55 <h2 id="WhenToUse"> When to Use the Navigation Drawer </h2> 56 57 <p> The navigation drawer is not a general replacement for top-level navigation via spinners 58 or tabs. The structure of your app should guide your choice of which pattern to use for 59 top-level switching. For more information on top-level switching mechanisms, see the 60 <a href="{@docRoot}design/patterns/app-structure.html">Application Structure</a> design pattern.</p> 61 <p> Here are some examples of where navigation drawers work best:</p> 62 63 <h4>More than 3 top-level views</h4> 64 <p> Navigation drawers are great for displaying a large number of navigation targets 65 concurrently. Use the navigation drawer if you have more than 3 unique top-level views. 66 If not, use fixed tabs for top-level organization to ease discovery and interaction.</p> 67 68 <h4>Cross-navigation from lower levels</h4> 69 <p> If your app requires cross-navigating between lower-level screens, consider using the 70 navigation drawer. Because it is accessible from anywhere in the app, the drawer enables 71 efficient navigation from lower-level screens to other important places in your app.</p> 72 73 <img src="{@docRoot}design/media/navigation_drawer_cross_nav.png"> 74 <div class="figure-caption"> 75 The navigation drawer makes cross-navigation at lower levels possible. 76 </div> 77 78 79 <h4>Deep navigation branches</h4> 80 <p> If you have particularly deep branches, navigating to the top-level of your app can become 81 repetitive and cumbersome with Up and Back alone. Since navigation drawers are accessible from 82 anywhere in the app, navigation up to the top level is faster and more efficient.</p> 83 84 <img src="{@docRoot}design/media/navigation_drawer_quick_to_top.png"> 85 <div class="figure-caption"> 86 The navigation drawer allows for quick jumps to the top-level of your app, removing the need 87 for repetitive Back or Up sequences. 88 </div> 89 90 91 <h2 id="Hubs">Navigation Hubs</h2> 92 93 <p>The navigation drawer is a reflection of your apps structure and displays its major 94 navigation hubs. Think of navigation hubs as those places in your app that a user will want 95 to visit frequently or use as a jumping-off point to other parts of the app. 96 At a minimum, the navigation hubs are the top-level views, since they correspond to your apps 97 major functional areas.</p> 98 <p> If your apps structure is deep, you can add screens from lower levels that your users will 99 likely visit often and make those navigation hubs as well.</p> 100 101 <img src="{@docRoot}design/media/navigation_drawer_navigation_hubs.png"> 102 <div class="figure-caption"> 103 The navigation drawer contains all of your app's navigation hubs. Include your top level 104 screens as well as important lower-level screens. 105 </div> 106 107 <div class="layout-content-row"> 108 <div class="layout-content-col span-8"> 109 <p> To facilitate access to the navigation drawer on navigation hubs, all screens that 110 correspond to an entry in your navigation drawer should show the navigation drawer indicator 111 next to the application icon in the action bar. Touching the app icon causes the navigation 112 drawer to slide in from the left. </p> 113 <p> All other lower-level screens show the traditional Up indicator next to the application 114 icon. The drawer is still accessible with an edge-swipe, but is not featured in the action bar.</p> 115 </div> 116 <div class="layout-content-col span-5"> 117 <img src="{@docRoot}design/media/navigation_drawer_indicator_big.png"> 118 <div class="figure-caption"> 119 App icon with navigation drawer indicator. 120 </div> 121 </div> 122 </div> 123 124 125 <h2 id="Content">Content of the Navigation Drawer</h2> 126 127 <p> Keep the content of the navigation drawer focused on app navigation. Expose the navigation 128 hubs of your app as list items inside the navigation drawer - one item per row. 129 130 <div class="layout-content-row"> 131 <div class="layout-content-col span-8"> 132 <h4>Titles, icons, and counters</h4> 133 <p> You can structure navigation targets by adding titles. The titles are not interactive, 134 but just organize navigation targets into functional topics. If you have many navigation 135 targets, use titles to orient the user within the drawer.</p> 136 <p> Navigation targets can have optional leading icons as well as trailing counters. Use 137 the counters to inform users about a changed state of data in the corresponding view.</p> 138 </div> 139 <div class="layout-content-col span-5"> 140 <img src="{@docRoot}design/media/navigation_drawer_titles_icons.png"> 141 <div class="figure-caption"> 142 Use titles and icons to organize your drawer. 143 </div> 144 </div> 145 </div> 146 147 <div class="layout-content-row"> 148 <div class="layout-content-col span-8"> 149 <img src="{@docRoot}design/media/navigation_drawer_collapse.png"> 150 <div class="figure-caption"> 151 Collapsible navigation items are split. Use the left side for navigation and the right 152 to collapse and expand items. 153 </div> 154 </div> 155 <div class="layout-content-col span-5"> 156 <h4>Collapsible navigation items</h4> 157 <p>If you have many views with some subordinate to others, consider collapsing them into one 158 expandable item to conserve space. 159 The parent in the navigation drawer then turns into a split item. The left side allows 160 navigation to the parent items view, and the right side collapses or expands the list of 161 child items. </p> 162 <p> At launch, the initial state of the collapsible items is up to you. As a rule, all 163 top-level view entries of the navigation drawer should be visible. If you have many collapsible 164 items, consider collapsing all items to allow the user to see the top-level views in their 165 entirety.</p> 166 <p> When the user opens the drawer from a lower-level screen, expand the associated branch 167 of the top-level view to give a stronger sense of place and highlight navigation opportunities 168 close to the users current 169 location in the app.</p> 170 </div> 171 </div> 172 173 174 <h2 id="ActionBar">Navigation Drawers and Action Bars</h2> 175 176 <p> When the user expands the navigation drawer, the task focus switches to selecting an item 177 from the drawer. Because the drawer does not overlay the action bar, users may not realize that 178 the items in the action bar do not pertain to the navigation drawer. </p> 179 <p> To reduce confusion, adjust the content of the action bar to the following, once the drawer 180 is fully expanded:</p> 181 <ul> 182 <li>App icon</li> 183 <li>App name</li> 184 <li>Remove actions from the action bar that are contextual to the underlying view (such as 185 Create new, Refresh). You may retain actions with global scope, such as Search.</li> 186 <li>Overflow menu with expected navigation targets, such as Settings and Help.</li> 187 </ul> 188 189 <img src="{@docRoot}design/media/navigation_drawer_open_overflow.png"> 190 <div class="figure-caption"> 191 Clean up the action bar when the drawer is fully expanded. Remove actions that are not needed 192 and display your app's name in the title area. 193 </div> 194 195 <h4>Actions</h4> 196 <div class="layout-content-row"> 197 <div class="layout-content-col span-6"> 198 <img src="{@docRoot}design/media/navigation_drawer_nav_and_actions.png"> 199 <div class="figure-caption"> 200 Keep actions on the right side of the action bar and in the overflow 201 </div> 202 </div> 203 <div class="layout-content-col span-6"> 204 <p> Dont place actions in the navigation drawer. Actions belong in the action bar, and the 205 user expects to see them there. Keep in mind that not all applications use the navigation 206 drawer pattern. It may be tempting to expose all your apps capabilities in a single place, 207 but keep the bigger picture in mind. Place your actions where all apps display them.</p> 208 </div> 209 </div> 210 <div class="layout-content-row"> 211 <div class="layout-content-col span-6"> 212 <p> This also applies to common navigation targets, such as access to Help or the apps 213 Settings. As per style guide convention Help and Settings are always located in the action 214 overflow.</p> 215 </div> 216 <div class="layout-content-col span-6"> 217 <img src="{@docRoot}design/media/navigation_drawer_settings_help.png"> 218 <div class="figure-caption"> 219 Keep Help and Settings in the overflow. 220 </div> 221 </div> 222 </div> 223 224 225 <h4>Contextual action bars</h4> 226 <p> Sometimes the user will be in a state where a contextual action bar (CAB) appears instead 227 of the apps action bar. This typically happens when the user selects text or selects multiple 228 items after a press-and-hold gesture. While the CAB is visible, you should still allow the 229 user to open the navigation drawer using an edge swipe. However, replace the CAB with the 230 standard action bar while the navigation drawer is open. When the user dismisses the drawer, 231 re-display the CAB.</p> 232 233 <img src="{@docRoot}design/media/navigation_drawer_CAB.png"> 234 <div class="figure-caption"> 235 Hide contextual action bars while the drawer is visible. 236 </div> 237 238 <p>If the user navigates away from a view with selected content, deselect the content before 239 before navigating to the new view.</p> 240 241 242 <h2 id="Interaction">Interaction Details</h2> 243 244 <h4>Introduce the user to the drawer at first use</h4> 245 <p> Upon first launch of your app, introduce the user to the navigation drawer by 246 automatically opening it. This ensures that users know about the navigation drawer and prompts 247 them to learn about the structure of your app by exploring its content. Continue showing the 248 drawer upon subsequent launches until the user actively expands the navigation drawer manually. 249 Once you know that the user understands how to open the drawer, launch the app with the 250 navigation drawer closed. </p> 251 252 <img src="{@docRoot}design/media/navigation_drawer_first_run.png"> 253 <div class="figure-caption"> 254 At first use, show the navigation drawer automatically to help the user learn the 255 functionality and structure of your app. 256 </div> 257 258 <h4>Give the user a quick peek</h4> 259 <p> If the user touches the very left edge of the screen (within 20 dp from the left), have the 260 drawer peek out as soon as the finger makes contact with the display. This promotes accidental 261 discovery and provides richer feedback. </p> 262 263 <img src="{@docRoot}design/media/navigation_drawer_peek.png"> 264 <div class="figure-caption"> 265 The navigation drawer peeks out when the user touches the very left edge of the screen. 266 </div> 267 268 <h4>Highlights</h4> 269 <p> When you open the navigation drawer from a screen that is represented inside the drawer, 270 highlight its entry in the drawer. Vice versa, if you open the drawer from a screen that is 271 not listed in the drawer, none of the items of the drawer should be highlighted.</p> 272 273 274 <h2 id="ImpactOnNav">Impact of Drawer on Overall App Navigation</h2> 275 276 <p>The navigation drawer is an alternative to other top-level navigation patterns. To make apps 277 with navigation drawers work consistently with apps that use a tab or spinner pattern, remember 278 that all navigation requirements for system Back and Up apply.</p> 279 <p>Pay special attention to the following situations:</p> 280 281 <h4>System Back at the top level of the app</h4> 282 <p>Touching System Back at the apps top level never opens the navigation drawer. Instead, 283 System Back behaves according to the navigation rules for the top level, such as navigating 284 to the previous app within the task or navigating to the Home screen.</p> 285 286 <img src="{@docRoot}design/media/navigation_drawer_top_out.png"> 287 <div class="figure-caption"> 288 System Back does not show the drawer, but behaves according to the navigation rules for 289 the top level. 290 </div> 291 292 <h4>System Back after cross navigation to lower hierarchy levels</h4> 293 <p>If the user navigates to a lower hierarchy screen from the navigation drawer and the screen 294 has a direct parent, then the Back stack is reset and Back points to the target screens parent. 295 This Back behavior is the same as when a user navigates into an app from a notification.</p> 296 297 <img src="{@docRoot}design/media/navigation_drawer_reset_backstack.png"> 298 <div class="figure-caption"> 299 Reset the Back stack if your lower-level navigation target has direct parents. 300 </div> 301 302 303 <h2 id="Style">Style</h2> 304 305 <p>The width of the navigation drawer depends on the content you want to display, but should be 306 between a minimum of 240 dp and a maximum of 320 dp. The height of the individual line items 307 should not fall below 48 dp. See the layout guideline below for recommendations on padding and 308 spacing.</p> 309 310 <img src="{@docRoot}design/media/navigation_drawer_layout.png"> 311 <div class="figure-caption"> 312 Layout guidelines for the navigation drawer. 313 </div> 314 315 316 <p>Pick the drawer background to best match your apps theme. See the following examples 317 for a Holo light and a Holo dark themed drawer.</p> 318 319 <img src="{@docRoot}design/media/navigation_drawer_holo_dark_light.png"> 320 <div class="figure-caption"> 321 Navigation drawers in Holo light and Holo dark themed apps. 322 </div> 323 324 325 <h2 id="Checklist">Navigation Drawer Checklist</h2> 326 327 <p>Even if you already support a similar navigation drawer, update your drawer to this 328 pattern to make sure that:</p> 329 <ul> 330 <li>The action bar remains in place and adjusts its content.</li> 331 <li>Your navigation drawer overlays the content.</li> 332 <li>Any view represented in the drawer has a navigation drawer indicator in its action bar 333 that allows the drawer to be opened by touching the app icon.</li> 334 <li>You take advantage of the new visual drawer transition.</li> 335 <li>Any view not represented in the drawer maintains the traditional Up indicator in its action bar.</li> 336 <li>You stay in sync with the general navigation patterns for Up and Back.</li> 337 </ul> 338 339
