There is a gap between android developer and designer, there are a lot of issues need a lot of time and effort to be implemented while they means nothing for designer, and gap between developer and designer leads to 30 - 50% extra time and effort. This presentation monitors a lot of those things that cause the gap, and suggests the ideal solution.

1. Bridging the Gap
Between Android
Developer and Designer
Prepared by
Bilal Sammour
bilalsammour@gmail.com
http://jo.linkedin.com/in/bilaljo/

2. Bridging the Gap Between Android Developer
and Designer
Designer
Developer
• Great design
• Cool road
• Great development
• Platform limitation

3. Gap between developer and designer leads to

4. Gap between developer and designer leads to
• 30 - 50 % extra time and effort
• Gap between design and the real implementation
• A lot of changes

5. Supporting Multiple Screens

6. 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
• Dp is the main unit, instead of px

7. Px <=> Dp
px => dp
dp => px
• dp = px / (dpi / 160)
• px = dp * (dpi / 160)
dpi = 480
dp = 16
px = 16 * (480 / 160)
= 48px

8. A set of generalized densities

9. Padding and Margin
• Predefined spaces have to be used
• Spaces must be device independent
• Examples
• Horizontal padding
• Vertical padding
• Margins between widgets (objects)

10. Padding and Margin
Green: 16dp
Red: 16dp
Red: 16dp for 10 inch
tablets in landscape
Blue: 8dp
• Predefined spaces
• New spaces can be defined

11. Action Bar & Navigation
No Tabs
• Don’t put tabs in detail
screen

12. Generalized sizes

13. Preferred Size
S4
1080 X 1920
XXHDPI
Feb 2014

14. Virtual Buttons
• Some devices have
virtual buttons, for
example Nexus 4
• Some devices don’t,
for example S4

15. Tablet and Phone

16. Tablet and Phone

17. Text Overlapping (In Localization)
The same word takes more
space in different languages

18. Widgets

19. Edit Text
Focused; App color

20. Buttons
•
At least two states must be provided
•
•
Default
Pressed
•
Change color, stroke ...
•
In ImageButton, at least two images must
be provided

21. Widgets Sizes

22. Text Size
• Main text categories
• Small, 14 sp, 42 px for S4 (XXHDPI)
• Medium, 18 sp, 54 px for S4 (XXHDPI)
• Large, 22 sp, 66 px for S4 (XXHDPI)
• Avoid using text sizes smaller than 12sp

23. Icons
Action
Small / Contextual Icons
Notification

24. Welcome to Sliding Menu

26. Don't mimic UI elements from other
platforms

27. Don't carry over platform-specific icons

28. Don't use bottom tab bars

29. Don't hardcode links to other apps

30. Don't use right-pointing carets on line items

31. Progress

32. Thank you!
Prepared by
Bilal Sammour
bilalsammour@gmail.com
http://jo.linkedin.com/in/bilaljo/