1. Android Development for Different Screens and Devices Rohit Ghatol

2. About Me Rohit Ghatol 1.Architect @QuickOffice 2.Project Mgr @Synerzip 3.Certified Scrum Master 4.Author “Beginning PhoneGap” @ApressBeginning PhoneGap 5.Founder TechNext Pune (Pune Developer Community)TechNext LinkedIn Profile LinkedIn Profile

3. Topics Understanding UI Terms and Concepts Building for Different Screen Sizes Building for Different Tablets and Phone Getting ready for Ice Cream Sandwich Making your app run on all devices Reference Material 3

4. Diversity on Android Android Devices Handsets Tablets TV 4

5. Diversity on Android Screen – Screen Size (2 inch to 50 inch) – DPI (120 – 320 ) Optional Hardware (Telephony, Camera, GPS) User Interaction – Touch, DPAD, Trackball, Keyboard 5

6. Making App work for different Screens 6

7. UI Terms and Concepts 7

8. Screen Size 8 Measured in Diagonal Small Medium Large Extra Large Categories

9. Screen Density 9 Categories DPI – Dots per inches LowNormal HighExtra High

10. Orientation 10 Portrait Landscape

11. Density Independent Pixel (dp) 11 160 DPI Screen240 DPI Screen 1 dp = 1.5 pixels 1 dp = 1 pixels

12. Range 12 xlarge screens are at least 960dp x 720dp large screens are at least 640dp x 480dp normal screens are at least 470dp x 320dp small screens are at least 426dp x 320dp

13. Density Independence 13 px dp

14. Building for Different Screen Sizes 14

15. 15

16. Screen Compatibility Mode 16 For Android 3.2 and above

17. Screen Compatibility Mode 17 For Android 3.2 and above Stretch to FillZoom to Fill

18. 18 <supports-screens android:resizeable=["true"| "false"] android:smallScreens=["true" | "false"] android:normalScreens=["true" | "false"] android:largeScreens=["true" | "false"] android:xlargeScreens=["true" | "false"] android:anyDensity=["true" | "false"] android:requiresSmallestWidthDp="integer" android:compatibleWidthLimitDp="integer" android:largestWidthLimitDp="integer"/>

19. Compatibility Modes android:requiresSmallestWidthDp Small Width Required for this application to be installed on the given device Currently Android Market does not use it 19

20. Compatibility Modes android:compatibleWidthLimitDp Small Width supported by the application. If Smallest Side of Device > compatibleWidthLimitDp, user is offered to run application in Compatibility mode 20

21. Compatibility Modes android:largestWidthLimitDpSmall Width supported by the application. If Smallest Side of Device > largestWidthLimitDp, application is forced run application in Compatibility mode (without any option) 21

22. Different Layouts 22

23. UI Guidelines Keep Business logic separate Keep Views independent Keep Navigation logic out of Views 23

24. < Android 3.1 layout-small layout-normal layout-large layout-xlarge 24

25. >= Android 3.2 layout-sw600dp layout-w720dp layout-h500dp 25 http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts Now you can declare which layout to use at which width and not more vague partitions like layout-small, layout-normal, layout-large and layout-xlarge

26. Different Bitmaps 26

27. Drawable-Resolution drawable drawble-nodpi – Not Scaled at all drawable-ldpi ~ 120 dpi (.75x scale) drawable-mdpi ~ 160 dpi (baseline scale) drawable-hdpi ~ 240 dpi (1.5x scale) drawable-xhdpi ~ 320 dpi (2x scale) 27

28. Icon GuideLines 28 As of Android 3.0, Options menu has been superseded by Action bar For Android 3.0+

29. Menu Icons Guidelines 29 For Android 2.3

30. Status Bar Icons 30 For Android 3.0+

31. Status Bar Icons 31 For Android 2.3

32. Nine Patch Images 32

33. Nine Patch Images 33

34. Shapes XML 34

35. 35 Best part is these are Density Independent

36. MultiResolution App 36

37. 37

38. 38

39. Config Qualifier 39

40. 40 1. Mcc & mnc 2. Lang & Region en, fr, en-rUS 3. Smallest Width Sw320dp, Sw600dp, sw720dp 4. Available Width W720dp, w1024dp 5. Available Height H720dp, h1024dp 6. ScreenSize small,normal,lar ge,xlarge 7. Screen Aspect long, notlong 8. Screen Orient port, land 9. Doc Mode car, desk 10. Night Mode night, notnight 11. DPI ldpi,mdpi,ldpi, xldpi,tvdpi,nodpi 12. Touch Type notouch stylus finger 13. Keyboard Availability keysexposed keyshidden keyssoft 14. Primary Text Input Method nokeys qwerty 12key 15. Navigation key Availability navexposed navhidden 16. Primary NonTouch Input Method nonav dpad trackball wheel 17. API Level v3 v4 v7

41. How Android finds best resource? 41

42. 42

43. Available Resources drawable/ drawable-en/ drawable-fr-rCA/ drawable-en-port/ drawable-en-notouch-12key/ drawable-port-ldpi/ drawable-port-notouch-12key/ 43

44. Device Configuration Locale = en-GB Screen orientation = port Screen pixel density = hdpi Touchscreen type = notouch Primary text input method = 12key 44

45. Step 1 Remove Contradictory Entry drawable/ drawable-en/ drawable-fr-rCA/ drawable-en-port/ drawable-en-notouch-12key/ drawable-port-ldpi/ drawable-port-notouch-12key/ 45

46. Step 2-5 Start Filtering Locale = en-GB Screen orientation = port Screen pixel density = hdpi Touchscreen type = notouch Primary text input method = 12key 46 2 2 8 8 11 12 14 # # Config Precedence order

47. Step 2- 5 Filter by Language drawable/ drawable-en/ drawable-en-port/ drawable-en-notouch-12key/ drawable-port-ldpi/ drawable-port-notouch-12key/ 47

48. Step 2-5 Filter by Orientation drawable/ drawable-en/ drawable-en-port/ drawable-en-notouch-12key/ drawable-port-ldpi/ drawable-port-notouch-12key/ 48

49. Building for Tablets & Handsets 49

50. HoneyComb UI New UI Elements Fragments Action Bar 50

51. Before Fragments 51

52. Before Fragments 52

53. Let’s see some code 53

54. Fragments Example 54 ActionBar Fragment ListFragment

55. 55 Portrait Landscape Afghanistan …. Bhutan …. Cuba …. Germany Afghanistan …. Bhutan …. Cuba …. Germany This Country is a Independent State. The Capital is Kabul. CountryList CountryInfo Afghanistan …. Bhutan …. Cuba …. Germany Afghanistan …. Bhutan …. Cuba …. Germany This Country is a Independent State. The Capital is Kabul. Activity Fragment

56. Afghanistan …. Bhutan …. Cuba …. Germany Afghanistan …. Bhutan …. Cuba …. Germany This Country is a Independent State. The Capital is Kabul. CountryListFragmentCountryInfoFragment OnCountrySelectedListener void onCountrySelect(int position)

57. Afghanistan …. Bhutan …. Cuba …. Germany Afghanistan …. Bhutan …. Cuba …. Germany CountryListFragment OnCountrySelectedListener void onCountrySelect(int position) CountryListActivity Country Select Event

58. 58 Portrait Landscape Afghanistan …. Bhutan …. Cuba …. Germany Afghanistan …. Bhutan …. Cuba …. Germany This Country is a Independent State. The Capital is Kabul. CountryList CountryInfo Afghanistan …. Bhutan …. Cuba …. Germany Afghanistan …. Bhutan …. Cuba …. Germany This Country is a Independent State. The Capital is Kabul. Activity Fragment Send Intent Directly Tell Fragment

59. Let’s see some code 59

60. ActionBar Example 60

61. Let’s see some code 61

62. But all this is for > Android 3.x Welcome Android Compatibility Pack 62

63. Android Compatibility Pack Provides limited support for HoneyComb widgets for pre 3.0 Android devices Support for Fragments present (with some api change) No Support for ActionBar 63

64. Fragments on Android 2.x 64

65. Let’s see some code 65

66. What about ActionBar Support for Android 2.x Welcome ActionBarSherlock 66

67. ActionBarSherLock Example 67

68. Let’s see some code 68

69. Getting ready for Ice-cream sandwich http://android- developers.blogspot.com/2011/09/p reparing-for-handsets.html 69

70. What happens to Honey Comb Apps? 70 Make Apps Tablets Only Support Smaller Screens

71. Make Apps Tablet Only 71

72. Support Smaller Screens 72

73. Support Smaller Screens Keep Business logic separate Keep Views(Fragments) independent Keep Navigation logic out of Views (Fragments) 73

74. ActionBar on Smaller Screens Use ifRoom instead of “always” Provide icons for all action items and use showAsAction=“ifRoom|withText”. 74

75. ActionBar on Smaller Screens 75

76. ListViews Use different layouts for list items for – Tablets (show more information) – Handsets (show less information) 76

77. Making App work on all devices 77

78. Maximum Reach, Assume nothing 78 Type/Ca pabilities Tele pho ny 2G/3G /4G WifiGPSAccele romet er/Co mpass Camer a PhoneYes TabletsNoOption al Yes Google TV No Option al No http://www.google.com/events/developerday/2010/moscow/sessions/your- app-can-run-on-every-android.html

79. Use judiciary In the Application Manifest: For any hardware your app uses For any hardware which your app does NOT need to execute, explicitly specify a value of required=false (Remember TV does not have telephony,GPS or Camera) 79

80. Currently available Features to be declared by :(see PackageManager class) CAMERA CAMERA_AUTOFOCUS CAMERA_FLASH LOCATION LOCATION_GPS LOCATION_NETWORK MICROPHONE SENSOR_COMPASS SENSOR_ACCELEROMETER SENSOR_LIGHT SENSOR_PROXIMITY TELEPHONY TELEPHONY_CDMA TELEPHONY_GSM TOUCHSCREEN TOUCHSCREEN_MULTITOUCH TOUCHSCREEN_MULTITOUCH_DISTIN CT WIFI BLUETOOTH 80

81. Feature availability at runtime PackageManager.hasSystemFeature(FEATURE_ NAME) Check if feature present then only expose the feature to end user (like menu item for it) Build a Degradable App 81

82. Q & A 82

83. More about Me Twitter - http://twitter.com/#!/rohitghatolhttp://twitter.com/#!/rohitghatol TechGig - http://www.techgig.com/rohitghatolhttp://www.techgig.com/rohitghatol LinkedIn - http://www.linkedin.com/in/rohitghatol http://www.linkedin.com/in/rohitghatol Presentations - www.slideshare.net/rohitsghatol/ www.slideshare.net/rohitsghatol/ YouTube Tutorials - http://www.youtube.com/user/rohitssghatol http://www.youtube.com/user/rohitssghatol