1 page.title=App Structure 2 page.tags="navigation","layout","tablet" 3 @jd:body 4 5 <p>Apps come in many varieties that address very different needs. For example:</p> 6 <ul> 7 <li>Apps such as Calculator or Camera that are built around a single focused activity handled from a 8 single screen</li> 9 <li>Apps such as Phone whose main purpose is to switch between different activities without deeper 10 navigation</li> 11 <li>Apps such as Gmail or the Play Store that combine a broad set of data views with deep navigation</li> 12 </ul> 13 <p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p> 14 <h2 id="general-structure">General Structure</h2> 15 16 <p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is 17 deep and complex, category views connect top level and detail views.</p> 18 19 <div class="layout-content-row"> 20 <div class="layout-content-col span-9"> 21 22 <img src="{@docRoot}design/media/app_structure_overview.png"> 23 24 </div> 25 <div class="layout-content-col span-4"> 26 27 <h4>Top level views</h4> 28 <p>The top level of the app typically consists of the different views that your app supports. The views 29 either show different representations of the same data or expose an altogether different functional 30 facet of your app.</p> 31 <div class="vspace size-3"> </div> 32 33 <h4>Category views</h4> 34 <p>Category views allow you to drill deeper into your data.</p> 35 <div class="vspace size-11"> </div> 36 37 <h4>Detail/edit view</h4> 38 <p>The detail/edit view is where you consume or create data.</p> 39 40 </div> 41 </div> 42 43 <h2 id="top-level">Top Level</h2> 44 45 <p>The layout of your start screen requires special attention. This is the first screen people see 46 after launching your app, so it should be an equally rewarding experience for new and frequent 47 visitors alike.</p> 48 <p>Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure 49 your start screen experience accordingly.</p> 50 51 <div class="layout-content-row"> 52 <div class="layout-content-col span-5"> 53 54 <h4>Put content forward</h4> 55 <p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to 56 the meat of your app right away by making content the centerpiece of your start screen. Choose 57 layouts that are visually engaging and appropriate for the data type and screen size.</p> 58 59 </div> 60 <div class="layout-content-col span-8"> 61 62 <img src="{@docRoot}design/media/app_structure_market.png"> 63 <div class="figure-caption"> 64 Play Music allows navigation among artists, albums, and playlists through rich content display. 65 It is also enriched with tailored recommendations and promotions that surface content of interest 66 to the user. Search is readily available from the action bar. 67 </div> 68 69 </div> 70 </div> 71 72 <h4>Set up action bars for navigation and actions</h4> 73 74 <div class="layout-content-row"> 75 <div class="layout-content-col span-5"> 76 77 <p>All screens in your app should display action bars to provide consistent navigation and surface 78 important actions.</p> 79 <p>At the top level, special considerations apply to the action bar:</p> 80 <ul> 81 <li>Use the action bar to display your app's icon or title.</li> 82 <li>If your top level consists of multiple views, make sure that it's easy for the user to navigate between them by adding view controls to your action bar.</li> 83 <li>If your app allows people to create content, consider making the content accessible right from the 84 top level.</li> 85 <li>If your content is searchable, include the Search action in the action bar so people can cut 86 through the navigation hierarchy.</li> 87 </ul> 88 89 </div> 90 <div class="layout-content-col span-8"> 91 92 <img src="{@docRoot}design/media/app_structure_gmail.png"> 93 <div class="figure-caption"> 94 A calendar is about productivity, so an efficient, easy-to-skim view with higher data density works 95 well. Navigation supports switching views of day, week, month, and agenda views. 96 </div> 97 98 </div> 99 </div> 100 101 <h2 id="top-level-switching">Top Level Switching With View Controls</h2> 102 <p>The top level communicates your apps capabilities by introducing the user to the major functional areas. In many cases the top level will consist of multiple views, and you need to make sure that the user can navigate between them efficiently. Android supports a number of view controls for this task. Use the control that best matches your app's navigation needs:</p> 103 104 <h4>Fixed tabs</h4> 105 <div class="layout-content-row"> 106 <div class="layout-content-col span-6"> 107 <p><em>Fixed tabs</em> display top-level views concurrently and make it easy to explore and switch between them. They are always visible on the screen, and can't be moved out of the way like scrollable tabs. <em>Fixed tabs</em> should always allow the user to navigate between the views by swiping left or right on the content area.</p> 108 <p><strong>Use tabs if</strong>:</p> 109 <ul> 110 <li>You expect your app's users to switch views frequently.</li> 111 <li>You have a limited number of up to three top-level views.</li> 112 <li>You want the user to be highly aware of the alternate views.</li> 113 </ul> 114 115 </div> 116 <div class="layout-content-col span-7"> 117 118 <img src="{@docRoot}design/media/app_structure_default_tabs.png"> 119 <div class="figure-caption"> 120 Default fixed tabs shown in Holo Dark & Light. 121 </div> 122 123 </div> 124 </div> 125 126 <div class="layout-content-row"> 127 <div class="layout-content-col span-6"> 128 129 <h4>Spinners</h4> 130 <p>A <em>spinner</em> is a drop-down menu that allows users to switch between views of your app. </p> 131 <p><strong>Use a spinner in the main action bar if</strong>:</p> 132 <ul> 133 <li>You don't want to give up the vertical screen real estate for a dedicated tab bar.</li> 134 <li>The user is switching between views of the same data set (for example: calendar events viewed by day, week, or month) or data sets of the same type (such as content for two different accounts).</li> 135 </ul> 136 137 </div> 138 <div class="layout-content-col span-7"> 139 140 <img src="{@docRoot}design/media/app_structure_spinner.png"> 141 <div class="figure-caption"> 142 Action bar spinner from Calendar application. 143 </div> 144 145 </div> 146 </div> 147 148 <h4>Navigation drawers</h4> 149 <div class="layout-content-row"> 150 <div class="layout-content-col span-6"> 151 <p>A <em>navigation drawer</em> is a slide-out menu that allows users to switch between views of your app. It can hold a large number of items and is accessible from anywhere in your app. Navigation drawers show your app's top-level views, but can also provide navigation to lower-level screens. This makes them particularly suitable for complex apps.</p> 152 153 <p><strong>Use navigation drawers if</strong>:</p> 154 <ul> 155 <li>You don't want to give up the vertical screen real estate for a dedicated tab bar.</li> 156 <li>You have a large number of top-level views.</li> 157 <li>You want to provide direct access to screens on lower levels.</li> 158 <li>You want to provide quick navigation to views which don't have direct relationships between each other.</li> 159 <li>You have particularly deep navigation branches.</li> 160 </ul> 161 162 </div> 163 <div class="layout-content-col span-7"> 164 <img src="{@docRoot}design/media/app_structure_drawer.png"> 165 <div class="figure-caption"> 166 Navigation drawer from the Keep app. 167 </div> 168 </div> 169 </div> 170 171 <h4>Don't mix and match</h4> 172 <p>After choosing the best top-level navigation for your app, don't mix and match patterns. For example, if you decide to use tabs for top-level switching, don't add a drawer, even if your navigation branches are deep. In this case, the navigation drawer would simply duplicate the information on the tabs, confusing your users.</p> 173 174 <h2 id="categories">Categories</h2> 175 176 <p>Generally, the purpose of a deep, data-driven app is to navigate through organizational categories 177 to the detail level, where data can be viewed and managed. Minimize perceived navigation effort by 178 keeping your apps shallow.</p> 179 <p>Even though the number of vertical navigation steps from the top level down to the detail views is 180 typically dictated by the structure of your app's content, there are several ways you can cut down 181 on the perception of onerous navigation.</p> 182 <h4>Use tabs to combine category selection and data display</h4> 183 <p>This can be successful if the categories are familiar or the number of categories is small. It has 184 the advantage that a level of hierarchy is removed and data remains at the center of the user's 185 attention. Navigating laterally between data-rich categories is more akin to a casual browsing 186 experience than to an explicit navigation step.</p> 187 188 <div class="vspace size-1"> </div> 189 190 <div class="layout-content-row"> 191 <div class="layout-content-col span-8"> 192 193 <p>If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all 194 items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to 195 minimize navigational effort. Rule of thumb: no more than 5–7 tabs.</p> 196 197 <img src="{@docRoot}design/media/app_structure_scrolltabs.png"> 198 <div class="figure-caption"> 199 The Play Store app uses tabs to simultaneously show category choice and content. To navigate 200 between categories, users can swipe left/right on the content. 201 </div> 202 203 </div> 204 <div class="layout-content-col span-5"> 205 206 <p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are 207 in view at the same time.</p> 208 209 <img src="{@docRoot}design/media/app_structure_fixedtabs.png"> 210 <div class="figure-caption"> 211 People uses fixed tabs to switch between different, relatively unrelated functional areas. 212 </div> 213 214 215 </div> 216 </div> 217 218 <p>For more discussion, see the <a href="{@docRoot}design/building-blocks/tabs.html">Tabs</a> 219 design guide.</p> 220 221 222 <h4>Allow cutting through hierarchies</h4> 223 <p>Take advantage of shortcuts that allow people to reach their goals quicker. To allow top-level 224 invocation of actions for a data item from within list or grid views, display prominent actions 225 directly on list view items using drop-downs or split list items. This lets people invoke actions on 226 data without having to navigate all the way down the hierarchy.</p> 227 228 <img src="{@docRoot}design/media/app_structure_shortcut_on_item.png"> 229 <div class="figure-caption"> 230 Music allows the user to act upon a data item (song) from within the category view (album), 231 thereby removing the need to navigate all the way down to the song's detail view. 232 </div> 233 234 <h4>Acting upon multiple data items</h4> 235 <p>Even though category views mostly serve to guide people to content detail, keep in mind that there 236 are often good reasons to act on collections of data as well.</p> 237 <p>For example, if you allow people to delete an item in a detail view, you should also allow them to 238 delete multiple items in the category view. Analyze which detail view actions are applicable to 239 collections of items. Then use multi-select to allow application of those actions to multiple items 240 in a category view.</p> 241 242 243 <p>For more discussion, see the <a href="{@docRoot}design/patterns/selection.html">Selection</a> 244 design guide.</p> 245 246 247 <h2 id="details">Details</h2> 248 249 <p>The detail view allows you to view and act on your data. The layout of the detail view depends on the data type being displayed, and therefore differs widely among apps.</p> 250 251 <div class="layout-content-row"> 252 <div class="layout-content-col span-4"> 253 254 <h4>Layout</h4> 255 <p>Consider the activities people will perform in the detail view and arrange the layout accordingly.</p> 256 257 </div> 258 <div class="layout-content-col span-9"> 259 260 <img src="{@docRoot}design/media/app_structure_people_detail.png"> 261 262 <div class="figure-caption"> 263 The purpose of the People app's detail view is to surface communication options. The list view 264 allows for efficient scanning and quick access of phone numbers, email addresses and other 265 information items. Split items are used to combine calling and messaging into one compact line 266 item. 267 </div> 268 </div> 269 </div> 270 271 272 <h4>Make navigation between detail views efficient</h4> 273 <p>If your users are likely to want to look at multiple items in sequence, allow them to navigate 274 between items from within the detail view. Use swipe views or other techniques, such as thumbnail view controls, 275 to achieve this.</p> 276 277 <img src="{@docRoot}design/media/app_structure_gmail_swipe.png"> 278 <div class="figure-caption"> 279 Gmail using swipe views to navigate from detail view to detail view. 280 </div> 281 282 <img src="{@docRoot}design/media/app_structure_gallery_filmstrip.png"> 283 <div class="figure-caption"> 284 In addition to supporting swipe gestures to move left or right through pages, Magazines provides a 285 thumbnail view control that lets people quickly jump to specific pages. 286 </div> 287 288 <p>For more discussion, see the <a href="{@docRoot}design/patterns/swipe-views.html">Swipe Views</a> 289 design guide.</p> 290 291 292 <h2 id="checklist">Checklist</h2> 293 294 <ul> 295 <li> 296 <p>Find ways to display useful content on your start screen.</p> 297 </li> 298 <li> 299 <p>Use action bars to provide consistent navigation.</p> 300 </li> 301 <li> 302 <p>Keep your hierarchies shallow by using horizontal navigation and shortcuts.</p> 303 </li> 304 <li> 305 <p>Use multi-select to allow the user to act on collections of data.</p> 306 </li> 307 <li> 308 <p>Allow for quick navigation between detail items with swipe views.</p> 309 </li> 310 </ul>
