Android Talks #3 Android Design Best Practices - for Designers and Developers
Marko Vitas
Scope
• Motivation!
• Supporting multiple screen sizes!
• Smart & flexible design approach !
• Custom components
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
Supporting Multiple Screen Sizes
How Do Designers Prepare Materials?
• Vector graphics !
• Scale up/down!
• Exporting graphics for different screen densities!
• What does all of this mean for Android?
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
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
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
sp (II)
dpi / dp / sp
Smart & Flexible Design Approach
Layout Types (I) Linear
Layout Types (II) - Relative
Drawables• Animation drawable!
• Transition drawable!
• Level list drawable!
• Selector drawable !
• Graphic!
• 9Patch
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
• Examples of android:scaleType attribute. Top row (l-r) center, centerCrop, centerInside. Bottom row (l-r): fitCenter, fitStart, fitEnd, fitXY.
Styles
• Inheritance
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.
Themes• Inheritance!
• Watch out for API level!
• Define themes in values, values-v11, values-v14!
• Check out Sherlock themes
Dimen• Dimen values are useful to define !
• Bool!
• Color!
• Dimension - dp/sp/pt/px/mm/in!
• ID!
• Integer!
• Integer Array!
• Typed Array
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
Project Resource Structure (II)
Project Resource Structure (III)
Fonts• Static init in onCreate in Application class!
!
!
!
!
Custom components
Custom View
Custom Sexy Component
Canvas And Custom Components
Developer Options
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
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
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
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
?Marko Vitas, @vitongs
