1 of 33

Android Design and Development

when both worlds collide

Franklin "fr4gus" Garcia

Mobile Developer, POP

@fr4gus

2 of 33

Franklin who?

3 of 33

Franklin who?

Mobile Developer at Pop.

on Mobile business since 2002

​

Android dev since 2007 (m3-rc22a)

​

Projects: Grindr (Android and BB), Fresh Direct (iPhone) AllRecipes for Android, NY Post for Android, Cloudtix, *Some MLS team* Android App (currently)

4 of 33

You have

  • an idea
  • read Android Guidelines
  • a list of versions to support
  • a list of screen sizes/resolutions to support

​

How do you start designing?

5 of 33

http://developer.android.com/design/index.html

6 of 33

http://androidniceties.tumblr.com/

7 of 33

Custom vs Native Widgets

Anything can be accomplished

Using only native widgets reduce cost/time but also reduce brand differentiation, giving a very plain UX

​

Customize widgets and UX increase cost/time but also increase UX

8 of 33

Understanding

Android Metric System

devices vary on physical size (inch) and screen resolution (px) defining its density (dpi) and can change their orientation.

​

physical size = small, normal, large, xlarge

​

density = ldpi, mdpi, hdpi, xhdpi

​

orientation = landscape, portrait

9 of 33

Understanding

Android Metric System

10 of 33

Understanding

Android Metric System

dp = density-independent pixels

sp = scale-independent pixels

pt = points - 1/72 of an inch based on physical size of the screen

px = pixels

in = inches mm = milimiters (based on physical size of the screen)

11 of 33

Understanding

Android Metric System

dp = density-independent pixels

sp = scale-independent pixels

pt = points - 1/72 of an inch based on physical size of the screen

px = pixels

in = inches mm = millimiters (based on physical size of the screen)

http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

12 of 33

MDPI

~160PPI

HDPI

~240PPI

XHDPI

~320PPI

3

4

6

8

5.32

13 of 33

Understanding

Android Metric System

MDPI

~160PPI

HDPI

~240PPI

XHDPI

~320PPI

3

4

6

8

50%

25%

5.32

14 of 33

Understanding

Android Metric System

MDPI

~160PPI

HDPI

~240PPI

XHDPI

~320PPI

3

4

6

8

x 2

x 1.5

5.32

15 of 33

Choosing Devices

What devices do you have available for testing?

​

What devices does your project require to support

​

Portrait/Landscape orientation*

16 of 33

Choosing Devices

ADP2 (HTC Dream)

LG Optimus / HTC Dream (MDPI)

320X480DP

Nexus One (HDPI)

320X533DP

Droid (HDPI)

320X570

17 of 33

Choosing Devices

Galaxy Nexus

360X640DP

Nexus 7

600X960DP

Xoom

800X1280DP

18 of 33

Choosing Devices

19 of 33

Sample design

20 of 33

320dp

21 of 33

320dp

360dp

22 of 33

320dp

360dp

23 of 33

600dp

24 of 33

600dp

25 of 33

320dp

360dp

600dp

26 of 33

Other tools

Android Design Preview helps designers to visualize their design right away on the phone, no developer needed*

http://code.google.com/p/android-ui-utils/

27 of 33

Android Design Preview

Demonstration here!

28 of 33

Redlines

Document that details components spacing, alignment, colors, text size/type/color

​

Should exist for every supported "screen width"

29 of 33

Redlines

30 of 33

Deliverables

For every asset, 3 versions (mdpi, hdpi, xhdpi)

​

ActionBar background (1px x 48dp)*

App Actionbar icon (32dp x 32dp)

Package status icon (48dp x 48dp)

Refresh icon (32dp x 32dp)

Right arrow icon (22dp x 12dp)

31 of 33

Eclipse project example

Show example!

32 of 33

Conclusions

Use DP stencils (no need to downscale or upscale while designing)

​

Better communication with Dev

​

User guidelines but don't get tide to it

33 of 33

Thanks!