Lines Matching full:navigation
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
15 displays the app?s main navigation options.</p>
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
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.
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
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
61 <p> Here are some examples of where navigation drawers work best:</p>
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.
68 <h4>Cross-navigation from lower levels</h4>
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>
75 The navigation drawer makes cross-navigation at lower levels possible.
79 <h4>Deep navigation branches</h4>
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>
86 The navigation drawer allows for quick jumps to the top-level of your app, removing the need
91 <h2 id="Hubs">Navigation Hubs</h2>
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
96 At a minimum, the navigation hubs are the top-level views, since they correspond to your app?s
99 likely visit often and make those navigation hubs as well.</p>
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
111 next to the application icon in the action bar. Touching the app icon causes the navigation
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.
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
136 <p> Navigation targets can have optional leading icons as well as trailing counters. Use
151 Collapsible navigation items are split. Use the left side for navigation and the right
156 <h4>Collapsible navigation items</h4>
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
163 top-level view entries of the navigation drawer should be visible. If you have many collapsible
167 of the top-level view to give a stronger sense of place and highlight navigation opportunities
174 <h2 id="ActionBar">Navigation Drawers and Action Bars</h2>
176 <p> When the user expands the navigation drawer, the task focus switches to selecting an item
178 the items in the action bar do not pertain to the navigation drawer. </p>
186 <li>Overflow menu with expected navigation targets, such as Settings and Help.</li>
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
212 <p> This also applies to common navigation targets, such as access to Help or the app?s
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,
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.
250 navigation drawer closed. </p>
254 At first use, show the navigation drawer automatically to help the user learn the
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,
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
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>
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
288 System Back does not show the drawer, but behaves according to the navigation rules for
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
299 Reset the Back stack if your lower-level navigation target has direct parents.
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.
321 Navigation drawers in Holo light and Holo dark themed apps.
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
336 <li>You stay in sync with the general navigation patterns for Up and Back.</li>
