Docand Reference Series Android API19 Jan 2014 Book 1 Design Methods1

170
  • date post

    25-Nov-2015
  • Category

    Documents

  • view

    143
  • download

    0

description

Design Methods

Transcript of Docand Reference Series Android API19 Jan 2014 Book 1 Design Methods1

  • 2

    Portions of this Book are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License. The derivitive website is devloper.android.com. The source url of the original document is included under each section title. Each Section is covered by the aforementioned License. Code Samples are included under the Apache 2.0 License. Each section has the approriate link, and associated license at the footer of the page. The Creative Commons License & Apache License are available at the end of this book.

    E&OE Errors and omissions excepted or excluded. All other sections of the document, that are not attributed to other source organisations are under Copyright 2013 by Docand using the Creative Commons Attribution-NonCommercial 3.0 Unported License.

    First Edition: October 2013 Second Edition : December 2013

    www.docand.com

  • 3

    Forward

    The Docand reference series has been created for developers working within the world of Android application development. Taking them from their initial concepts through deployment to product delivery. Packed with all the information possible, the font size has been chosen to keep the price low. Produced using a print on demand service allows the book series to be kept up to date with the latest information. The series titles have been named after the different areas of official documentation, giving the novice developer through to evangelists a single point of reference. Credit is given to all the people who created these documents under the Creative Commons License. Docand does not take credit for the quality and pure quantity of information required to cover all the areas. The series attempts to bring together the vast amount of documentation into a single cohesive source of information for a given date, the books are derived from the same source at the same time, thus allowing cross referencing between the books in the series.

  • 4

    Contents 1. Creative Vision .................................................... 7 2. Design Principles ................................................ 8

    Enchant Me ............................................................... 8 Simplify My Life ......................................................... 9 Make Me Amazing .................................................. 11

    3. UI Overview ....................................................... 13 Home, All Apps, and Recents ................................. 13 System Bars ............................................................ 14 Notifications ............................................................ 15 Common App UI ..................................................... 15

    4. Devices and Displays ........................................ 18 5. Themes ............................................................. 19 6. Touch Feedback ............................................... 21 7. Metrics and Grids .............................................. 23

    48dp Rhythm ........................................................... 23 Examples ................................................................ 24

    8. Typography ....................................................... 25 9. Color .................................................................. 27

    Palette ..................................................................... 27 10. Iconography ...................................................... 28

    Launcher ................................................................. 28 Action Bar ............................................................... 30 Small / Contextual Icons ......................................... 31 Notification Icons .................................................... 32 Design Tips ............................................................. 33

    11. Your Branding ................................................... 36 Color ........................................................................ 36 Logo ........................................................................ 38 Icons ....................................................................... 39

    12. Writing Style ...................................................... 40 Android's Voice ....................................................... 40 Formatting text ........................................................ 42

    13. New in Android .................................................. 45 Android 4.4 KitKat ................................................... 45 Android 4.1 Jelly Bean ............................................ 47 Android 4.0 Ice Cream Sandwich ........................... 48

    14. Gestures ............................................................ 50 15. App Structure .................................................... 54

    General Structure .................................................... 54 Top Level ................................................................ 54 Top Level Switching With View Controls ................. 56 Categories ............................................................... 57 Details ..................................................................... 59 Checklist ................................................................. 61

    16. Navigation with Back and Up ............................ 62 Up vs. Back ............................................................. 62 Navigation Within Your App .................................... 63 Navigation into Your App via Home Screen Widgets and Notifications ..................................................... 66 Navigation Between Apps ...................................... 69

    17. Action Bar ......................................................... 73 General Organization .............................................. 73 Adapting to Rotation and Different Screen Sizes ... 74 Layout Considerations for Split Action Bars ........... 74 Action Buttons ......................................................... 75 Contextual Action Bars ........................................... 77 Action Bar Checklist ................................................ 78

    18. Navigation Drawer ............................................. 79 When to Use the Navigation Drawer ....................... 80 Navigation Hubs ..................................................... 81 Content of the Navigation Drawer ........................... 82 Navigation Drawers and Action Bars ...................... 83 Interaction Details ................................................... 85 Impact of Drawer on Overall App Navigation ......... 86

    Style ......................................................................... 87 Navigation Drawer Checklist ................................... 88

    19. Multi-pane Layouts ............................................ 89 Combining Multiple Views Into One ........................ 89 Compound Views and Orientation Changes ........... 90 Checklist .................................................................. 91

    20. Swipe Views ...................................................... 92 Swiping Between Detail Views ................................ 92 Swiping Between Tabs ............................................ 93

    21. Full Screen ........................................................ 94 Lean Back ............................................................... 95 Immersive ................................................................ 95 Variation: Swiping from edges with bars also affects the app .................................................................... 96 What About Lights Out Mode? ................................ 96

    22. Selection ........................................................... 97 Checklist .................................................................. 98

    23. Confirming & Acknowledging ............................ 99 When to Confirm or Acknowledge User Actions ..... 99 Confirming ............................................................. 100 Acknowledging ..................................................... 101 No Confirmation or Acknowledgment ................... 102

    24. Notifications ..................................................... 103 Anatomy of a notification ....................................... 103 Design guidelines ................................................. 104 Building notifications that users care about .......... 107 Interacting With Notifications ................................ 108

    25. Widgets ........................................................... 110 Widget types ......................................................... 110 Widget limitations .................................................. 111 Design guidelines ................................................. 112 Checklist ................................................................ 114

    26. Settings ........................................................... 115 Flow and Structure ................................................ 115 Design Patterns ..................................................... 117 Defaults ................................................................. 122 Writing Guidelines ................................................. 122 Checklist ................................................................ 125

    27. Help ................................................................. 126 Designing Help into Your App .............................. 126 Principles for Writing On-Screen Help Content ..... 128

    28. Backwards Compatibility ................................. 130 Adapting Android 4.0 to Older Hardware and Apps .............................................................................. 130

    29. Accessibility .................................................... 132 Android's Accessibility Tools ................................ 132 Guidelines ............................................................. 132 Checklist ................................................................ 134

    30. Pure Android ................................................... 135 Device Independence ........................................... 137

    31. Tabs ................................................................ 140 Scrollable Tabs ..................................................... 140 Fixed Tabs ............................................................. 140

    32. Lists ................................................................. 141 33. Grid Lists ......................................................... 142

    Generic Grids ........................................................ 142 Grid List with Labels .............................................. 143

    34. Scrolling .......................................................... 144 Scroll Indicator ...................................................... 144 Index Scrolling ...................................................... 144

    35. Spinners .......................................................... 145 36. Buttons ............................................................ 146 37. Text Fields ....................................................... 148

    Text Selection ........................................................ 148 38. Seek Bars and Sliders ..................................... 150 39. Progress & Activity .......................................... 151

  • 5

    Progress bars ........................................................ 151 Activity indicators .................................................. 151 Custom indicators ................................................. 152

    40. Switches .......................................................... 154 Checkboxes .......................................................... 154 Radio Buttons ........................................................ 154 On/off Switches ..................................................... 154

    41. Dialogs ............................................................ 155 Alerts ..................................................................... 156 Popups .................................................................. 157 Toasts .................................................................... 157

    42. Pickers ............................................................. 159 Date and time pickers ........................................... 159

    43. Downloads ....................................................... 160 Stencils and Sources ............................................. 160 Action Bar Icon Pack ............................................. 160 Style ....................................................................... 160

    44. Videos ............................................................. 162 45. Creative Commons License ............................ 163

    Creative Commons Attribution 3.0 Unported ........ 165 46. Apache License, Version 2.0 ........................... 168

  • Creative Vision

    6 Content from developer.android.com/design/get-started/creative-vision.html through their Creative Commons Attribution 2.5 license

    Welcome to Android Design, your place for learning how to design exceptional Android apps. Want to know what Android 4.4 KitKat has for designers? See New in Android. Creative Vision

  • Creative Vision

    7 Content from developer.android.com/design/get-started/creative-vision.html through their Creative Commons Attribution 2.5 license

    1. Creative Vision Content from developer.android.com/design/get-started/creative-vision.html through their Creative Commons Attribution 2.5 license

    We focused the design of Android around three overarching goals, which apply to our core apps as well as the system at large. As you design apps to work with Android, consider these goals: Enchant me Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels. Transitions are fast and clear; layout and typography are crisp and meaningful. App icons are works of art in their own right. Just like a well-made tool, your app should strive to combine beauty, simplicity and purpose to create a magical experience that is effortless and powerful. Simplify my life Android apps make life easier and are easy to understand. When people use your app for the first time, they should intuitively grasp the most important features. The design work doesn't stop at the first use, though. Android apps remove ongoing chores like file management and syncing. Simple tasks never require complex procedures, and complex tasks are tailored to the human hand and mind. People of all ages and cultures feel firmly in control, and are never overwhelmed by too many choices or irrelevant flash. Make me amazing It's not enough to make an app that is easy to use. Android apps empower people to try new things and to use apps in inventive new ways. Android lets people combine applications into new workflows through multitasking, notifications, and sharing across apps. At the same time, your app should feel personal, giving people access to superb technology with clarity and grace.

  • Design Principles

    8 Content from developer.android.com/design/get-started/principles.html through their Creative Commons Attribution 2.5 license

    2. Design Principles Content from developer.android.com/design/get-started/principles.html through their Creative Commons Attribution 2.5 license These design principles were developed by and for the Android User Experience Team to keep users' best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate with purpose.

    Enchant Me Delight me in surprising ways A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is at hand.

    Real objects are more fun than buttons and menus Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.

    Let me make it mine People love to add personal touches because it helps them feel at home and in control. Provide sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder primary tasks.

    Get to know me Learn peoples' preferences over time. Rather than asking them to make the same choices over and over, place previous choices within easy reach.

  • Design Principles

    9 Content from developer.android.com/design/get-started/principles.html through their Creative Commons Attribution 2.5 license

    Simplify My Life Keep it brief Use short phrases with simple words. People are likely to skip sentences if they're long.

    Pictures are faster than words Consider using pictures to explain ideas. They get people's attention and can be much more efficient than words.

    Decide for me but let me have the final say Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.

  • Design Principles

    10 Content from developer.android.com/design/get-started/principles.html through their Creative Commons Attribution 2.5 license

    Only show what I need when I need it People get overwhelmed when they see too much at once. Break tasks and information into small, digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.

    I should always know where I am Give people confidence that they know their way around. Make places in your app look distinct and use transitions to show relationships among screens. Provide feedback on tasks in progress.

    Never lose my stuff Save what people took time to create and let them access it from anywhere. Remember settings, personal touches, and creations across phones, tablets, and computers. It makes upgrading the easiest thing in the world.

  • Design Principles

    11 Content from developer.android.com/design/get-started/principles.html through their Creative Commons Attribution 2.5 license

    If it looks the same, it should act the same Help people discern functional differences by making them visually distinct rather than subtle. Avoid modes, which are places that look similar but act differently on the same input.

    Only interrupt me if it's important Like a good personal assistant, shield people from unimportant minutiae. People want to stay focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.

    Make Me Amazing Give me tricks that work everywhere People feel great when they figure things out for themselves. Make your app easier to learn by leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture may be a good navigational shortcut.

    It's not my fault Be gentle in how you prompt people to make corrections. They want to feel smart when they use your app. If something goes wrong, give clear recovery instructions but spare them the technical details. If you can fix it behind the scenes, even better.

    Sprinkle encouragement

  • Design Principles

    12 Content from developer.android.com/design/get-started/principles.html through their Creative Commons Attribution 2.5 license

    Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions, even if it's just a subtle glow.

    Do the heavy lifting for me Make novices feel like experts by enabling them to do things they never thought they could. For example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in only a few steps.

    Make important things fast Not all actions are equal. Decide what's most important in your app and make it easy to find and fast to use, like the shutter button in a camera, or the pause button in a music player.

  • UI Overview

    13 Content from developer.android.com/design/get-started/ui-overview.html through their Creative Commons Attribution 2.5 license

    3. UI Overview Content from developer.android.com/design/get-started/ui-overview.html through their Creative Commons Attribution 2.5 license Android's system UI provides the framework on top of which you build your app. Important aspects include the Home screen experience, global device navigation, and notifications. Your app will play an important part in keeping the overall Android experience consistent and enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal in your app. Read on for a quick overview of the most important aspects of the Android user interface.

    Home, All Apps, and Recents

    Home screen Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between different home screen panels by swiping left and right. The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view regardless of which panel is currently showing. Access the entire collection of apps and widgets by touching the All Apps button at the center of the Favorites Tray.

    All apps screen The All Apps screen lets you browse the entire set of apps and widgets that are installed on your device.

  • UI Overview

    14 Content from developer.android.com/design/get-started/ui-overview.html through their Creative Commons Attribution 2.5 license

    Users can drag an app or widget icon from the All Apps screen and place it in any empty location on any Home screen.

    Recents screen Recents provides an efficient way of switching between recently used applications. It provides a clear navigation path between multiple ongoing tasks. The Recents button at the right side of the navigation bar displays the apps that the user has interacted with most recently. They are organized in reverse chronological order with the most recently used app at the bottom. Switch to an app by touching it. Remove an item by swiping left or right.

    System Bars The system bars are screen areas dedicated to the display of notifications, communication of device status, and device navigation. Typically the system bars are displayed concurrently with your app. Apps that display immersive content, such as movies or images, can temporarily hide the system bars to allow the user to enjoy full screen content without distraction.

    Status Bar Displays pending notifications on the left and status, such as time, battery level, or signal strength, on the right. Swipe down from the status bar to show notification details.

  • UI Overview

    15 Content from developer.android.com/design/get-started/ui-overview.html through their Creative Commons Attribution 2.5 license

    Navigation Bar New for phones in Android 4.0, the navigation bar is present only on devices that don't have the traditional hardware keys. It houses the device navigation controls Back, Home, and Recents, and also displays a menu for apps written for Android 2.3 or earlier.

    Notifications Notifications are brief messages that users can access at any time from the status bar. They provide updates, reminders, or information that's important, but not critical enough to warrant interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a notification opens the associated app. More on Notifications

    Notifications can be expanded to uncover more details and relevant actions. When collapsed, notifications have a one-line title and a one-line message.The recommended layout for a notification includes two lines. If necessary, you can add a third line. Swiping a notification right or left removes it from the notification drawer.

    Common App UI

  • UI Overview

    16 Content from developer.android.com/design/get-started/ui-overview.html through their Creative Commons Attribution 2.5 license

    A typical Android app uses action bars, and many apps will include a navigation drawer. Action Bar The command and control center for your app. The action bar surfaces the most important actions for the current view, and may include simple controls for switching between views. More on the Action Bar Navigation Drawer If your app's structure is more complex, the navigation drawer can display the main navigation options. The navigation drawer expands from the left edge of the screen, overlaying the content area but not the action bar. More on the Navigation Drawer Content Area The space where the content of your app is displayed.

  • UI Overview

    17 Content from developer.android.com/design/get-started/ui-overview.html through their Creative Commons Attribution 2.5 license

    Build visually compelling apps that look great on any device. Devices and Displays

  • Devices and Displays

    18 Content from developer.android.com/design/style/devices-displays.html through their Creative Commons Attribution 2.5 license

    4. Devices and Displays Content from developer.android.com/design/style/devices-displays.html through their Creative Commons Attribution 2.5 license Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and form factors. By taking advantage of Android's flexible layout system, you can create apps that gracefully scale from large tablets to smaller phones.

    Be flexible Stretch and compress your layouts to accommodate various heights and widths. Optimize layouts On larger devices, take advantage of extra screen real estate. Create compound views that combine multiple views to reveal more content and ease navigation. Assets for all Provide resources for different screen densities (DPI) to ensure that your app looks great on any device.

    Strategies So where do you begin when designing for multiple screens? One approach is to work in the base standard (normal size and MDPI) and scale it up or down for the other buckets. Another approach is to start with the device with the largest screen size, and then scale down and figure out the UI compromises you'll need to make on smaller screens. For details about designing layouts for larger screens, see the Multi-pane Layouts guide. Developer Guide For information about how to build flexible layouts for multiple screen sizes and densities, read Designing for Multiple Screens and Building a Dynamic UI with Fragments.

  • Themes

    19 Content from developer.android.com/design/style/themes.html through their Creative Commons Attribution 2.5 license

    5. Themes Content from developer.android.com/design/style/themes.html through their Creative Commons Attribution 2.5 license

    Gmail in Holo Light.

    Settings in Holo Dark. Themes are Android's mechanism for applying a consistent style to an app or activity. The style specifies the visual properties of the elements that make up your user interface, such as color, height, padding and font size. To promote greater cohesion between all apps on the platform, Android provides two system themes that you can choose from when building apps:

    Holo Light Holo Dark

    Applying these themes will go a long way in helping you to build apps that fit right into the general visual language of Android. Pick the system theme that best matches the needs and design aesthetics for your app. If your desire is to have a more distinct look for your app, using one of the system themes as a starting point for your customizations is a good idea. The system themes provide a solid foundation on top of which you can selectively implement your own visual stylings. Developer Guide

  • Themes

    20 Content from developer.android.com/design/style/themes.html through their Creative Commons Attribution 2.5 license

    For information about how to apply themes such as Holo Light and Dark, and how to build your own themes, see the Styles and Themes API guide.

  • Touch Feedback

    21 Content from developer.android.com/design/style/touch-feedback.html through their Creative Commons Attribution 2.5 license

    6. Touch Feedback Content from developer.android.com/design/style/touch-feedback.html through their Creative Commons Attribution 2.5 license Use illumination and dimming to respond to touches, reinforce the resulting behaviors of gestures, and indicate what actions are enabled and disabled. Be responsive to touches in a gentle way. Whenever a user touches an actionable area in your app, let them know the app is "listening" by providing a visual response. Make it subtle just slightly lighter or darker than the untouched color. This provides two benefits:

    Sprinkles of encouragement are more pleasant than jolts. Incorporating your branding is much easier because the default touch feedback works with

    whatever hue you choose.

    Click image to replay... States

    Most of Android's UI elements have touch feedback built in, including states that indicate whether touching the element will have any effect. Communication When your objects react to more complex gestures, help users understand what the outcome will be. In Recents, when a user starts swiping a thumbnail left or right, it begins to dim. This helps the user understand that swiping will cause the item to be removed.

  • Touch Feedback

    22 Content from developer.android.com/design/style/touch-feedback.html through their Creative Commons Attribution 2.5 license

    If a user attempts to scroll past the last home screen panel, the screen content tilts to the right to indicate that further navigation in this direction isnt possible. Boundaries When users try to scroll past the beginning or end of a scrollable area, communicate the boundary with a visual cue. Many of Android's scrollable UI widgets, like lists and grid lists, have support for boundary feedback built in. If youre building custom widgets, keep boundary feedback in mind and provide it from within your app.

  • Metrics and Grids

    23 Content from developer.android.com/design/style/metrics-grids.html through their Creative Commons Attribution 2.5 license

    7. Metrics and Grids Content from developer.android.com/design/style/metrics-grids.html through their Creative Commons Attribution 2.5 license Devices vary not only in physical size, but also in screen density (DPI). To simplify the way you design for multiple screens, think of each device as falling into a particular size bucket and density bucket:

    The size buckets are handset (smaller than 600dp) and tablet (larger than or equal 600dp). The density buckets are LDPI, MDPI, HDPI, XHDPI, XXHDPI, and XXXHDPI.

    Optimize your application's UI by designing alternative layouts for some of the different size buckets, and provide alternative bitmap images for different density buckets. Because it's important that you design and implement your layouts for multiple densities, the guidelines below and throught the documentation refer to layout dimensions with dp measurements instead of pixels.

    Space considerations Devices vary in the amount of density-independent pixels (dp) they can display. To see more, visit the Screen Sizes and Densities Device Dashboard.

    48dp Rhythm Touchable UI components are generally laid out along 48dp units.

    Why 48dp? On average, 48dp translate to a physical size of about 9mm (with some variability). This is comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users will be able to reliably and accurately target them with their fingers. If you design your elements to be at least 48dp high and wide you can guarantee that:

    your targets will never be smaller than the minimum recommended target size of 7mm regardless of what screen they are displayed on.

    you strike a good compromise between overall information density on the one hand, and targetability of UI elements on the other.

  • Metrics and Grids

    24 Content from developer.android.com/design/style/metrics-grids.html through their Creative Commons Attribution 2.5 license

    Mind the gaps Spacing between each UI element is 8dp.

    Examples

  • Typography

    25 Content from developer.android.com/design/style/typography.html through their Creative Commons Attribution 2.5 license

    8. Typography Content from developer.android.com/design/style/typography.html through their Creative Commons Attribution 2.5 license

    Download Roboto The Android design language relies on traditional typographic tools such as scale, space, rhythm, and alignment with an underlying grid. Successful deployment of these tools is essential to help users quickly understand a screen of information. To support such use of typography, Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the requirements of UI and high-resolution screens. The current TextView framework offers Roboto in thin, light, regular and bold weights, along with an italic style for each weight. The framework also offers the Roboto Condensed variant in regular and bold weights, along with an italic style for each weight.

    Specimen Book

  • Typography

    26 Content from developer.android.com/design/style/typography.html through their Creative Commons Attribution 2.5 license

    Default type colors The Android UI uses the following default color styles: textColorPrimary and textColorSecondary. For light themes use textColorPrimaryInverse and textColorSecondaryInverse. The framework text color styles also support variants for touch feedback states when used inside UI elements.

    Typographic Scale Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too many different sizes in the same UI can be messy. The Android framework uses the following limited set of type sizes:

    Users can select a system-wide scaling factor for text in the Settings app. In order to support these accessibility features, type should be specified in scale-independent pixels (sp) wherever possible. Layouts supporting scalable types should be tested against these settings.

  • Color

    27 Content from developer.android.com/design/style/color.html through their Creative Commons Attribution 2.5 license

    9. Color Content from developer.android.com/design/style/color.html through their Creative Commons Attribution 2.5 license Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast between visual components. Note that red and green may be indistinguishable to color-blind users.

    #33b5e5 #aa66cc #99cc00 #ffbb33 #ff4444

    #0099cc #9933cc #669900 #ff8800 #cc0000

    Palette Blue is the standard accent color in Android's color palette. Each color has a corresponding darker shade that can be used as a complement when needed. Download the swatches

  • Iconography

    28 Content from developer.android.com/design/style/iconography.html through their Creative Commons Attribution 2.5 license

    10. Iconography Content from developer.android.com/design/style/iconography.html through their Creative Commons Attribution 2.5 license

    An icon is a graphic that takes up a small portion of screen real estate and provides a quick, intuitive representation of an action, a status, or an app. When you design icons for your app, it's important to keep in mind that your app may be installed on a variety of devices that offer a range of pixel densities, as mentioned in Devices and Displays. But you can make your icons look great on all devices by providing each icon in multiple sizes. When your app runs, Android checks the characteristics of the device screen and loads the appropriate density-specific assets for your app. Because you will deliver each icon in multiple sizes to support different densities, the design guidelines below refer to the icon dimensions in dp units, which are based on the pixel dimensions of a medium-density (MDPI) screen.

    So, to create an icon for different densities, you should follow the 2:3:4:6:8 scaling ratio between the five primary densities (medium, high, x-high, xx-high, and xxx-high respectively). For example, consider that the size for a launcher icon is specified to be 48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on. Note: Android also supports low-density (LDPI) screens, but you normally don't need to create custom assets at this size because Android effectively down-scales your HDPI assets by 1/2 to match the expected size.

    Launcher The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on any type of background.

  • Iconography

    29 Content from developer.android.com/design/style/iconography.html through their Creative Commons Attribution 2.5 license

    Sizes & scale

    Launcher icons on a mobile device must be 48x48 dp. Launcher icons for display on Google Play must be 512x512 pixels.

    Proportions Full asset, 48x48 dp

    Style Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed from above, so that users perceive some depth.

  • Iconography

    30 Content from developer.android.com/design/style/iconography.html through their Creative Commons Attribution 2.5 license

    Action Bar Action bar icons are graphic buttons that represent the most important actions people can take within your app. Each one should employ a simple metaphor representing a single concept that most people can grasp at a glance. Pre-defined glyphs should be used for certain common actions such as "refresh" and "share." The download link below provides a package with icons that are scaled for various screen densities and are suitable for use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can modify to match your theme, in addition to Adobe Illustrator source files for further customization. Download the Action Bar Icon Pack

    Sizes & scale

    Action bar icons for phones should be 32x32 dp. Focal area & proportions

    Full asset, 32x32 dp Optical square, 24x24 dp

    Style Pictographic, flat, not too detailed, with smooth curves or sharp shapes. If the graphic is thin, rotate it 45 left or right to fill the focal space. The thickness of the strokes and negative spaces should be a minimum of 2 dp. Colors

  • Iconography

    31 Content from developer.android.com/design/style/iconography.html through their Creative Commons Attribution 2.5 license

    Colors: #333333 Enabled: 60% opacity Disabled: 30% opacity Colors: #FFFFFF Enabled: 80% opacity Disabled: 30% opacity

    Small / Contextual Icons Within the body of your app, use small icons to surface actions and/or provide status for specific items. For example, in the Gmail app, each message has a star icon that marks the message as important.

    Sizes & scale

    Small icons should be 16x16 dp. Focal area & proportions

    Full asset, 16x16 dp Optical square, 12x12 dp

    Style

  • Iconography

    32 Content from developer.android.com/design/style/iconography.html through their Creative Commons Attribution 2.5 license

    Neutral, flat, and simple. Filled shapes are easier to see than thin strokes. Use a single visual metaphor so that a user can easily recognize and understand its purpose.

    Colors Use non-neutral colors sparingly and with purpose. For example, Gmail uses yellow in the star icon to indicate a bookmarked message. If an icon is actionable, choose a color that contrasts well with the background.

    Notification Icons If your app generates notifications, provide an icon that the system can display in the status bar whenever a new notification is available.

  • Iconography

    33 Content from developer.android.com/design/style/iconography.html through their Creative Commons Attribution 2.5 license

    Sizes & scale Notification icons must be 24x24 dp.

    Focal area & proportions Full asset, 24x24 dp

    Optical square, 22x22 dp Style Keep the style flat and simple, using the same single, visual metaphor as your launcher icon. Colors Notification icons must be entirely white. Also, the system may scale down and/or darken the icons.

    Design Tips Here are some tips you might find useful as you create icons or other drawable assets for your application. These tips assume you are using Adobe Photoshop or a similar raster and vector image-editing program. Use vector shapes where possible Many image-editing programs such as Adobe Photoshop allow you to use a combination of vector shapes and raster layers and effects. When possible, use vector shapes so that if the need arises, assets can be scaled up without loss of detail and edge crispness. Using vectors also makes it easy to align edges and corners to pixel boundaries at smaller resolutions. Start with large artboards Because you will need to create assets for different screen densities, it is best to start your icon designs on large artboards with dimensions that are multiples of the target icon sizes. For example, launcher icons are 48, 72, 96, or 144 pixels wide, depending on screen density (mdpi, hdpi, xhdpi, and xxhdpi, respectively). If you initially draw launcher icons on an 864x864 artboard, it will be easier and cleaner to adjust the icons when you scale the artboard down to the target sizes for final asset creation. When scaling, redraw bitmap layers as needed

  • Iconography

    34 Content from developer.android.com/design/style/iconography.html through their Creative Commons Attribution 2.5 license

    If you scaled an image up from a bitmap layer, rather than from a vector layer, those layers will need to be redrawn manually to appear crisp at higher densities. For example if a 60x60 circle was painted as a bitmap for mdpi it will need to be repainted as a 90x90 circle for hdpi. Use common naming conventions for icon assets Try to name files so that related assets will group together inside a directory when they are sorted alphabetically. In particular, it helps to use a common prefix for each icon type. For example:

    Asset Type Prefix Example

    Icons ic_ ic_star.png

    Launcher icons ic_launcher ic_launcher_calendar.png

    Menu icons and Action Bar icons ic_menu ic_menu_archive.png

    Status bar icons ic_stat_notify ic_stat_notify_msg.png

    Tab icons ic_tab ic_tab_recent.png

    Dialog icons ic_dialog ic_dialog_info.png

    Note that you are not required to use a shared prefix of any typedoing so is for your convenience only. Set up a working space that organizes files by density Supporting multiple screen densities means you must create multiple versions of the same icon. To help keep the multiple copies of files safe and easier to find, we recommend creating a directory structure in your working space that organizes asset files based on the target density. For example: art/... mdpi/... _pre_production/... working_file.psd finished_asset.png hdpi/... _pre_production/... working_file.psd finished_asset.png xhdpi/... _pre_production/... working_file.psd finished_asset.png xxhdpi/... _pre_production/... working_file.psd finished_asset.png Because the structure in your working space is similar to that of the application, you can quickly determine which assets should be copied to each resources directory. Separating assets by density also helps you detect any variances in filenames across densities, which is important because corresponding assets for different densities must share the same filename.

  • Iconography

    35 Content from developer.android.com/design/style/iconography.html through their Creative Commons Attribution 2.5 license

    For comparison, here's the resources directory structure of a typical application: res/... drawable-ldpi/... finished_asset.png drawable-mdpi/... finished_asset.png drawable-hdpi/... finished_asset.png drawable-xhdpi/... finished_asset.png For more information about how to save resources in the application project, see Providing Resources. Remove unnecessary metadata from final assets Although the Android SDK tools will automatically compress PNGs when packaging application resources into the application binary, a good practice is to remove unnecessary headers and metadata from your PNG assets. Tools such as OptiPNG or Pngcrush can ensure that this metadata is removed and that your image asset file sizes are optimized.

  • Your Branding

    36 Content from developer.android.com/design/style/branding.html through their Creative Commons Attribution 2.5 license

    11. Your Branding Content from developer.android.com/design/style/branding.html through their Creative Commons Attribution 2.5 license Following Android design patterns doesn't mean that your app has to look the same as everyone else's. In Android, your app can shine as an extension of your brand.

    Color Use your brand color for accent by overriding the Android framework's default blue in UI elements like checkboxes, progress bars, radio buttons, sliders, tabs, and scroll indicators. Look for opportunities to use high-contrast color for emphasis, for example, as the background color of the action bar or a primary button. But don't go overboard: not all actions are equal, so use it only for the one or two most important things. When customizing colors, touch feedback should be subtle just slightly lighter or darker than the untouched color.

  • Your Branding

    37 Content from developer.android.com/design/style/branding.html through their Creative Commons Attribution 2.5 license

    The four colors of the Google Wallet logo provide a playful accent to the four dots that appear as the user enters a PIN.

  • Your Branding

    38 Content from developer.android.com/design/style/branding.html through their Creative Commons Attribution 2.5 license

    The Google Play Music app has an orange theme color, which is used for emphasis in the action bar and for accent in the selected tab, scroll indicator, and hyperlinks. Logo Your app's launcher icon is a key place to incorporate your logo, because it's what users will look for and touch to begin using your app. You can carry the launcher icon through to all the screens in your app by showing it in the action bar along with the name of the app. Another approach to consider is to have your logo take the place of the launcher icon and app name in the action bar.

    Google+ reinforces its brand by carrying its launcher icon through to the action bar.

  • Your Branding

    39 Content from developer.android.com/design/style/branding.html through their Creative Commons Attribution 2.5 license

    Example of a the logo in the action bar. This works well in cases where the brand's logo matches the name of the app. Icons If you have icons that you're already using for your app on other platforms and they have a distinctive look intended to fit your brand, use them on your Android app as well. If you take this approach, make sure your brand styling is applied to every single icon in your app.

    One exception: For any icon in your existing set where the symbol is different from Android's, use Android's symbol but give it your brand's styling. That way, users will understand what the purpose of the icon is based on what they've learned in other Android apps (Design principle: Give me tricks that work everywhere). But the icon will still look like it belongs with all of your other icons as a part of your brand. Example: The brand's normal icon for sharing on other platforms is a right arrow. Don't Do

    What if you don't already have your own icons for example, if you're creating a brand new app only for Android? In this case, use Android's standard icons and rely more on color and logo for branding. Get the Action Bar Icon Pack, available for free in Downloads.

  • Writing Style

    40 Content from developer.android.com/design/style/writing.html through their Creative Commons Attribution 2.5 license

    12. Writing Style Content from developer.android.com/design/style/writing.html through their Creative Commons Attribution 2.5 license

    Android's Voice When writing text that appears in your app, keep it concise, simple, and friendly. Concise

    Describe only what the user needs to know. Eliminate redundancy, such as titles that restate the body of an information box. Keep text as short as possible.

    Avoid wordy, stilted text Don't

    Consult the documentation that came with your phone for further instructions.

    Do

    Read the instructions that came with your phone.

    Don't provide unnecessary information From a Setup Wizard screen

    Signing in...

    Your phone needs to communicate with Google servers to sign in to your account. This may take up to five minutes.

    From a Setup Wizard screen

    Signing in...

    Your phone is contacting Google. This can take up to 5 minutes.

    Simple

    Use short words, active verbs, and common nouns. Put the most important thing first. Front-load the first 11 characters with the most salient

    information in the string. Dont try to explain subtle differences. They are lost on most users.

    Focus on the user's concern, not technical details Don't

  • Writing Style

    41 Content from developer.android.com/design/style/writing.html through their Creative Commons Attribution 2.5 license

    Manually control GPS to prevent other apps from using it

    Do

    To save power, switch Location mode to Battery saving

    Put top news first Don't

    77 other people +1d this, including Larry Page

    Do

    Larry Page and 76 others +1d this

    Put the user's goal first Don't

    Touch Next to complete setup using a Wi-Fi connection

    Do

    To finish setup using Wi-Fi, touch Next

    Friendly

    Use contractions. Talk directly to the reader. Use you to refer to the reader. Keep your tone casual and conversational, but avoid slang.

    Avoid being confusing or annoying Don't

    Sorry!

    Activity MyAppActivity (in application MyApp) is not responding

    Do

    MyApp isnt responding

    Do you want to close it?

    Words to avoid

  • Writing Style

    42 Content from developer.android.com/design/style/writing.html through their Creative Commons Attribution 2.5 license

    Don't use Use

    one, two, three, four, ... 1, 2, 3, 4, ...

    application app

    cannot, could not, do not, did not will not, you will Contractions: cant, couldnt, dont, didnt wont, youll, and so on

    okay, ok OK

    please, sorry, thank you Attempts at politeness can annoy the user, especially in messages that say something has gone wrong. Exception: In Japanese, please is mandatory and imperative verbs should be localized accordingly (turn on -> please turn on).

    there is, there are, it is and other disappeared subjects (grammatical expletives)

    Use a noun as the subject

    abort, kill, terminate stop, cancel, end, exit

    fail, failed, negative language In general, use positive phrasing (for example, do rather than dont, except in cases such as Dont show again, Cant connect, and so on.)

    me, I, my, mine you, your, yours

    Are you sure? Warning! Tell user the consequence instead, for example, Youll lose all photos and media

    Formatting text Capitalization

    Use sentence-style capitalization for all UI strings: Words to live by. Capitalize all important words in:

    o App names (Calendar, Google Drive) o Named features (Android Beam, Face Unlock) o Proper nouns (Statue of Liberty, San Francisco Giants)

    Be conservative. Don't capitalize words that aren't part of a formal feature name: o Sim card lock, Home screen, not Sim Card Lock, Home Screen.

    Punctuation

  • Writing Style

    43 Content from developer.android.com/design/style/writing.html through their Creative Commons Attribution 2.5 license

    Period. Don't use a period after a single sentence or phrase used in isolation, such as in a toast, label, or notification. Wherever two or more sentences run together, use a period for each sentence.

    Ellipsis. Use the ellipsis character () (Option-; on MacOS and in HTML) to indicate o Incompleteness, such as an action in progress (Downloading...) or truncated text. o That a menu item (such as Print or Share) leads to further UI involving significant

    choices. Exception: Commands whose wording already implies further (but limited) UI, such as Find in page or Pick a date, do not require an ellipsis.

  • Writing Style

    44 Content from developer.android.com/design/style/writing.html through their Creative Commons Attribution 2.5 license

    Design apps that behave in a consistent, predictable fashion. New in Android

  • New in Android

    45 Content from developer.android.com/design/patterns/new.html through their Creative Commons Attribution 2.5 license

    13. New in Android Content from developer.android.com/design/patterns/new.html through their Creative Commons Attribution 2.5 license A quick look at the new patterns and styles you can use to build beautiful Android apps

    Android 4.4 KitKat

    Your branding Consistency has its place in Android, but you also have the flexibility to customize the look of your app to reinforce your brand. Use your brand color for accent by overriding the Android framework's default blue in UI elements like checkboxes, progress bars, radio buttons, sliders, tabs, and scroll indicators. Show your app's launcher icon and name in the action bar so that users can see it in every screen of your app. Your Branding highlights these and other pointers on how to incorporate elements of your brand into your app's visual language highly encouraged! Touch feedback Before Android KitKat, Android's default touch feedback color was a vibrant blue. Every touch resulted in a jolt of high-contrast color, in a shade that might not have mixed well with your brand's color(s). In Android KitKat and beyond, touch feedback is subtle: when something is touched, by default its background color slightly darkens or lightens. This provides two benefits: (1) sprinkles of encouragement are more pleasant than jolts, and (2) incorporating your branding is much easier because the default touch feedback works with whatever hue you choose. Check the updated Touch Feedback page for more details.

  • New in Android

    46 Content from developer.android.com/design/patterns/new.html through their Creative Commons Attribution 2.5 license

    Full screen Android KitKat has improved support for letting your app use the entire screen, with a few different approaches to meet the varying needs of apps and content. The new Full Screen page will guide you in setting the stage for deep user engagement.

    Gestures The updated Gestures page covers new and updated gestures introduced in Android KitKat: double touch drag and double touch. These gestures are used for changing the viewing size of content.

  • New in Android

    47 Content from developer.android.com/design/patterns/new.html through their Creative Commons Attribution 2.5 license

    Android 4.1 Jelly Bean Notifications Notifications have received some notable enhancements in Android 4.1:

    Users can act on notifications immediately from the drawer Notifications are more flexible in size and layout A priority flag helps sort notifications by importance Notifications can be collapsed and expanded

    The base notification layout has not changed, so app notifications designed for versions earlier than Jelly Bean still look and work the same. Check the updated Notifications page for more details.

    Resizable Application Widgets Widgets are an essential aspect of home screen customization, allowing "at-a-glance" views of an app's most important data and functionality right from the user's home screen. Android 4.1 introduces improved App Widgets that can automatically resize and load different content based upon a number of factors including:

    Where the user drops them on the home screen The size to which the user expands them The amount of room available on the home screen

    You can supply separate landscape and portrait layouts for your widgets, which the system inflates as appropriate when the screen orientation changes. The Application Widgets page has useful details about widget types, limitations, and design considerations.

  • New in Android

    48 Content from developer.android.com/design/patterns/new.html through their Creative Commons Attribution 2.5 license

    Accessibility One of Android's missions is to organize the world's information and make it universally accessible and useful. Our mission applies to all users-including people with disabilities such as visual impairment, color deficiency, hearing loss, and limited dexterity. The new Accessibility page provides details on how to design your app to be as accessible as possible by:

    Making navigation intuitive Using recommended touch target sizes Labeling visual UI elements meaningfully Providing alternatives to affordances that time out Using standard framework controls or enable TalkBack for custom controls Trying it out yourself

    You can supply separate landscape and portrait layouts for your widgets, which the system inflates as appropriate when the screen orientation changes. The Widgets page has useful details about widget types, limitations, and design considerations.

    Android 4.0 Ice Cream Sandwich Navigation bar Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a virtual navigation bar that houses the Back, Home and Recents buttons. Read the Compatibility pattern to learn how the OS adapts to phones with hardware buttons and how pre-Android 3.0 apps that rely on menu keys are supported.

    Action bar The action bar is the most important structural element of an Android app. It provides consistent navigation across the platform and allows your app to surface actions.

  • New in Android

    49 Content from developer.android.com/design/patterns/new.html through their Creative Commons Attribution 2.5 license

    Multi-pane layouts Creating apps that scale well across different form factors and screen sizes is important in the Android world. Multi-pane layouts allow you to combine different activities that show separately on smaller devices into richer compound views for tablets.

    Selection The long press gesture which was traditionally used to show contextual actions for objects is now used for data selection. When selecting data, contextual action bars allow you to surface actions.

  • Gestures

    50 Content from developer.android.com/design/patterns/gestures.html through their Creative Commons Attribution 2.5 license

    14. Gestures Content from developer.android.com/design/patterns/gestures.html through their Creative Commons Attribution 2.5 license Gestures allow users to interact with your app by manipulating the screen objects you provide. The following table shows the core gesture set that is supported in Android.

    Touch Triggers the default functionality for a given item.

    Action

    Press, lift

    Long press Enters data selection mode. Allows you to select one or more items in a view and act upon the data using a contextual action bar. Avoid using long press for showing contextual menus.

    Action

    Press, wait, lift

  • Gestures

    51 Content from developer.android.com/design/patterns/gestures.html through their Creative Commons Attribution 2.5 license

    Swipe or drag Scrolls overflowing content, or navigates between views in the same hierarchy. Swipes are quick and affect the screen even after the finger is picked up. Drags are slower and more precise, and the screen stops responding when the finger is picked up.

    Action

    Press, move, lift

    Long press drag Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).

    Action

    Long press, move, lift

    Double touch

  • Gestures

    52 Content from developer.android.com/design/patterns/gestures.html through their Creative Commons Attribution 2.5 license

    Scales up a standard amount around the target with each repeated gesture until reaching maximum scale. For nested views, scales up the smallest targetable view, or returns it to its original scale. Also used as a secondary gesture for text selection.

    Action

    Two touches in quick succession

    Double touch drag Scales content by pushing away or pulling closer, centered around gesture.

    Action

    A single touch followed in quick succession by a drag up or down:

    Dragging up decreases content scale Dragging down increases content scale Reversing drag direction reverses scaling.

    Pinch open Zooms into content.

    Action

    2-finger press, move outwards, lift

  • Gestures

    53 Content from developer.android.com/design/patterns/gestures.html through their Creative Commons Attribution 2.5 license

    Pinch close Zooms out of content.

    Action

    2-finger press, move inwards, lift

  • App Structure

    54 Content from developer.android.com/design/patterns/app-structure.html through their Creative Commons Attribution 2.5 license

    15. App Structure Content from developer.android.com/design/patterns/app-structure.html through their Creative Commons Attribution 2.5 license Apps come in many varieties that address very different needs. For example:

    Apps such as Calculator or Camera that are built around a single focused activity handled from a single screen

    Apps such as Phone whose main purpose is to switch between different activities without deeper navigation

    Apps such as Gmail or the Play Store that combine a broad set of data views with deep navigation

    Your app's structure depends largely on the content and tasks you want to surface for your users.

    General Structure A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is deep and complex, category views connect top level and detail views.

    Top level views The top level of the app typically consists of the different views that your app supports. The views either show different representations of the same data or expose an altogether different functional facet of your app. Category views Category views allow you to drill deeper into your data. Detail/edit view The detail/edit view is where you consume or create data.

    Top Level The layout of your start screen requires special attention. This is the first screen people see after launching your app, so it should be an equally rewarding experience for new and frequent visitors alike.

  • App Structure

    55 Content from developer.android.com/design/patterns/app-structure.html through their Creative Commons Attribution 2.5 license

    Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure your start screen experience accordingly. Put content forward Many apps focus on the content display. Avoid navigation-only screens and instead let people get to the meat of your app right away by making content the centerpiece of your start screen. Choose layouts that are visually engaging and appropriate for the data type and screen size.

    Play Music allows navigation among artists, albums, and playlists through rich content display. It is also enriched with tailored recommendations and promotions that surface content of interest to the user. Search is readily available from the action bar. Set up action bars for navigation and actions All screens in your app should display action bars to provide consistent navigation and surface important actions. At the top level, special considerations apply to the action bar:

    Use the action bar to display your app's icon or title. 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. If your app allows people to create content, consider making the content accessible right from the

    top level. If your content is searchable, include the Search action in the action bar so people can cut through

    the navigation hierarchy.

  • App Structure

    56 Content from developer.android.com/design/patterns/app-structure.html through their Creative Commons Attribution 2.5 license

    A calendar is about productivity, so an efficient, easy-to-skim view with higher data density works well. Navigation supports switching views of day, week, month, and agenda views. Top Level Switching With View Controls 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: Fixed tabs Fixed tabs 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. Fixed tabs should always allow the user to navigate between the views by swiping left or right on the content area. Use tabs if:

    You expect your app's users to switch views frequently. You have a limited number of up to three top-level views. You want the user to be highly aware of the alternate views.

    Default fixed tabs shown in Holo Dark & Light. Spinners A spinner is a drop-down menu that allows users to switch between views of your app. Use a spinner in the main action bar if:

    You don't want to give up the vertical screen real estate for a dedicated tab bar. 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).

  • App Structure

    57 Content from developer.android.com/design/patterns/app-structure.html through their Creative Commons Attribution 2.5 license

    Action bar spinner from Calendar application. Navigation drawers A navigation drawer 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. Use navigation drawers if:

    You don't want to give up the vertical screen real estate for a dedicated tab bar. You have a large number of top-level views. You want to provide direct access to screens on lower levels. You want to provide quick navigation to views which don't have direct relationships between each

    other. You have particularly deep navigation branches.

    Navigation drawer from the Keep app. Don't mix and match 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.

    Categories Generally, the purpose of a deep, data-driven app is to navigate through organizational categories to the detail level, where data can be viewed and managed. Minimize perceived navigation effort by keeping your apps shallow.

  • App Structure

    58 Content from developer.android.com/design/patterns/app-structure.html through their Creative Commons Attribution 2.5 license

    Even though the number of vertical navigation steps from the top level down to the detail views is typically dictated by the structure of your app's content, there are several ways you can cut down on the perception of onerous navigation. Use tabs to combine category selection and data display This can be successful if the categories are familiar or the number of categories is small. It has the advantage that a level of hierarchy is removed and data remains at the center of the user's attention. Navigating laterally between data-rich categories is more akin to a casual browsing experience than to an explicit navigation step. If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to minimize navigational effort. Rule of thumb: no more than 57 tabs.

    The Play Store app uses tabs to simultaneously show category choice and content. To navigate between categories, users can swipe left/right on the content. If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are in view at the same time.

  • App Structure

    59 Content from developer.android.com/design/patterns/app-structure.html through their Creative Commons Attribution 2.5 license

    People uses fixed tabs to switch between different, relatively unrelated functional areas. For more discussion, see the Tabs design guide. Allow cutting through hierarchies Take advantage of shortcuts that allow people to reach their goals quicker. To allow top-level invocation of actions for a data item from within list or grid views, display prominent actions directly on list view items using drop-downs or split list items. This lets people invoke actions on data without having to navigate all the way down the hierarchy.

    Music allows the user to act upon a data item (song) from within the category view (album), thereby removing the need to navigate all the way down to the song's detail view. Acting upon multiple data items Even though category views mostly serve to guide people to content detail, keep in mind that there are often good reasons to act on collections of data as well. For example, if you allow people to delete an item in a detail view, you should also allow them to delete multiple items in the category view. Analyze which detail view actions are applicable to collections of items. Then use multi-select to allow application of those actions to multiple items in a category view. For more discussion, see the Selection design guide.

    Details 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. Layout Consider the activities people will perform in the detail view and arrange the layout accordingly.

  • App Structure

    60 Content from developer.android.com/design/patterns/app-structure.html through their Creative Commons Attribution 2.5 license

    The purpose of the People app's detail view is to surface communication options. The list view allows for efficient scanning and quick access of phone numbers, email addresses and other information items. Split items are used to combine calling and messaging into one compact line item. Make navigation between detail views efficient If your users are likely to want to look at multiple items in sequence, allow them to navigate between items from within the detail view. Use swipe views or other techniques, such as thumbnail view controls, to achieve this.

    Gmail using swipe views to navigate from detail view to detail view.

  • App Structure

    61 Content from developer.android.com/design/patterns/app-structure.html through their Creative Commons Attribution 2.5 license

    In addition to supporting swipe gestures to move left or right through pages, Magazines provides a thumbnail view control that lets people quickly jump to specific pages. For more discussion, see the Swipe Views design guide. Checklist

    Find ways to display useful content on your start screen. Use action bars to provide consistent navigation. Keep your hierarchies shallow by using horizontal navigation and shortcuts. Use multi-select to allow the user to act on collections of data. Allow for quick navigation between detail items with swipe views.

  • Navigation with Back and Up

    62 Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license

    16. Navigation with Back and Up Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license Developer Docs Implementing Effective Navigation Consistent navigation is an essential component of the overall user experience. Few things frustrate users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0 introduced significant changes to the global navigation behavior. Thoughtfully following the guidelines for Back and Up will make your app's navigation predictable and reliable for your users. Android 2.3 and earlier relied upon the system Back button for supporting navigation within an app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared: the Up button, consisting of the app icon and a left-point caret.

    Up vs. Back The Up button is used to navigate within an app based on the hierarchical relationships between screens. For instance, if screen A displays a list of items, and selecting an item leads to screen B (which presents that item in more detail), then screen B should offer an Up button that returns to screen A. If a screen is the topmost one in an app (that is, the app's home), it should not present an Up button. The system Back button is used to navigate, in reverse chronological order, through the history of screens the user has recently worked with. It is generally based on the temporal relationships between screens, rather than the app's hierarchy. When the previously viewed screen is also the hierarchical parent of the current screen, pressing the Back button has the same result as pressing an Up buttonthis is a common occurrence. However, unlike the Up button, which ensures the user remains within your app, the Back button can return the user to the Home screen, or even to a different app.

    The Back button also supports a few behaviors not directly tied to screen-to-screen navigation:

    Dismisses floating windows (dialogs, popups) Dismisses contextual action bars, and removes the highlight from the selected items Hides the onscreen keyboard (IME)

  • Navigation with Back and Up

    63 Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license

    Navigation Within Your App Navigating to screens with multiple entry points Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached from multiple entry pointssuch as a settings screen that can be reached from any other screen in your app. In this case, the Up button should choose to return to the referring screen, behaving identically to Back. Changing view within a screen Changing view options for a screen does not change the behavior of Up or Back: the screen is still in the same place within the app's hierarchy, and no new navigation history is created. Examples of such view changes are:

    Switching views using tabs and/or left-and-right swipes Switching views using a dropdown (aka collapsed tabs) Filtering a list Sorting a list Changing display characteristics (such as zooming)

    Navigating between sibling screens When your app supports navigation from a list of items to a detail view of one of those items, it's often desirable to support direction navigation from that item to another one which precedes or follows it in the list. For example, in Gmail, it's easy to swipe left or right from a conversation to view a newer or older one in the same Inbox. Just as when changing view within a screen, such navigation does not change the behavior of Up or Back.

  • Navigation with Back and Up

    64 Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license

    However, a notable exception to this occurs when browsing between related detail views not tied together by the referring listfor example, when browsing in the Play Store between apps from the same developer, or albums by the same artist. In these cases, following each link does create history, causing the Back button to step through each previously viewed screen. Up should continue to bypass these related screens and navigate to the most recently viewed container screen.

  • Navigation with Back and Up

    65 Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license

    You have the ability to make the Up behavior even smarter based on your knowledge of detail view. Extending the Play Store example from above, imagine the user has navigated from the last Book viewed to the details for the Movie adaptation. In that case, Up can return to a container (Movies) which the user hasn't previously navigated through.

  • Navigation with Back and Up

    66 Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license

    Navigation into Your App via Home Screen Widgets and Notifications You can use Home screen widgets or notifications to help your users navigate directly to screens deep within your app's hierarchy. For example, Gmail's Inbox widget and new message notification can both bypass the Inbox screen, taking the user directly to a conversation view. For both of these cases, handle the Up button as follows:

    If the destination screen is typically reached from one particular screen within your app, Up should navigate to that screen.

    Otherwise, Up should navigate to the topmost ("Home") screen of your app.

    In the case of the Back button, you should make navigation more predictable by inserting into the task's back stack the complete upward navigation path to the app's topmost screen. This allows users who've forgotten how they entered your app to navigate to the app's topmost screen before exiting. As an example, Gmail's Home screen widget has a button for diving directly to its compose screen. Up or Back from the compose screen would take the user to the Inbox, and from there the Back button continues to Home.

  • Navigation with Back and Up

    67 Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license

    Indirect notifications When your app needs to present information about multiple events simultaneously, it can use a single notification that directs the user to an interstitial screen. This screen summarizes these events, and provides paths for the user to dive deeply into the app. Notifications of this style are called indirect notifications. Unlike standard (direct) notifications, pressing Back from an indirect notification's interstitial screen returns the user to the point the notification was triggered fromno additional screens are inserted into the back stack. Once the user proceeds into the app from its interstitial screen, Up and Back behave as for standard notifications, as described above: navigating within the app rather than returning to the interstitial. For example, suppose a user in Gmail receives an indirect notification from Calendar. Touching this notification opens the interstitial screen, which displays reminders for several different events. Touching Back from the interstitial returns the user to Gmail. Touching on a particular event takes the user away from the interstitial and into the full Calendar app to display details of the event. From the event details, Up and Back navigate to the top-level view of Calendar.

  • Navigation with Back and Up

    68 Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license

    Pop-up notifications Pop-up notifications bypass the notification drawer, instead appearing directly in front of the user. They are rarely used, and should be reserved for occasions where a timely response is required and the interruption of the user's context is necessary. For example, Talk uses this style to alert the user of an invitation from a friend to join a video chat, as this invitation will automatically expire after a few seconds. In terms of navigation behavior, pop-up notifications closely follow the behavior of an indirect notification's interstitial screen. Back dismisses the pop-up notification. If the user navigates from the pop-up into the notifying app, Up and Back follow the rules for standard notifications, navigating within the app.

  • Navigation with Back and Up

    69 Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license

    Navigation Between Apps One of the fundamental strengths of the Android system is the ability for apps to activate each other, giving the user the ability to navigate directly from one app into another. For example, an app that needs to capture a photo can activate the Camera app, which will return the photo to the referring app. This is a tremendous benefit to both the developer, who can easily leverage code from other apps, and the user, who enjoys a consistent experience for commonly performed actions. To understand app-to-app navigation, it's important to understand the Android framework behavior discussed below. Activities, tasks, and intents In Android, an activity is an application component that defines a screen of information and all of the associated actions the user can perform. Your app is a collection of activities, consisting of both the activities you create and those you re-use from other apps. A task is the sequence of activities a user follows to accomplish a goal. A single task can make use of activities from just one app, or may draw on activities from a number of different apps. An intent is a mechanism for one app to signal it would like another app's assistance in performing an action. An app's activities can indicate which intents they can respond to. For common intents such as "Share", the user may have many apps installed that can fulfill that request. Example: navigating between apps to support sharing To understand how activities, tasks, and intents work together, consider how one app allows users to share content by using another app. For example, launching the Play Store app from Home begins new Task A (see figure below). After navigating through the Play Store and touching a promoted book to see its details,

  • Navigation with Back and Up

    70 Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license

    the user remains in the same task, extending it by adding activities. Triggering the Share action prompts the user with a dialog listing each of the activities (from different apps) which have registered to handle the Share intent.

    When the user elects to share via Gmail, Gmail's compose activity is added as a continuation of Task Ano new task is created. If Gmail had its own task running in the background, it would be unaffected. From the compose activity, sending the message or touching the Back button returns the user to the book details activity. Subsequent touches of Back continue to navigate back through the Play Store, ultimately arriving at Home.

  • Navigation with Back and Up

    71 Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license

    However, by touching Up from the compose activity, the user indicates a desire to remain within Gmail. Gmail's conversation list activity appears, and a new Task B is created for it. New tasks are always rooted to Home, so touching Back from the conversation list returns there.

  • Navigation with Back and Up

    72 Content from developer.android.com/design/patterns/navigation.html through their Creative Commons Attribution 2.5 license

    Task A persists in the background, and the user may return to it later (for example, via the Recents screen). If Gmail already had its own task running in the background, it would be replaced with Task Bthe prior context is abandoned in favor of the user's new goal. When your app registers to handle intents with an activity deep within the app's hierarchy, refer to Navigation into Your App via Home Screen Widgets and Notifications for guidance on how to specify Up navigation.

  • Action Bar

    73 Content from developer.android.com/design/patterns/actionbar.html through their Creative Commons Attribution 2.5 license

    17. Action Bar Content from developer.android.com/design/patterns/actionbar.html through their Creative Commons Attribution 2.5 license

    Developer Docs Action Bar The action bar is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app. It provides several key functions:

    Makes important actions prominent and accessible in a predictable way (such as New or Search). Supports consistent navigation and view switching within apps. Reduces clutter by providing an action overflow for rarely used actions. Provides a dedicated space for giving your app an identity.

    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.

    General Organization The action bar is split into four different functional areas that apply to most apps.

    App icon The app icon establishes your app's identity. It can be replaced with a different logo or branding if you wish. Important: If the app is currently not displaying the top-level screen, be sure to display the Up caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of Up navigation, see the Navigation pattern.

    App icon with and without "up" affordance. View control If your app displays data in different views, this segment of the action bar allows users to switch views. Examples of view-switching controls are drop-down menus or tab controls. For more information on view-switching, see the App Structure pattern. If your app doesn't support different views, you can also use this space to display non-interactive content, such as an app title or longer branding information. Action buttons Show the most important actions of your app in the actions section. Actions that don't fit in the action bar are moved automatically to the action overflow. Long-press on an icon to view the action's name.

  • Action Bar

    74 Content from developer.android.com/design/patterns/actionbar.html through their Creative Commons Attribution 2.5 license

    Action overflow Move less often used actions to the action overflow.

    Adapting to Rotation and Different Screen Sizes One of the most important UI issues to consider when creating an app is how to adjust to screen rotation on different screen sizes. You can adapt to such changes by using split action bars, which allow you to distribute action bar content across multiple bars located below the main action bar or at the bottom of the screen.

    Layout Considerations for Split Action Bars When splitti