Your SlideShare is downloading. ×
Salt march 2011-android development for different screens and devices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Salt march 2011-android development for different screens and devices

199
views

Published on

Salt march 2011-android development for different screens and devices

Salt march 2011-android development for different screens and devices

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
199
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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” @Apress 5. Founder TechNext Pune (Pune Developer Community) LinkedIn ProfileLinkedIn 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 SmallSmall MediumMedium LargeLarge Extra LargeExtra Large Categories
  • 9. Screen Density 9 CategoriesDPI – Dots per inches Low Normal High Extra High
  • 10. Orientation 10 Portrait Landscape
  • 11. Density Independent Pixel (dp) 11 160 DPI Screen 240 DPI Screen 1 dp = 1.5 pixels1 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. <supports-screen> 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 Fill Zoom to Fill
  • 18. 18
  • 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 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 22 88 1111 1212 1414 ## Config Precedence order
  • 47. Step 2- 5 Filter by Language 47
  • 48. Step 2-5 Filter by Orientation 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. 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. 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. This Country is a Independent State. The Capital is Kabul. CountryListFragment CountryInfoFragment OnCountrySelectedListenerOnCountrySelectedListener void onCountrySelect(int position)
  • 57. Afghanistan …. Bhutan …. Cuba …. Germany Afghanistan …. Bhutan …. Cuba …. Germany CountryListFragment OnCountrySelectedListenerOnCountrySelectedListener void onCountrySelect(int position) CountryListActivity Country Select Event 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. 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. 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 Wifi GPS Accele romet er/Co mpass Camer a Phone Yes Yes Yes Yes Yes Yes Tablets No Option al Yes Yes Yes Yes Google TV No No Option al No No No http://www.google.com/events/developerday/2010/moscow/sessions/your- app-can-run-on-every-android.html
  • 79. Use <uses-feature> judiciary In the Application Manifest: <uses-feature> •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 <uses-feature>:(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_DISTI NCT • 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/#!/rohitghatol • TechGig - http://www.techgig.com/rohitghatol • LinkedIn - http://www.linkedin.com/in/rohitghatol • Presentations - www.slideshare.net/rohitsghatol/ • YouTube Tutorials - http://www.youtube.com/user/rohitssghatol