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.
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
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
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.
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
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