Scott Main | 62cd3ec | 2013-05-13 16:27:10 -0700 | [diff] [blame] | 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 app’s 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 app’s 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 app’s |
| 97 | major functional areas.</p> |
| 98 | <p> If your app’s 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 item’s 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 user’s 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> Don’t 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 app’s 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 app’s |
| 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 app’s 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 app’s 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 screen’s 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 app’s 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 | |