Lines Matching full:drawer
1 page.title=Navigation Drawer
6 <a class="notice-developers" href="{@docRoot}training/implementing-navigation/nav-drawer.html">
9 <p>Creating a Navigation Drawer</p>
14 <p>The navigation drawer is a panel that transitions in from the left edge of the screen and
18 <h4>Displaying the navigation drawer</h4>
20 <p>The user can bring the navigation drawer onto the screen by swiping from the left edge of the
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
26 the navigation drawer. The overflow menu with the standard action items for Settings and Help
31 The user can open the drawer panel by touching the navigation drawer indicator.
40 Open the drawer from anywhere in your app by swiping from the left edge of the screen.
44 <h4>Dismissing the navigation drawer</h4>
46 <p> When the navigation drawer is expanded, the user can dismiss it in one of four ways: </p>
48 <li>Touching the content outside the navigation drawer</li>
55 <h2 id="WhenToUse"> When to Use the Navigation Drawer </h2>
57 <p> The navigation drawer is not a general replacement for top-level navigation via spinners
65 concurrently. Use the navigation drawer if you have more than 3 unique top-level views.
70 navigation drawer. Because it is accessible from anywhere in the app, the drawer enables
75 The navigation drawer makes cross-navigation at lower levels possible.
86 The navigation drawer allows for quick jumps to the top-level of your app, removing the need
93 <p>The navigation drawer is a reflection of your app?s structure and displays its major
103 The navigation drawer contains all of your app's navigation hubs. Include your top level
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
112 drawer to slide in from the left. </p>
114 icon. The drawer is still accessible with an edge-swipe, but is not featured in the action bar.</p>
119 App icon with navigation drawer indicator.
125 <h2 id="Content">Content of the Navigation Drawer</h2>
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.
135 targets, use titles to orient the user within the drawer.</p>
142 Use titles and icons to organize your drawer.
159 The parent in the navigation drawer then turns into a split item. The left side allows
163 top-level view entries of the navigation drawer should be visible. If you have many collapsible
166 <p> When the user opens the drawer from a lower-level screen, expand the associated branch
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
191 Clean up the action bar when the drawer is fully expanded. Remove actions that are not needed
204 <p> Don?t place actions in the navigation drawer. Actions belong in the action bar, and the
206 drawer pattern. It may be tempting to expose all your app?s capabilities in a single place,
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,
235 Hide contextual action bars while the drawer is visible.
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
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>
254 At first use, show the navigation drawer automatically to help the user learn the
260 drawer peek out as soon as the finger makes contact with the display. This promotes accidental
265 The navigation drawer peeks out when the user touches the very left edge of the screen.
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>
274 <h2 id="ImpactOnNav">Impact of Drawer on Overall App Navigation</h2>
276 <p>The navigation drawer is an alternative to other top-level navigation patterns. To make apps
282 <p>Touching System Back at the app?s top level never opens the navigation drawer. Instead,
288 System Back does not show the drawer, but behaves according to the navigation rules for
293 <p>If the user navigates to a lower hierarchy screen from the navigation drawer and the screen
305 <p>The width of the navigation drawer depends on the content you want to display, but should be
312 Layout guidelines for the navigation drawer.
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>
325 <h2 id="Checklist">Navigation Drawer Checklist</h2>
327 <p>Even if you already support a similar navigation drawer, update your drawer to this
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>
