1. DESIGNING
FOR ANDROID
A short introduction
Saturday, January 5, 13

2. HELLO!
I am Anjan Shrestha
I am UX lead at YoungInnovations
Saturday, January 5, 13

3. TODAY
we will be making this app ...
Saturday, January 5, 13

4. Saturday, January 5, 13

5. And I will be talking about
DESIGN BITS
Saturday, January 5, 13

6. The simple flow
Objective Requirement Mockups
of the app collection
User
Coding & Interface
development
Saturday, January 5, 13

7. THE MOCKUPS
Saturday, January 5, 13

8. MOCKUPS ARE FOLLOWED BY
UI DESIGNS
Saturday, January 5, 13

9. BUT WAIT!
Before you move on
Saturday, January 5, 13

10. TERMINOLOGIES
You should know
Saturday, January 5, 13

11. 1
RESOLUTION
Saturday, January 5, 13

12. 1
RESOLUTION
The total number of physical pixels on a screen.
Saturday, January 5, 13

13. 1 480
RESOLUTION
EXAMPLE:
800
The total number of physical pixels on a screen.
Resolution
480X800
Saturday, January 5, 13

14. 2
SCREEN DENSITY
Saturday, January 5, 13

15. 2
SCREEN DENSITY
The number of pixels in a physical area of a screen.
Saturday, January 5, 13

16. 2
SCREEN DENSITY
The number of pixels in a physical area of a screen.
MEASURED AS
number of dots in an inch
or simply ...
Saturday, January 5, 13

17. Dots Per Inch
DPI
Saturday, January 5, 13

18. ldpi = 120
(low)
Dots Per Inch
320 = xhdpi
(extra high)
DPI 4
Basic Screen Densities
mdpi
(medium)
= 160
hdpi = 240
(high)
Saturday, January 5, 13

19. There’s
tvdpi = 213 (approx.)
as well.
But we’ll skip it for today ;)
Saturday, January 5, 13

20. 3
DENSITY-
INDEPENDENT
PIXEL (DP)
Saturday, January 5, 13

21. 3
DENSITY-
INDEPENDENT
PIXEL (DP)
Defining layout in a ...
Saturday, January 5, 13

22. Defining layout in a ...
3
DENSITIY
independent
way
Saturday, January 5, 13

23. 3
WHAT DOES
THIS MEAN IN
PIXELS?
Saturday, January 5, 13

24. 3
1DP = 1PX
on a mdpi
(160 dpi) screen
Saturday, January 5, 13

25. 3
pixels = DP*(DPI/160)
Saturday, January 5, 13

26. That means
3
48px is equivalent to
in mdpi (160)
48*240/160
ie 72px
in hdpi (240)
Saturday, January 5, 13

27. which means
3
YOU
MUST
DELIVER
BITMAPS
FOR ALL 4
SCREEN DENSITIES
Saturday, January 5, 13

28. which means
3
a 48px icon
should have 4 versions
36px 48px 72px 96px
for ldpi for mdpi for hdpi for xhdpi
Saturday, January 5, 13

29. if you think that’s a hassle,
we’ve built a simple app
3
that calculates dp for a
desired screen density
dp
calculator
go ahead and search for it
in Google Play store.
Saturday, January 5, 13

30. for defining
TEXT 3SIZE,
use
SP
Saturday, January 5, 13

31. for defining
TEXT 3SIZE,
use
SP?
Saturday, January 5, 13

32. 3
SP = Scalable Pixel
SP = DP * Scale
This scale can be used
by people who need
larger font sizes, for
example, to use device
more comfortably.
Saturday, January 5, 13

33. 3
SP = Scalable Pixel
SP = DP * Scale
SP is similar to Dp
except that
SP can also be scaled by the user's
font size preference.
Saturday, January 5, 13

34. FEW NOTES
Start by designing for a mdpi (160)
screen
mdpi (160) = Baseline Screen
Scale bitmaps up or down for every
other screen densities
Saturday, January 5, 13

35. lets move on to
UI DESIGN
now
Saturday, January 5, 13

36. Saturday, January 5, 13

37. ANDROID
DESIGN PATTERNS
Saturday, January 5, 13

38. ACTION BAR
NAVIGATION BAR
Saturday, January 5, 13

39. Up
Up vs Back
Home
Screen
Back
Saturday, January 5, 13

40. FOR MORE ANDROID DESIGN PATTERNS
see here:
http://developer.android.com/design/patterns/index.html
Saturday, January 5, 13

41. a little bit on
ANDROID
ICONOGRAPHY
Saturday, January 5, 13

42. CREATE
LAUNCHER ICONS
IN FOLLOWING DIMENSIONS
36*36px 48*48px 72*72px 96*96px
(for ldpi) (for mdpi) (for hdpi) (for hdpi)
Launcher icon appear on the Home or All Apps screen of
android.
Saturday, January 5, 13

43. FOR MORE ANDROID ICONOGRAPHY
see here:
http://developer.android.com/design/style/iconography.html
Saturday, January 5, 13

44. THANK
YOU!!
anjan.shrestha@gmail.com
http://anjhero.me
Saturday, January 5, 13