The document discusses best practices for Android design, highlighting the importance of supporting multiple screen sizes and using scalable components like vector graphics and flexible layouts. It explains key concepts such as dpi, dp, and sp, which are critical for creating user-friendly interfaces. Additionally, it emphasizes the need for standardization in component dimensions and utilizing styles and themes to enhance collaboration between designers and developers.

1. Android Talks #3
Android Design Best Practices - for
Designers and Developers
Marko Vitas

2. Scope
• Motivation!
• Supporting multiple screen sizes!
• Smart & flexible design approach !
• Custom components

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. Supporting Multiple
Screen Sizes

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. 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. 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. 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. sp (II)

10. dpi / dp / sp

11. Smart & Flexible
Design Approach

12. Layout Types (I) Linear

13. Layout Types (II) - Relative

14. Drawables
• Animation drawable!
• Transition drawable!
• Level list drawable!
• Selector drawable !
• Graphic!
• 9Patch

15. 9patch
• Click within the 1-pixel perimeter to draw the lines that
define the stretchable patches and (optional) content area.
• Left & top to
define stretchable
area!
• Bottom & right
content area

16. • Examples of android:scaleType attribute. Top row (l-r) center,
centerCrop, centerInside. Bottom row (l-r): fitCenter, fitStart, fitEnd, fitXY.

17. Styles
• Inheritance

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. Themes
• Inheritance!
• Watch out for API level!
• Define themes in values, values-v11, values-v14!
• Check out Sherlock themes

20. Dimen
• Dimen values are useful to define !
• Bool!
• Color!
• Dimension - dp/sp/pt/px/mm/in!
• ID!
• Integer!
• Integer Array!
• Typed Array

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. Project Resource Structure (II)

23. Project Resource Structure (III)

24. Fonts
• Static init in onCreate in Application class!
!
!
!
!

25. Custom components

26. Custom View

27. Custom Sexy Component

28. Canvas And Custom Components

29. Developer
Options

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. 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. References (|)
• http://android-holo-colors.com/!
• http://coh.io/adpi/!
• http://blog.edwinevans.me/?p=131!
• http://developer.android.com/training/basics/supporting-
devices/screens.html!
• http://blog.edwinevans.me/?p=131!
• https://developer.android.com/training/displaying-bitmaps/
manage-memory.html

33. References (||)
• Holo-colors plugin —> https://github.com/jeromevdl/android-holo-colors-
idea-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/providing-
resources.html

34. ?
Marko Vitas, @vitongs