bridging the gap between android developer and designer

Bridging the Gap Between Android

Developer and Designer

Prepared byBilal Sammour

bilalsammour@gmail.comhttp://jo.linkedin.com/in/bilaljo/

Bridging the Gap Between Android Developer and Designer

Designer• Great design• Cool road

Developer• Great development• Platform limitation

Gap between developer and designer leads to

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

Supporting Multiple Screens

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

Px <=> Dp

px => dp• dp = px / (dpi / 160)

dp => px• px = dp * (dpi / 160)

dpi = 480dp = 16

px = 16 * (480 / 160)= 48px

A set of generalized densities

Padding and Margin

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

Green: 16dpRed: 16dp

Red: 16dp for 10 inch tablets in landscape

Blue: 8dp

Padding and Margin

• Predefined spaces• New spaces can be defined

Action Bar & Navigation

No Tabs

• Don’t put tabs in detail screen

Generalized sizes

Preferred Size

S41080 X 1920

XXHDPI

Feb 2014

Virtual Buttons

• Some devices have virtual buttons, for example Nexus 4

• Some devices don’t, for example S4

Tablet and Phone

Tablet and Phone

Text Overlapping (In Localization)

The same word takes more space in different languages

Widgets

Edit Text

Focused; App color

Buttons

• At least two states must be provided• Default• Pressed

• Change color, stroke ...

• In ImageButton, at least two images must be provided

Widgets Sizes

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

Icons

Action Small / Contextual Icons Notification

Welcome to Sliding Menu

Don't mimic UI elements from other platforms

Don't carry over platform-specific icons

Don't use bottom tab bars

Don't hardcode links to other apps

Don't use right-pointing carets on line items

Progress

Thank you!

Prepared byBilal Sammour

bilalsammour@gmail.comhttp://jo.linkedin.com/in/bilaljo/