Designing for android

1,878 views

Published on

Published in: Technology
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,878
On SlideShare
0
From Embeds
0
Number of Embeds
168
Actions
Shares
0
Downloads
69
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Designing for android

  1. 1. DESIGNING FOR ANDROID A short introductionSaturday, January 5, 13
  2. 2. HELLO! I am Anjan Shrestha I am UX lead at YoungInnovationsSaturday, January 5, 13
  3. 3. TODAY we will be making this app ...Saturday, January 5, 13
  4. 4. Saturday, January 5, 13
  5. 5. And I will be talking about DESIGN BITSSaturday, January 5, 13
  6. 6. The simple flow Objective Requirement Mockups of the app collection User Coding & Interface developmentSaturday, January 5, 13
  7. 7. THE MOCKUPSSaturday, January 5, 13
  8. 8. MOCKUPS ARE FOLLOWED BY UI DESIGNSSaturday, January 5, 13
  9. 9. BUT WAIT! Before you move onSaturday, January 5, 13
  10. 10. TERMINOLOGIES You should knowSaturday, January 5, 13
  11. 11. 1 RESOLUTIONSaturday, January 5, 13
  12. 12. 1 RESOLUTION The total number of physical pixels on a screen.Saturday, January 5, 13
  13. 13. 1 480 RESOLUTION EXAMPLE: 800 The total number of physical pixels on a screen. Resolution 480X800Saturday, January 5, 13
  14. 14. 2 SCREEN DENSITYSaturday, January 5, 13
  15. 15. 2 SCREEN DENSITY The number of pixels in a physical area of a screen.Saturday, January 5, 13
  16. 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. 17. Dots Per Inch DPISaturday, January 5, 13
  18. 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. 19. There’s tvdpi = 213 (approx.) as well. But we’ll skip it for today ;)Saturday, January 5, 13
  20. 20. 3 DENSITY- INDEPENDENT PIXEL (DP)Saturday, January 5, 13
  21. 21. 3 DENSITY- INDEPENDENT PIXEL (DP) Defining layout in a ...Saturday, January 5, 13
  22. 22. Defining layout in a ... 3 DENSITIY independent waySaturday, January 5, 13
  23. 23. 3 WHAT DOES THIS MEAN IN PIXELS?Saturday, January 5, 13
  24. 24. 3 1DP = 1PX on a mdpi (160 dpi) screenSaturday, January 5, 13
  25. 25. 3 pixels = DP*(DPI/160)Saturday, January 5, 13
  26. 26. That means 3 48px is equivalent to in mdpi (160) 48*240/160 ie 72px in hdpi (240)Saturday, January 5, 13
  27. 27. which means 3 YOU MUST DELIVER BITMAPS FOR ALL 4 SCREEN DENSITIESSaturday, January 5, 13
  28. 28. which means 3 a 48px icon should have 4 versions 36px 48px 72px 96px for ldpi for mdpi for hdpi for xhdpiSaturday, January 5, 13
  29. 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. 30. for defining TEXT 3SIZE, use SPSaturday, January 5, 13
  31. 31. for defining TEXT 3SIZE, use SP?Saturday, January 5, 13
  32. 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. 33. 3 SP = Scalable Pixel SP = DP * Scale SP is similar to Dp except that SP can also be scaled by the users font size preference.Saturday, January 5, 13
  34. 34. FEW NOTES Start by designing for a mdpi (160) screen mdpi (160) = Baseline Screen Scale bitmaps up or down for every other screen densitiesSaturday, January 5, 13
  35. 35. lets move on to UI DESIGN nowSaturday, January 5, 13
  36. 36. Saturday, January 5, 13
  37. 37. ANDROID DESIGN PATTERNSSaturday, January 5, 13
  38. 38. ACTION BAR NAVIGATION BARSaturday, January 5, 13
  39. 39. Up Up vs Back Home Screen BackSaturday, January 5, 13
  40. 40. FOR MORE ANDROID DESIGN PATTERNS see here: http://developer.android.com/design/patterns/index.htmlSaturday, January 5, 13
  41. 41. a little bit on ANDROID ICONOGRAPHYSaturday, January 5, 13
  42. 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. 43. FOR MORE ANDROID ICONOGRAPHY see here: http://developer.android.com/design/style/iconography.htmlSaturday, January 5, 13
  44. 44. THANK YOU!! anjan.shrestha@gmail.com http://anjhero.meSaturday, January 5, 13

×