Android Talks #3 Android Design Best Practices - for Designers and Developers

1,480 views

Published on

The goal of the presentation is to improve the level of cooperation between designers and developers. Designers will get a look at how the layout designing process for Android works. In turn, developers will learn best practices to better handle design changes and improve code quality.

We've discussed the presentation in advance with both developers and designers, to pinpoint the topics that are of real interest to both parties.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,480
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Android Talks #3 Android Design Best Practices - for Designers and Developers

  1. 1. Android Talks #3 Android Design Best Practices - for Designers and Developers Marko Vitas
  2. 2. Scope • Motivation! • Supporting multiple screen sizes! • Smart & flexible design approach ! • Custom components
  3. 3. Motivation • Tired of not knowing what dpi, dp and sp mean?! • Having nightmares of “little” design changes that affect the whole app? (fonts? styles? themes?) ! • Designers and developers, lets make each others life better.! • Lets define a standard
  4. 4. Supporting Multiple Screen Sizes
  5. 5. How Do Designers Prepare Materials? • Vector graphics ! • Scale up/down! • Exporting graphics for different screen densities! • What does all of this mean for Android?
  6. 6. dpi • screen density = horizontal width (resolution in px) / actual physical size in inches! • dpi (dots per inch) i.e. ppi (pixels per inch)! • density buckets: 120,160, 240, 320, 480, 640 
 3 : 4 : 6 : 8 : 12 : 16! • tvdpi 213dpi
  7. 7. dp • A virtual pixel unit ! • Use when defining UI layout, to express layout dimensions or position in a density-independent way.! • pixels = dps * (density / 160)! • Designers use the baseline (mdpi) density ! • Developers use the exported screens and calculate the width & height in pixels which map directly to dp
  8. 8. sp (I) • dp has constant ratio transition dp = px * ratio.! • sp = px * ratio * scale.! • sp = dp * scale! • Accessibility purpose! • User system settings in display —> fonts
  9. 9. sp (II)
  10. 10. dpi / dp / sp
  11. 11. Smart & Flexible Design Approach
  12. 12. Layout Types (I) Linear
  13. 13. Layout Types (II) - Relative
  14. 14. Drawables • Animation drawable! • Transition drawable! • Level list drawable! • Selector drawable ! • Graphic! • 9Patch
  15. 15. 9patch • Left & top to define stretchable area! • Bottom & right content area • Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) content area.
  16. 16. • Examples of android:scaleType attribute. Top row (l-r) center, centerCrop, centerInside. Bottom row (l-r): fitCenter, fitStart, fitEnd, fitXY.
  17. 17. Styles • Inheritance
  18. 18. Attributes • You can define attributes in the top <resources> element or inside of a <declare-styleable> element. Note, all attributes share the same global namespace.
  19. 19. Themes • Inheritance! • Watch out for API level! • Define themes in values, values-v11, values-v14! • Check out Sherlock themes
  20. 20. Dimen • Dimen values are useful to define ! • Bool! • Color! • Dimension - dp/sp/pt/px/mm/in! • ID! • Integer! • Integer Array! • Typed Array
  21. 21. Project Resource Structure (I) • Drawable-hpdi…! • Layout-hdpi…, ! • Layout-port and layout-land! • Values-hdpi…! • Concatenating configurations - layout-sw600dp-land! • Layout-sw600dp - declaring tablet layouts in reference
  22. 22. Project Resource Structure (II)
  23. 23. Project Resource Structure (III)
  24. 24. Fonts • Static init in onCreate in Application class! ! ! ! !
  25. 25. Custom components
  26. 26. Custom View
  27. 27. Custom Sexy Component
  28. 28. Canvas And Custom Components
  29. 29. Developer Options
  30. 30. Conclusion (I) • New rule: in exported screens 1px equals 1dp. Our designers are designing for 160 dpi screens, which is the baseline for density for the Android OS! • Use Preview to calculate distances between objects in the layout! • Develop the app taking into consideration that a font could change! • Use styles! • Use attributes in order to be able to switch styles in themes and add custom data to your views
  31. 31. Conclusion (II) • Standardise frequently used component’s dimensions! • Example: list items, dashboard items, specific screen dimensions like Settings screen, Drawer menu items etc.! • Create custom styles and views for these components! • Use wisely
  32. 32. References (|) • http://android-holo-colors.com/! • http://coh.io/adpi/! • http://blog.edwinevans.me/?p=131! • http://developer.android.com/training/basics/supportingdevices/screens.html! • http://blog.edwinevans.me/?p=131! • https://developer.android.com/training/displaying-bitmaps/ manage-memory.html
  33. 33. References (||) • Holo-colors plugin —> https://github.com/jeromevdl/android-holo-colorsidea-plugin! • http://android-holo-colors.com/! • ImageView —> http://www.peachpit.com/articles/article.aspx? p=1846580&seqNum=2! • http://developer.android.com/guide/practices/ screens_support.html#DeclaringTabletLayouts! • http://developer.android.com/design/patterns/settings.html! • http://developer.android.com/guide/topics/resources/providingresources.html
  34. 34. ? Marko Vitas, @vitongs

×