Gitiles
Code Review Sign In
gerrit.witaqua.org / frameworks_base / 06a864413f03627ba7671d1c19ae114e3afaad4b / . / docs / html / design / patterns / actionbar.html
blob: 99ae2d75ee730b539b1f9dd0446075238e94f930 [file] [log] [blame]
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>
6
7Android Design - Action Bar
8 </title>
9 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
10 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
11 <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
12 <link rel="stylesheet" href="../static/default.css">
13
14 </head>
15 <body>
16
17 <div id="page-container">
18
19 <div id="page-header"><a href="../index.html">Android Design</a></div>
20
21 <div id="main-row">
22
23 <ul id="nav">
24
25 <li class="nav-section">
26 <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
27 <ul>
28 <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
29 <li><a href="../get-started/principles.html">Design Principles</a></li>
30 <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
31 </ul>
32 </li>
33
34 <li class="nav-section">
35 <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
36 <ul>
37 <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
38 <li><a href="../style/themes.html">Themes</a></li>
39 <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
40 <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
41 <li><a href="../style/typography.html">Typography</a></li>
42 <li><a href="../style/color.html">Color</a></li>
43 <li><a href="../style/iconography.html">Iconography</a></li>
44 <li><a href="../style/writing.html">Writing Style</a></li>
45 </ul>
46 </li>
47
48 <li class="nav-section">
49 <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
50 <ul>
51 <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
52 <li><a href="../patterns/gestures.html">Gestures</a></li>
53 <li><a href="../patterns/app-structure.html">App Structure</a></li>
54 <li><a href="../patterns/navigation.html">Navigation</a></li>
55 <li><a href="../patterns/actionbar.html">Action Bar</a></li>
56 <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
57 <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
58 <li><a href="../patterns/selection.html">Selection</a></li>
59 <li><a href="../patterns/notifications.html">Notifications</a></li>
60 <li><a href="../patterns/compatibility.html">Compatibility</a></li>
61 <li><a href="../patterns/pure-android.html">Pure Android</a></li>
62 </ul>
63 </li>
64
65 <li class="nav-section">
66 <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
67 <ul>
68 <li><a href="../building-blocks/tabs.html">Tabs</a></li>
69 <li><a href="../building-blocks/lists.html">Lists</a></li>
70 <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
71 <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
72 <li><a href="../building-blocks/spinners.html">Spinners</a></li>
73 <li><a href="../building-blocks/buttons.html">Buttons</a></li>
74 <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
75 <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
76 <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
77 <li><a href="../building-blocks/switches.html">Switches</a></li>
78 <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
79 <li><a href="../building-blocks/pickers.html">Pickers</a></li>
80 </ul>
81 </li>
82
83 <li>
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]84 <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]85 </li>
86
87 </ul>
88
89 <div id="content">
90
91
92 <div class="layout-content-row content-header">
93 <div class="layout-content-col span-9">
94 <h2>Action Bar</h2>
95 </div>
96 <div class="paging-links layout-content-col span-4">
97 <a href="#" class="prev-page-link">Previous</a>
98 <a href="#" class="next-page-link">Next</a>
99 </div>
100 </div>
101
102
103
104
105<img src="../static/content/action_bar_pattern_overview.png">
106
107<p>The <em>action bar</em> is arguably the most important structural element of an Android app. It's a
108dedicated piece of real estate at the top of each screen that is generally persistent throughout the
109app.</p>
110<p><strong>The main purpose of the action bar is to</strong>:</p>
111<ul>
112<li>Make important actions (such as <em>New</em> or <em>Search</em>, etc) prominent and accessible in a predictable
113 way.</li>
114<li>Support consistent navigation and view switching within apps.</li>
115<li>Reduce clutter by providing an action overflow for rarely used actions.</li>
116<li>Provide a dedicated space for giving your app an identity.</li>
117</ul>
118<p>If you're new to writing Android apps, note that the action bar is one of the most important design
119elements you can implement. Following the guidelines described here will go a long way toward making
120your app's interface consistent with the core Android apps.</p>
121<h2>General Organization</h2>
122<p>The action bar is split into four different functional areas that apply to most apps.</p>
123<img src="../static/content/action_bar_basics.png">
124
125<div class="layout-content-row">
126 <div class="layout-content-col span-7 with-callouts">
127
128 <ol>
129 <li class="value-1"><h4>App icon</h4>
130 <p>
131
132The app icon establishes your app's identity. It can be replaced with a different logo or branding if
133you wish.
134Important: If the app is currently not displaying the top-level screen, be sure to display the Up
135caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of
136Up navigation, see the "Navigation" pattern.
137
138<div class="figure">
139 <img src="../static/content/action_bar_pattern_up_app_icon.png">
140 <div class="figure-caption">
141 App icon with and without "up" affordance.
142 </div>
143</div>
144
145 </p>
146 </li>
147 </ol>
148
149 </div>
150 <div class="layout-content-col span-6 with-callouts">
151
152 <ol>
153 <li class="value-2"><h4>View control</h4>
154 <p>
155
156If your app displays data in different views, this segment of the action bar allows users to switch
157views. Examples of view-switching controls are drop-down menus or tab controls.
158
159 </p>
160 <p>
161
162If your app doesn't support different views, you can also use this space to display non-interactive
163content, such as an app title or longer branding information.
164
165 </p>
166 </li>
167 <li class="value-3"><h4>Action buttons</h4>
168 <p>
169
170Show the most important actions of your app in the actions section. Actions that don't fit in the
171action bar are moved automatically to the action overflow.
172
173 </p>
174 </li>
175 <li class="value-4"><h4>Action overflow</h4>
176 <p>
177
178Move less often used actions to the action overflow.
179
180 </p>
181 </li>
182 </ol>
183
184 </div>
185</div>
186
187
188<h2>Adapting to Rotation and Different Screen Sizes</h2>
189<p>One of the most important UI issues to consider when creating an app is how to adjust to screen
190rotation on different screen sizes.</p>
191<p>You can adapt to such changes by using <em>split action bars</em>, which allow you to distribute action bar
192content across multiple bars located below the main action bar or at the bottom of the screen.</p>
193
194<img src="../static/content/action_bar_pattern_rotation.png">
195<div class="figure-caption">
196 Split action bar showing action buttons at the bottom of the screen in vertical orientation.
197</div>
198
199<h2>Layout Considerations for Split Action Bars</h2>
200
201<div class="layout-content-row">
202 <div class="layout-content-col span-8 with-callouts">
203
204<p>When splitting up content across multiple action bars, you generally have three possible locations
205for action bar content:</p>
206<ol>
207<li><strong>Main action bar</strong></li>
208<li><strong>Top bar</strong></li>
209<li><strong>Bottom bar</strong></li>
210</ol>
211<p>If the user can navigate up the hierarchy from a given screen, the main action bar contains the up
212caret, at a minimum.</p>
213<p>To allow the user to quickly switch between the views your app provides, use tabs or a spinner in
214the top bar.</p>
215<p>To display actions and, if necessary, the action overflow, use the bottom bar.</p>
216
217 </div>
218 <div class="layout-content-col span-3">
219
220 <img src="../static/content/action_bar_pattern_considerations.png">
221
222 </div>
223</div>
224
225<h2>Contextual Action Bars</h2>
226<p>A <em>contextual action bar (CAB)</em> is a temporary action bar that overlays the app's action bar for the
227duration of a particular sub-task. CABs are most typically used for tasks that involve acting on
228selected data or text.</p>
229
230<img src="../static/content/action_bar_cab.png">
231<div class="figure-caption">
232 Contextual action bar shown in Browser and Gmail
233</div>
234
235<p>The selection CAB appears after a long press on a selectable data item triggers selection mode.</p>
236<p><strong>From here the user can</strong>:</p>
237<ul>
238<li>Select additional elements by touching them.</li>
239<li>Trigger an action from the CAB that applies to all selected data items. The CAB then
240 automatically dismisses itself.</li>
241<li>Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button. This removes
242 the CAB along with all selection highlights.</li>
243</ul>
244<p>Use CABs whenever you allow the user to select data via long press. You can control the action
245content of a CAB in order to insert the actions you would like the user to be able to perform.</p>
246<p>For more information, refer to the "Selection" pattern.</p>
247<h2>Action Bar Elements</h2>
248<h4>Tabs</h4>
249<p><em>Tabs</em> display app views concurrently and make it easy to explore and switch between them. Use tabs
250if you expect your users to switch views frequently.</p>
251
252<img src="../static/content/tabs_youtube.png">
253
254<p>There are two types of tabs: fixed and scrollable.</p>
255
256<div class="layout-content-row">
257 <div class="layout-content-col span-6">
258
259<h4>Scrollable tabs</h4>
260<p><em>Scrollable tabs</em> always take up the entire width of the bar, with the currently active view item in
261the center, and therefore need to live in a dedicated bar. Scrollable tabs can themselves be
262scrolled horizontally to bring more tabs into view.</p>
263<p>Use scrollable tabs if you have a large number of views or if you're unsure how many views will be
264displayed because your app inserts views dynamically (for example, open chats in a messaging app
265that the user can navigate between). Scrollable tabs should always allow the user to navigate
266between the views by swiping left or right on the content area as well as swiping the tabs
267themselves.</p>
268
269 </div>
270 <div class="layout-content-col span-7">
271
272 <video width="400" class="with-shadow play-on-hover" autoplay>
273 <source src="../static/content/tabs_scrolly.mp4" type="video/mp4">
274 <source src="../static/content/tabs_scrolly.webm" type="video/webm">
275 <source src="../static/content/tabs_scrolly.ogv" type="video/ogg">
276 </video>
277 <div class="figure-caption">
278 Scrolling tabs in Android Market.
279 <div class="video-instructions">&nbsp;</div>
280 </div>
281
282 </div>
283</div>
284
285<div class="layout-content-row">
286 <div class="layout-content-col span-6">
287
288<h4>Fixed tabs</h4>
289<p><em>Fixed tabs</em> are always visible on the screen, and can't be moved out of the way like scrollable
290tabs. Fixed tabs in the main action bar can move to the top bar when the screen orientation changes.</p>
291
292 </div>
293 <div class="layout-content-col span-7">
294
295 <img src="../static/content/action_bar_pattern_default_tabs.png">
296 <div class="figure-caption">
297 Default fixed tabs shown in Holo Dark &amp; Light.
298 </div>
299
300 </div>
301</div>
302
303<div class="layout-content-row">
304 <div class="layout-content-col span-6">
305
306<h4>Spinners</h4>
307<p>A <em>spinner</em> is a drop-down menu that allows users to switch between views of your app. </p>
308<p><strong>Use spinners rather than tabs in the main action bar if</strong>:</p>
309<ul>
310<li>You don't want to give up the vertical screen real estate for a dedicated tab bar.</li>
311<li>You expect your app's users to switch views infrequently.</li>
312</ul>
313
314 </div>
315 <div class="layout-content-col span-7">
316
317 <img src="../static/content/action_bar_pattern_spinner.png">
318 <div class="figure-caption">
319 Action bar spinner from Calendar application.
320 </div>
321
322 </div>
323</div>
324
325<h4>Action buttons</h4>
326<p><em>Action buttons</em> on the action bar surface your app's most important activities. Think about which
327buttons will get used most often, and order them accordingly. Depending on available screen real
328estate, the system shows your most important actions as action buttons and moves the rest to the
329action overflow.</p>
330
331<img src="../static/content/action_bar_pattern_action_icons.png">
332<div class="figure-caption">
333 A sampling of action buttons used throughout the Gmail application.
334</div>
335
336<p>For guidance on prioritizing actions, use the FIT scheme.</p>
337
338<div class="layout-content-row">
339 <div class="layout-content-col span-4">
340
341<p><strong>F &mdash; Frequent</strong></p>
342<ul>
343<li>Will people use this action at least 7 out of 10 times they visit the screen?</li>
344<li>Will they typically use it several times in a row?</li>
345<li>Would taking an extra step every time truly be burdensome?</li>
346</ul>
347
348 </div>
349 <div class="layout-content-col span-4">
350
351<p><strong>I &mdash; Important</strong></p>
352<ul>
353<li>Do you want everyone to discover this action because it's especially cool or a selling point?</li>
354<li>Is it something that needs to be effortless in the rare cases it's needed?</li>
355</ul>
356
357 </div>
358 <div class="layout-content-col span-4">
359
360<p><strong>T &mdash; Typical</strong></p>
361<ul>
362<li>Is it typically presented as a first-class action in similar apps?</li>
363<li>Given the context, would people be surprised if it were buried in the action overflow?</li>
364</ul>
365
366 </div>
367</div>
368
369<p>If either F, I, or T apply, then it's appropriate for the action bar. Otherwise, it belongs in the
370action overflow.</p>
371
372<div class="layout-content-row">
373 <div class="layout-content-col span-6">
374
375<h4>Action overflow</h4>
376<p>The action overflow in the action bar provides access to your app's less frequently used actions.
377The overflow icon only appears on phones that have no menu hardware keys. Phones with menu keys
378display the action overflow when the user presses the key.</p>
379
380 </div>
381 <div class="layout-content-col span-7">
382
383 <img src="../static/content/action_bar_pattern_overflow.png">
384 <div class="figure-caption">
385 Action overflow is pinned to the right side.
386 </div>
387
388 </div>
389</div>
390
391<p>How many actions will fit in the main action bar? Action bar capacity is controlled by the following
392rules:</p>
393<ul>
394<li>Action buttons in the main action bar may not occupy more than 50% of the bar's width. Action
395 buttons on bottom action bars can use the entire width.</li>
396<li>The screen width in density-independent pixels
397 (<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym>)
398 determine the number of items that will fit in the main action bar:<ul>
399<li>smaller than 360 dp = 2 icons</li>
400<li>360-499 dp = 3 icons</li>
401<li>500-599 dp = 4 icons</li>
402<li>600 dp and larger = 5 icons</li>
403</ul>
404</li>
405</ul>
406
407<img src="../static/content/action_bar_pattern_table.png">
408<div class="figure-caption">
409 In the above table "o" denotes an action bar item and "=" an overflow icon.
410</div>
411
412<h4>Sharing data</h4>
413<p>Whenever your app permits sharing of data, such as images or movie clips, use a <em>share action
414provider</em> in your action bar. The share action provider is designed to speed up sharing by
415displaying the most recently used sharing service next to a spinner button that contains other
416sharing options.</p>
417
418<img src="../static/content/action_bar_pattern_share_pack.png">
419<div class="figure-caption">
420 The Gallery app's share action provider with extended spinner for additional sharing options.
421</div>
422
423<h2>Action Bar Checklist</h2>
424<p>When planning your split action bars, ask yourself questions like these:</p>
425<h4>How important is view navigation to the task?</h4>
426<p>If view navigation is very important to your app, use tabs (for fastest view-switching) or spinners.</p>
427<h4>Which of the app's actions need to be consistently available directly from the action bar, and which can be moved to the action overflow?</h4>
428<p>Use the <acronym title="Frequent, Important or Typical">FIT</acronym> scheme to decide if actions
429are displayed at the top-level or can be moved to the action overflow. If the number of top-level
430actions exceeds the capacity of the main action bar, display them separately in a bottom action bar.</p>
431<h4>What else is important enough to warrant continuous display?</h4>
432<p>Sometimes it is important to display contextual information for your app that's always visible.
433Examples are the number of unread messages in a messaging inbox view or the Now Playing information
434in a music player. Carefully plan which important information you would like to display and
435structure your action bars accordingly.</p>
436
437
438
439
440 <div class="layout-content-row content-footer">
441 <div class="paging-links layout-content-col span-9">&nbsp;</div>
442 <div class="paging-links layout-content-col span-4">
443 <a href="#" class="prev-page-link">Previous</a>
444 <a href="#" class="next-page-link">Next</a>
445 </div>
446 </div>
447
448 </div>
449
450 </div>
451
452 <div id="page-footer">
453
454 <p id="copyright">
455 Except as noted, this content is licensed under
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]456 <a href="http://creativecommons.org/licenses/by/2.5/">
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]457 Creative Commons Attribution 2.5</a>.<br>
458 For details and restrictions, see the
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]459 <a href="http://developer.android.com/license.html">Content License</a>.
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]460 </p>
461
462 <p>
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]463 <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
464 <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
465 <a href="http://www.android.com/branding.html">Brand Guidelines</a>
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]466 </p>
467
468 </div>
469 </div>
470
471 <script src="../static/jquery-1.6.2.min.js"></script>
472 <script>
473 var SITE_ROOT = '../';
474 </script>
475 <script src="../static/default.js"></script>
476
477
478 <script type="text/javascript">
479 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
480 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
481 </script>
482 <script type="text/javascript">
483 var pageTracker = _gat._getTracker("UA-5831155-1");
484 pageTracker._trackPageview();
485 </script>
486 </body>
487</html>