Android training day 3

2,024 views

Published on

Android Training Day 3 slide organized in Mobile Nepal from 22nd sept, 2013 to 28th sept, 2013 for beginner level

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,024
On SlideShare
0
From Embeds
0
Number of Embeds
264
Actions
Shares
0
Downloads
128
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Android training day 3

  1. 1. Designing for Android Anjan Shrestha UX Lead, YoungInnovations Android Apps Training Day 3
  2. 2. A small introduction to android UI
  3. 3. A small introduction to android UI Home Screen
  4. 4. A small introduction to android UI All Apps Screen
  5. 5. A small introduction to android UI Recents Screen
  6. 6. System Bars Status Bar Navigation Bar
  7. 7. One terminology you must know …
  8. 8. SCREEN DENSITY The number of pixels in a physical area of a screen.
  9. 9. Measured as Dots Per Inch DPI
  10. 10. ldpi mdpi hdpi xhdpi xxhdpi tvdpi SCREEN DENSITY 120 160 240 320 480 213 approx.
  11. 11. So?
  12. 12. Well, you must deliver images for each screen density.
  13. 13. 48px in mdpi = 48px in xhdpi Because visually,
  14. 14. DP Density Independent Pixel to the rescue Defining layout in density independent way …
  15. 15. DP HUH?
  16. 16. 1dp=1px On an mdpi (160dpi) screen, That is probably why mdpi is also called the baseline screen in Android.
  17. 17. px*(dpi/160) For other screen densities,
  18. 18. 48*(320/160) So a 48px icon in mdpi should be … px*(dpi/160) 96px in xhdpi (320)
  19. 19. ldpi mdpi hdpi xhdpi tvdpi 48px36px 72px 96px 63px 1x0.75x 1.5x 2x 4/3x
  20. 20. Similarly, other icons as well
  21. 21. If you think it’s a hassle to calculate dp for all screen densities, use Dp Calculator h"ps://play.google.com/store/apps/details? id=com.vivek.dpcalculator&hl=en  
  22. 22. Naming these icons
  23. 23. Setting up workspace
  24. 24. A little bit on launcher icon THIS IS YOU!Launcher icon appears on the Home or All Apps screen of android.
  25. 25. ldpi mdpi hdpi xhdpi tvdpi 48px36px 72px 96px 63px Launcher Icons for different screen densities
  26. 26. Launcher Icons for display on Google Play 512x512px
  27. 27. Designing the UI
  28. 28. Step 1 Write down the objective(s) of your application.
  29. 29. Step 2 Draw wireframes (start with sketching on paper), get feedback, refine.
  30. 30. Step 3 Pick your favorite design tool. Mine is Adobe Fireworks and Sketch (mac only)
  31. 31. Step 4 Start designing based on your wireframe.
  32. 32. Follow the design patterns
  33. 33. No. of actions you can put in action bar
  34. 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. 35. Navigation with Navigation Drawer
  36. 36. Study Design Patterns for more http://developer.android.com/design/ patterns/index.html
  37. 37. See Building blocks section for ready-to- use elements http://developer.android.com/design/ building-blocks/index.html
  38. 38. For stencils, gui elements http://developer.android.com/design/ downloads/index.html
  39. 39. Thank you! Anjan Shrestha UX Lead, YoungInnovations
  40. 40. Designing for Android - Development Vivek Bhusal Android Apps Training Day 3
  41. 41. “How do I configure for different screens then ?”
  42. 42. Layout Qualifier   These are configuration qualifiers.   Allow developers to control how the system selects the alternative resources based on characteristics of the current device screen.   Each screen characteristic has a separate qualifier.
  43. 43. Screen  Characteris-c     Qualifier   Descrip-on   Size   small   Resources  for  small  screen  sizes.   normal   Resources  for  normal  size  screens.  (Default)   large   Resources  for  large  size  screens.   xlarge   Resources  for  extra  large  size  screens.   Density     ldpi   Resources  for  ldpi  screens.   mdpi   Resources  for  mdpi  screens.   hdpi   Resources  for  hdpi  screens.   xhdpi     Resources  for  xhdpi  screens.   tvdpi   Resources  for  screens  somewhere  between   mdpi  and  hdpi.   OrientaGon   land   Resources  for  landscape  orientaGon   port   Resources  for  potrait  orientaGon   Qualifier types
  44. 44. Screen  Characteris-c     Qualifier   Descrip-on   Size   small   Resources  for  small  screen  sizes.   normal   Resources  for  normal  size  screens.  (Default)   large   Resources  for  large  size  screens.   xlarge   Resources  for  extra  large  size  screens.   Density     ldpi   Resources  for  ldpi  screens.   mdpi   Resources  for  mdpi  screens.   hdpi   Resources  for  hdpi  screens.   xhdpi     Resources  for  xhdpi  screens.   tvdpi   Resources  for  screens  somewhere  between   mdpi  and  hdpi.   OrientaGon   land   Resources  for  landscape  orientaGon   port   Resources  for  potrait  orientaGon   Qualifier types
  45. 45. Implementing qualifiers res/layout/my_layout.xml // layout for normal screen size ("default") res/layout-small/my_layout.xml // layout for small screen size res/layout-large/my_layout.xml // layout for large screen size res/layout-xlarge/my_layout.xml // layout for extra large screen size res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation res/drawable-mdpi/my_icon.png // bitmap for medium density res/drawable-hdpi/my_icon.png // bitmap for high density res/drawable-xhdpi/my_icon.png // bitmap for extra high density use  mdpi,  etc  for  bitmaps   and  small,  etc  for  layouts  
  46. 46. Good implementation practice But how's got time for that ?? Also in the manifest file: <supports-screens android:smallScreens="true" android:normalScreens="true" android:largeScreens="true" android:xlargeScreens="true" android:anyDensity="true" />
  47. 47. Hack   When declaring Views use the dimen to give away dimensions.   e.g. <Button android:layout_width = “@dimen/button_width” …/> How  do  I  refer  ?   How  do  I  do  this  ?   Where  is  this  ?  
  48. 48. Inside dimens: <resources> <dimen name="abc">16dp</dimen> <dimen name="xyz">16dp</dimen> </resources> <!-- do not forget to declare resources, R error is bound to occur -->
  49. 49. Create different values folder with different qualifiers Give out different dimensions according to screen sizes And PRESTO ! You are done for now But there is a downside to this.
  50. 50. Thank you! Vivek Bhusal UX Lead, YoungInnovations

×