This is part of a Android App Training series held at YoungInnovations by Mobile Nepal.

1. HELLO
WE DESIGN FOR ANDROID TODAY

2. Anjan Shrestha
UX Lead,
YoungInnovations
5+ years in UI design and development
http://anjhero.me

3. A small
introduction to
Android UI

4. HOME
Screen

5. ALL APPS
Screen

6. RECENTS
Screen

7. Status Bar
SYSTEM
BARS
Navigation Bar

8. THERE’S ONE TERMINOLOGY
THAT YOU MUST KNOW …

9. THERE’S ONE TERMINOLOGY
THAT YOU MUST KNOW …
SCREEN DENSITY
The number of pixels in a physical area of a screen.

10. The number of pixels in a physical area of a screen.
Measured as Dots Per Inch
DPI

11. ldpi
120
mdpi
160
hdpi
240
xhdpi
320
xxhdpi
480
tvdpi
213

12. WHY
SHOULD I
CARE?

13. Y
DI
E?
Well, you must deliver
images for each of these
guys!
ldpi
mdpi
hdpi
xhdpi
xxdpi
tvdpi

14. liver
these
Because visually,
48px in mdpi = 48px in hdpi
hdpi
vdpi
mdpi
hdpi

15. Defining layout in a density independent way …
DP
Density-independent Pixel
to the rescue

16. On an mdpi (160) screen,
1dp = 1px
That is probably why mdpi is also called the baseline screen in Android.

17. For other screen densities,
px*dpi/160

18. So a 48px icon in mdpi should be …
px*dpi/160
48*320/160
ie.
96px in xhdpi (320)

19. 0.75x
1x
1.5x
2x
4/3x
36px
48px
72px
96px
63px
ldpi
mdpi
hdpi
xhdpi
tvdpi

20. Similarly, other icons as well

21. DP calculator
https://play.google.com/store/apps/
details?id=com.vivek.dpcalculator&hl=en

22. Naming these icons

23. Setting up workspace

24. LAUNCHER
ICONS

25. Android specifications on
launcher icons for different
screen densities
36px
48px
72px
96px
ldpi
mdpi
hdpi
xhdpi
63px
tvdpi

26. Launcher Icon for display on Google Play
ons on
different
96px
xhdpi
63px
tvdpi
512*512 px

27. Designing
the User
Interface
1
2
3
4
Write
down
the
objec/ve(s)
of
your
applica/on.
Draw
wireframes
(start
with
sketching
on
paper),
get
feedback,
refine.
Pick
your
favorite
design
tool.
Mine
is
Adobe
Fireworks
and
Sketch
(mac
only)
Start
designing
based
on
your
wireframe.

28. Designing
the User
Interface
1
2
3
4
Write
down
the
objec/ve(s)
of
your
applica/on.
Draw
wireframes
(start
with
sketching
on
paper),
get
feedback,
refine.
Pick
your
favorite
design
tool.
Mine
is
Adobe
Fireworks
and
Sketch
(mac
only)
Start
designing
based
on
your
wireframe.

29. Designing
the User
Interface
1
2
3
4
Write
down
the
objec/ve(s)
of
your
applica/on.
Draw
wireframes
(start
with
sketching
on
paper),
get
feedback,
refine.
Pick
your
favorite
design
tool.
Mine
is
Adobe
Fireworks
and
Sketch
(mac
only)
Start
designing
based
on
your
wireframe.

30. Designing
the User
Interface
1
2
3
4
Write
down
the
objec/ve(s)
of
your
applica/on.
Draw
wireframes
(start
with
sketching
on
paper),
get
feedback,
refine.
Pick
your
favorite
design
tool.
Mine
is
Adobe
Fireworks
and
Sketch
(mac
only)
Start
designing
based
on
your
wireframe.
Adobe Fireworks
Sketch
(Mac only)

31. Designing
the User
Interface
1
2
3
4
Write
down
the
objec/ve(s)
of
your
applica/on.
Draw
wireframes
(start
with
sketching
on
paper),
get
feedback,
refine.
Pick
your
favorite
design
tool.
Mine
is
Adobe
Fireworks
and
Sketch
(mac
only)
Start
designing
based
on
your
wireframe.

32. Follow design patterns

33. No. of actions you can put in action bar

34. Navigation
with action bar
Utilize the main action bar
for displaying the current
view title and an up caret
for navigating up a
hierarchy
Use tabs for navigating
through different views.
Use the bottom bar for
displaying actions

35. Navigation
with
Navigation Drawer

36. Avoid Splash Screens
Get to content directly!

37. Use empty states for
TUTORIALS
Or
PRIMARY
ACTIONS

38. Use login from
popular social
media
for a faster and easier
login/ signup experience

39. Feedback on
actions

40. 48dp
Touch Targets
48dp
48dp

41. Study Design Patterns for more
http://developer.android.com/design/patterns/index.html

42. See Building Blocks section for ready to
use elements
http://developer.android.com/design/building-blocks/index.html

43. For Stencils/ GUI elements
http://developer.android.com/design/downloads/index.html

44. For Android Design Videos
http://developer.android.com/design/videos/index.html

45. For Android Design/ Dev Videos
http://www.youtube.com/user/androiddevelopers

46. Device Art Generator
http://developer.android.com/distribute/promote/device-art.html

47. Android Asset Studio
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

48. Design to solve
problems.
Design that don’t solve problems is only
decoration.

49. THAT’S ALL FOLKS!
WE’LL SEE YOU TOMORROW