Your SlideShare is downloading. ×
Design guidelines for android developers
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Design guidelines for android developers


Published on

Design guidelines for Android

Design guidelines for Android

Published in: Technology, Business

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Boutique product development company It is amazing what you can accomplish when you have a client-centric team to deliver outstanding products.
  • 2. Boutique product development company It is amazing what you can accomplish when you have a client-centric team to deliver outstanding products. Design Guidelines for Android Developers Qandil Tariq | Software Engineer Lala Rukh | Software Engineer
  • 3. Design Principles Design Guidelines for Android Developers Agenda Style •Devices And Display •Supporting Multiple Screens •Multi-pane layouts •Themes and styles •Touch Feedback •Metrics and Grids •Iconography •Branding •Writing Style •9-patch Images •Android utilities Qandil Tariq | Software Engineer
  • 4. Design Principles Devices and Displays Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and form factors Qandil Tariq | Software Engineer
  • 5. Design Principles Devices and Displays Problem: How to handle multiple devices Qandil Tariq | Software Engineer
  • 6. Design Principles Devices and Displays Solutions •The ideal solution is to design the user interface of your application so that it appears correctly on the widest possible range of devices •Create apps that gracefully scale from large tablets to smaller phones How to achieve this •The best way to achieve this is to design the user interface using layout managers that do not rely on absolute positioning Qandil Tariq | Software Engineer
  • 7. Design Principles Supporting Multiple Screens Terms and concepts • Screen size • Actual physical size, measured as the screen's diagonal. For simplicity, Android groups all actual screen sizes into four generalized sizes: • Small • Normal • Large • Extra large Qandil Tariq | Software Engineer
  • 8. Design Principles Supporting Multiple Screens Terms and concepts • Screen density • The quantity of pixels within a physical area of the screen • Usually referred to as dpi (dots per inch). For example, a "low" density screen has fewer pixels within a given physical area, compared to a "normal" or "high" density screen. • Android groups all actual screen densities into four generalized densities: • Low • Medium • High • Extra high Qandil Tariq | Software Engineer
  • 9. Design Principles Supporting Multiple Screens Terms and concepts • Orientation • The orientation of the screen from the user's point of view. • There are two types of orientation: • Portrait • Landscape • Resolution • The total number of physical pixels on a screen. • Applications do not work directly with resolution; applications should be concerned only with screen size and density, as specified by the generalized size and density groups. Qandil Tariq | Software Engineer
  • 10. Design Principles Supporting Multiple Screens Density-independent pixel (dp) • A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way • The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen px = dp * (dpi / 160). Qandil Tariq | Software Engineer
  • 11. Design Principles Devices and Displays Android qualifiers that allow you to provide special resources for different screen configurations. Link : Qandil Tariq | Software Engineer
  • 12. Design Principles Devices and Displays Relation between screen size and dpi. Qandil Tariq | Software Engineer
  • 13. Design Principles Devices and Displays Screen Sizes and Densities in market Qandil Tariq | Software Engineer
  • 14. Design Principles Devices and Displays Be flexible Stretch and compress your layouts Optimize layout Create compound views that combine multiple views Qandil Tariq | Software Engineer
  • 15. Design Principles Devices and Displays Assets for all l Provide resources for different screen densities (DPI) to ensure that your app looks great on any device. l Almost every application should provide alternative resources to support specific device configurations. Qandil Tariq | Software Engineer
  • 16. Design Principles Devices and Displays Alternative layouts l Provide alternative layouts for some of the different screen sizes l The configuration qualifiers you can use to provide size-specific resources are small, normal, large, and xlarge. For example, layouts for an extra large screen should go in layout-xlarge/ Qandil Tariq | Software Engineer
  • 17. Design Principles Devices and Displays What is the strategy l One approach is to work in the base standard (normal size and MDPI) and scale it up or down for the other buckets l 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. Qandil Tariq | Software Engineer
  • 18. Design Principles Supporting Multiple Screens Best Practices • Use wrap_content, fill_parent, or the dp unit for layout dimensions • Do not use hard-coded pixel values in your application code • Do not use AbsoluteLayout • Use size and density-specific resources Qandil Tariq | Software Engineer
  • 19. Design Principles Multi-pane layouts Combining Multiple Views Into One  On smaller devices your content is typically divided into a master grid or list view and a detail view. Touching an item in the master view opens a different screen showing that item's detail information.  But Tablets have more screen real estate than phones, you can use panels to combine the related list and detail views into a single compound view.  This uses the additional space more efficiently and makes navigating the app easier. Qandil Tariq | Software Engineer
  • 20. Design Principles Multi-pane layouts Compound Views and Orientation Changes  Screens should strive to have the same functionality regardless of orientation.  If you use a compound view in one orientation, try not to split it up when the user rotates the screen.  There are several techniques you can use to adjust the layout after orientation change while keeping functional parity intact. Qandil Tariq | Software Engineer
  • 21. Design Principles Themes and styles •Themes are Android's mechanism for applying a consistent style to an app or activity. • Pick the system theme that best matches the needs and design aesthetics for your app. • • Applying themes will go a long way in helping you to build apps that fit right into the general visual language of Android • Benefits: • It increase code re use ability. • It generalized the main theme of app in one place. • You can specify the color,font or any property related to some view at one place and use it on may places. Qandil Tariq | Software Engineer
  • 22. Design Principles Themes and styles •Android gmail theme: Qandil Tariq | Software Engineer
  • 23. Design Principles Themes And Styles •Styles in Android share a similar philosophy to cascading style sheets in web design •They allow you to separate the design from the content. •A Theme is a style applied to an entire or application, rather than an individual •Styles support inheritance. Qandil Tariq | Software Engineer
  • 24. Design Principles Themes And Styles •A style is a collection of properties that specify the look and format for a or window.  Color  Height  Padding  Font size Qandil Tariq | Software Engineer
  • 25. Design Principles Touch Feedback • Be responsive to touches in a gentle way • Let user know the app is "listening" • Make it subtle • Why its necessary? • Try to feel users their actions are very important for app. Qandil Tariq | Software Engineer
  • 26. Design Principles Touch Feedback •Benefits of feedback:  Communication When your objects react to more complex gestures, help users understand what the outcome will be. Qandil Tariq | Software Engineer
  • 27. Design Principles Touch Feedback l Benefits of feedback:  Boundaries When users try to scroll past the beginning or end of a scrollable area, communicate the boundary with a visual cue. Qandil Tariq | Software Engineer
  • 28. Design Principles Metrics and Grids 48dp Rhythm l Touchable UI components are generally laid out along 48dp units. •On average, 48dp translate to a physical size of about 9mm (with some variability). Qandil Tariq | Software Engineer
  • 29. Design Principles Metrics and Grids 48dp Rhythm Mind the gaps •Spacing between each UI element is 8dp. Qandil Tariq | Software Engineer
  • 30. Design Principles Metrics and Grids l Why 48dp? 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. Qandil Tariq | Software Engineer
  • 31. Design Principles Iconography l Icons can convey intended message better than text l Design icons for every density range l Taking MDPI as baseline:  LDPI is MDPI x 0.75.  HDPI is MDPI x 1.5.  XHDPI is MDPI x 2.  XXHDPI is MDPI x 3. Lala Rukh | Software Engineer
  • 32. Design Principles Iconography •Launcher  Should be descriptive, explanatory about your app  On Mobile Device – 48x48 dp (MDPI)  Google Play Store tile size – 512x512dp Lala Rukh | Software Engineer
  • 33. Design Principles Iconography •Action Bar l One of the most important design elements for Android app l Provides quick access to more frequent actions l Supports consistent navigation and view switching withins app l A dedicated space to give your app an identity l General structure: 1) App Icon 2) View Control 3) Action Buttons 4) Action Overflow Lala Rukh | Software Engineer
  • 34. Design Principles Iconography •Action Bar  Use contractions. Pictographic, flat, not too detailed  Size for phone – 32x32 dp (MDPI)  Icons matching with theme Lala Rukh | Software Engineer
  • 35. Design Principles Iconography •Small Contextual Icons  Neutral, flat, simple  Use neutral colors  Size – 16X16 dp (MDPI) Lala Rukh | Software Engineer
  • 36. Design Principles Iconography •Notification Icons  Flat and simple  Must be entirely white  Pictographic  Size – 24x24 dp (MDPI) Lala Rukh | Software Engineer
  • 37. Design Principles Iconography •Design Tips • Use vector shapes when possible • Start with large artboards • When scaling, redraw bitmap layers as needed • Use common naming conventions for icon assets Lala Rukh | Software Engineer
  • 38. Design Principles Your Branding •Color  Use color for branding  High contrast color for emphasis Lala Rukh | Software Engineer
  • 39. Design Principles Your Branding •Logo  Using your logo for branding Lala Rukh | Software Engineer
  • 40. Design Principles Your Branding •Icons  Use personalized icons if your brand have them already Lala Rukh | Software Engineer
  • 41. Design Principles Writing Style •Keep it brief •Put the most important thing first Lala Rukh | Software Engineer
  • 42. Design Principles Writing Style •Be friendly •Focus on user's concern, not technical details Lala Rukh | Software Engineer
  • 43. Design Principles Writing Style •Describe only what's necessary, and no more •Avoid repetition If a significant term gets repeated within a screen or block of text, find a way to use it just once. Lala Rukh | Software Engineer
  • 44. Design Principles Writing Style •Words to avoid Lala Rukh | Software Engineer
  • 45. Design Principles 9-patch Images  name.9.png  1 pixel wide guides  Scale up Lala Rukh | Software Engineer
  • 46. Design Principles Android Asset Studio  Launcher Icons  Action Bar and Tab Icons  Notification Icons  Generic icons  Android Action Bar Style Generator  Android Holo Color Generator Lala Rukh | Software Engineer
  • 47. Design Principles Questions Qandil Tariq & Lala Rukh
  • 48. Design Principles Thank You Qandil Tariq & Lala Rukh
  • 49. Design Principles References Qandil Tariq & Lala Rukh