Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Action Bar |
Scott Main | e21406c | 2013-03-18 15:50:55 -0700 | [diff] [blame] | 2 | page.tags="actionbar","navigation" |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 4 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 5 | <img src="{@docRoot}design/media/action_bar_pattern_overview.png"> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 6 | |
Scott Main | 62cd3ec | 2013-05-13 16:27:10 -0700 | [diff] [blame] | 7 | <a class="notice-developers" href="{@docRoot}guide/topics/ui/actionbar.html"> |
| 8 | <div> |
| 9 | <h3>Developer Docs</h3> |
| 10 | <p>Action Bar</p> |
| 11 | </div> |
| 12 | </a> |
| 13 | |
| 14 | |
Peter Ng | 0212363 | 2012-08-06 11:44:48 -0700 | [diff] [blame] | 15 | <p>The <em>action bar</em> is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app.</p> |
| 16 | <p><strong>It provides several key functions</strong>:</p> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 17 | <ul> |
Peter Ng | 0212363 | 2012-08-06 11:44:48 -0700 | [diff] [blame] | 18 | <li>Makes important actions prominent and accessible in a predictable way (such as <em>New</em> or <em>Search</em>).</li> |
| 19 | <li>Supports consistent navigation and view switching within apps.</li> |
| 20 | <li>Reduces clutter by providing an action overflow for rarely used actions.</li> |
| 21 | <li>Provides a dedicated space for giving your app an identity.</li> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 22 | </ul> |
Peter Ng | 0212363 | 2012-08-06 11:44:48 -0700 | [diff] [blame] | 23 | <p>If you're new to writing Android apps, note that the action bar is one of the most important design elements you can implement. Following the guidelines described here will go a long way toward making your app's interface consistent with the core Android apps.</p> |
Roman Nurik | a53b3bf | 2012-02-29 11:59:32 -0800 | [diff] [blame] | 24 | <h2 id="organization">General Organization</h2> |
| 25 | |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 26 | <p>The action bar is split into four different functional areas that apply to most apps.</p> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 27 | <img src="{@docRoot}design/media/action_bar_basics.png"> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 28 | |
| 29 | <div class="layout-content-row"> |
| 30 | <div class="layout-content-col span-7 with-callouts"> |
| 31 | |
| 32 | <ol> |
| 33 | <li class="value-1"><h4>App icon</h4> |
| 34 | <p> |
| 35 | |
Roman Nurik | a53b3bf | 2012-02-29 11:59:32 -0800 | [diff] [blame] | 36 | The app icon establishes your app's identity. It can be replaced with a different logo or branding |
| 37 | if you wish. |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 38 | Important: If the app is currently not displaying the top-level screen, be sure to display the Up |
| 39 | caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 40 | Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern. |
Scott Main | 59ea115 | 2012-06-15 14:52:01 -0700 | [diff] [blame] | 41 | </p> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 42 | |
Scott Main | 59ea115 | 2012-06-15 14:52:01 -0700 | [diff] [blame] | 43 | <img src="{@docRoot}design/media/action_bar_pattern_up_app_icon.png"> |
| 44 | <div class="figure-caption"> |
| 45 | App icon with and without "up" affordance. |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 46 | </div> |
| 47 | |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 48 | </li> |
| 49 | </ol> |
| 50 | |
| 51 | </div> |
| 52 | <div class="layout-content-col span-6 with-callouts"> |
| 53 | |
| 54 | <ol> |
| 55 | <li class="value-2"><h4>View control</h4> |
| 56 | <p> |
| 57 | |
| 58 | If your app displays data in different views, this segment of the action bar allows users to switch |
Scott Main | 62cd3ec | 2013-05-13 16:27:10 -0700 | [diff] [blame] | 59 | views. Examples of view-switching controls are drop-down menus or tab controls. For more information on view-switching, see the <a href="{@docRoot}design/patterns/app-structure.html">App Structure</a> pattern. |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 60 | |
| 61 | </p> |
| 62 | <p> |
| 63 | |
| 64 | If your app doesn't support different views, you can also use this space to display non-interactive |
| 65 | content, such as an app title or longer branding information. |
| 66 | |
| 67 | </p> |
| 68 | </li> |
| 69 | <li class="value-3"><h4>Action buttons</h4> |
| 70 | <p> |
| 71 | |
| 72 | Show the most important actions of your app in the actions section. Actions that don't fit in the |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 73 | action bar are moved automatically to the action overflow. Long-press on an icon to view the action's name. |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 74 | |
| 75 | </p> |
| 76 | </li> |
| 77 | <li class="value-4"><h4>Action overflow</h4> |
| 78 | <p> |
| 79 | |
| 80 | Move less often used actions to the action overflow. |
| 81 | |
| 82 | </p> |
| 83 | </li> |
| 84 | </ol> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 85 | </div> |
| 86 | </div> |
| 87 | |
Roman Nurik | a53b3bf | 2012-02-29 11:59:32 -0800 | [diff] [blame] | 88 | <h2 id="adapting-rotation">Adapting to Rotation and Different Screen Sizes</h2> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 89 | |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 90 | <p>One of the most important UI issues to consider when creating an app is how to adjust to screen |
| 91 | rotation on different screen sizes.</p> |
| 92 | <p>You can adapt to such changes by using <em>split action bars</em>, which allow you to distribute action bar |
| 93 | content across multiple bars located below the main action bar or at the bottom of the screen.</p> |
| 94 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 95 | <img src="{@docRoot}design/media/action_bar_pattern_rotation.png"> |
Dirk Dougherty | 3e529b4 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 96 | <!-- <div class="figure-caption"> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 97 | Split action bar showing action buttons at the bottom of the screen in vertical orientation. |
Dirk Dougherty | 3e529b4 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 98 | </div> --> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 99 | |
Roman Nurik | a53b3bf | 2012-02-29 11:59:32 -0800 | [diff] [blame] | 100 | <h2 id="considerations-split-action-bars">Layout Considerations for Split Action Bars</h2> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 101 | |
| 102 | <div class="layout-content-row"> |
| 103 | <div class="layout-content-col span-8 with-callouts"> |
| 104 | |
| 105 | <p>When splitting up content across multiple action bars, you generally have three possible locations |
| 106 | for action bar content:</p> |
| 107 | <ol> |
| 108 | <li><strong>Main action bar</strong></li> |
| 109 | <li><strong>Top bar</strong></li> |
| 110 | <li><strong>Bottom bar</strong></li> |
| 111 | </ol> |
| 112 | <p>If the user can navigate up the hierarchy from a given screen, the main action bar contains the up |
| 113 | caret, at a minimum.</p> |
| 114 | <p>To allow the user to quickly switch between the views your app provides, use tabs or a spinner in |
| 115 | the top bar.</p> |
| 116 | <p>To display actions and, if necessary, the action overflow, use the bottom bar.</p> |
| 117 | |
| 118 | </div> |
Scott Main | 59ea115 | 2012-06-15 14:52:01 -0700 | [diff] [blame] | 119 | <div class="layout-content-col span-5"> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 120 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 121 | <img src="{@docRoot}design/media/action_bar_pattern_considerations.png"> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 122 | |
| 123 | </div> |
| 124 | </div> |
| 125 | |
Scott Main | e04c454 | 2013-06-18 21:16:25 -0700 | [diff] [blame] | 126 | <h2 id="ActionButtons">Action Buttons</h2> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 127 | <p><em>Action buttons</em> on the action bar surface your app's most important activities. Think about which |
| 128 | buttons will get used most often, and order them accordingly. Depending on available screen real |
| 129 | estate, the system shows your most important actions as action buttons and moves the rest to the |
Scott Main | 62cd3ec | 2013-05-13 16:27:10 -0700 | [diff] [blame] | 130 | action overflow. The action bar should show only those actions that are available to the user. If an action is unavailable in the current context, hide it. Do not show it as disabled.</p> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 131 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 132 | <img src="{@docRoot}design/media/action_bar_pattern_action_icons.png"> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 133 | <div class="figure-caption"> |
| 134 | A sampling of action buttons used throughout the Gmail application. |
| 135 | </div> |
| 136 | |
| 137 | <p>For guidance on prioritizing actions, use the FIT scheme.</p> |
| 138 | |
| 139 | <div class="layout-content-row"> |
| 140 | <div class="layout-content-col span-4"> |
| 141 | |
| 142 | <p><strong>F — Frequent</strong></p> |
| 143 | <ul> |
| 144 | <li>Will people use this action at least 7 out of 10 times they visit the screen?</li> |
| 145 | <li>Will they typically use it several times in a row?</li> |
| 146 | <li>Would taking an extra step every time truly be burdensome?</li> |
| 147 | </ul> |
| 148 | |
| 149 | </div> |
| 150 | <div class="layout-content-col span-4"> |
| 151 | |
| 152 | <p><strong>I — Important</strong></p> |
| 153 | <ul> |
| 154 | <li>Do you want everyone to discover this action because it's especially cool or a selling point?</li> |
| 155 | <li>Is it something that needs to be effortless in the rare cases it's needed?</li> |
| 156 | </ul> |
| 157 | |
| 158 | </div> |
| 159 | <div class="layout-content-col span-4"> |
| 160 | |
| 161 | <p><strong>T — Typical</strong></p> |
| 162 | <ul> |
| 163 | <li>Is it typically presented as a first-class action in similar apps?</li> |
| 164 | <li>Given the context, would people be surprised if it were buried in the action overflow?</li> |
| 165 | </ul> |
| 166 | |
| 167 | </div> |
| 168 | </div> |
| 169 | |
| 170 | <p>If either F, I, or T apply, then it's appropriate for the action bar. Otherwise, it belongs in the |
| 171 | action overflow.</p> |
| 172 | |
Roman Nurik | bb9bffb | 2012-01-26 14:56:28 -0800 | [diff] [blame] | 173 | <p> |
| 174 | |
| 175 | Pre-defined glyphs should be used for certain common actions such as "refresh" and "share." The |
| 176 | download link below provides a package with icons that are scaled for various screen densities and |
| 177 | are suitable for use with the Holo Light and Holo Dark themes. The package also includes unstyled |
| 178 | icons that you can modify to match your theme, in addition to Adobe® Illustrator® source |
| 179 | files for further customization. |
| 180 | |
| 181 | </p> |
| 182 | <p> |
| 183 | |
Scott Main | fe3057f | 2012-10-03 15:23:06 -0700 | [diff] [blame] | 184 | <a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons (@actionbar page)']);" |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 185 | href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a> |
Roman Nurik | bb9bffb | 2012-01-26 14:56:28 -0800 | [diff] [blame] | 186 | |
| 187 | </p> |
| 188 | |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 189 | <div class="layout-content-row"> |
| 190 | <div class="layout-content-col span-6"> |
| 191 | |
| 192 | <h4>Action overflow</h4> |
| 193 | <p>The action overflow in the action bar provides access to your app's less frequently used actions. |
| 194 | The overflow icon only appears on phones that have no menu hardware keys. Phones with menu keys |
| 195 | display the action overflow when the user presses the key.</p> |
| 196 | |
| 197 | </div> |
| 198 | <div class="layout-content-col span-7"> |
| 199 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 200 | <img src="{@docRoot}design/media/action_bar_pattern_overflow.png"> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 201 | <div class="figure-caption"> |
| 202 | Action overflow is pinned to the right side. |
| 203 | </div> |
| 204 | |
| 205 | </div> |
| 206 | </div> |
| 207 | |
| 208 | <p>How many actions will fit in the main action bar? Action bar capacity is controlled by the following |
| 209 | rules:</p> |
| 210 | <ul> |
| 211 | <li>Action buttons in the main action bar may not occupy more than 50% of the bar's width. Action |
| 212 | buttons on bottom action bars can use the entire width.</li> |
| 213 | <li>The screen width in density-independent pixels |
| 214 | (<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym>) |
| 215 | determine the number of items that will fit in the main action bar:<ul> |
| 216 | <li>smaller than 360 dp = 2 icons</li> |
| 217 | <li>360-499 dp = 3 icons</li> |
| 218 | <li>500-599 dp = 4 icons</li> |
| 219 | <li>600 dp and larger = 5 icons</li> |
| 220 | </ul> |
| 221 | </li> |
| 222 | </ul> |
| 223 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 224 | <img src="{@docRoot}design/media/action_bar_pattern_table.png"> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 225 | <div class="figure-caption"> |
| 226 | In the above table "o" denotes an action bar item and "=" an overflow icon. |
| 227 | </div> |
| 228 | |
| 229 | <h4>Sharing data</h4> |
| 230 | <p>Whenever your app permits sharing of data, such as images or movie clips, use a <em>share action |
| 231 | provider</em> in your action bar. The share action provider is designed to speed up sharing by |
| 232 | displaying the most recently used sharing service next to a spinner button that contains other |
| 233 | sharing options.</p> |
| 234 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 235 | <img src="{@docRoot}design/media/action_bar_pattern_share_pack.png"> |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 236 | <div class="figure-caption"> |
| 237 | The Gallery app's share action provider with extended spinner for additional sharing options. |
| 238 | </div> |
| 239 | |
Scott Main | 62cd3ec | 2013-05-13 16:27:10 -0700 | [diff] [blame] | 240 | <h2 id="contextual">Contextual Action Bars</h2> |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 241 | |
Scott Main | 62cd3ec | 2013-05-13 16:27:10 -0700 | [diff] [blame] | 242 | <p>A <em>contextual action bar (CAB)</em> is a temporary action bar that overlays the app's action bar for the |
| 243 | duration of a particular sub-task. CABs are most typically used for tasks that involve acting on |
| 244 | selected data or text.</p> |
| 245 | |
| 246 | <img src="{@docRoot}design/media/action_bar_cab.png"> |
| 247 | <div class="figure-caption"> |
| 248 | Contextual action bar in Browser and Gmail |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 249 | </div> |
| 250 | |
Scott Main | 62cd3ec | 2013-05-13 16:27:10 -0700 | [diff] [blame] | 251 | <p>The selection CAB appears after a long press on a selectable data item triggers selection mode.</p> |
| 252 | <p><strong>From here the user can</strong>:</p> |
| 253 | <ul> |
| 254 | <li>Select additional elements by touching them.</li> |
| 255 | <li>Trigger an action from the CAB that applies to all selected data items. The CAB then |
| 256 | automatically dismisses itself.</li> |
| 257 | <li>Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button. This removes |
| 258 | the CAB along with all selection highlights.</li> |
| 259 | </ul> |
| 260 | <p>Use CABs whenever you allow the user to select data via long press. You can control the action |
| 261 | content of a CAB in order to insert the actions you would like the user to be able to perform.</p> |
| 262 | <p>For more information, refer to the <a href="{@docRoot}design/patterns/selection.html">Selection |
| 263 | pattern</a>.</p> |
| 264 | |
| 265 | |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 266 | |
Roman Nurik | a53b3bf | 2012-02-29 11:59:32 -0800 | [diff] [blame] | 267 | <h2 id="checklist">Action Bar Checklist</h2> |
| 268 | |
Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 269 | <p>When planning your split action bars, ask yourself questions like these:</p> |
| 270 | <h4>How important is view navigation to the task?</h4> |
| 271 | <p>If view navigation is very important to your app, use tabs (for fastest view-switching) or spinners.</p> |
| 272 | <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> |
| 273 | <p>Use the <acronym title="Frequent, Important or Typical">FIT</acronym> scheme to decide if actions |
| 274 | are displayed at the top-level or can be moved to the action overflow. If the number of top-level |
| 275 | actions exceeds the capacity of the main action bar, display them separately in a bottom action bar.</p> |
| 276 | <h4>What else is important enough to warrant continuous display?</h4> |
| 277 | <p>Sometimes it is important to display contextual information for your app that's always visible. |
| 278 | Examples are the number of unread messages in a messaging inbox view or the Now Playing information |
| 279 | in a music player. Carefully plan which important information you would like to display and |
Scott Main | 62cd3ec | 2013-05-13 16:27:10 -0700 | [diff] [blame] | 280 | structure your action bars accordingly.</p> |