Android Development for
Different Screens and Devices
Rohit Ghatol
About Me
Rohit Ghatol
1. Architect @QuickOffice
2. Project Mgr @Synerzip
3. Certified Scrum Master
4. Author “Beginning Ph...
Topics
• Understanding UI Terms and Concepts
• Building for Different Screen Sizes
• Building for Different Tablets and Ph...
Diversity on Android
Android Devices
•Handsets
•Tablets
•TV
4
Diversity on Android
• Screen
– Screen Size (2 inch to 50 inch)
– DPI (120 – 320 )
• Optional Hardware (Telephony, Camera,...
Making App work for different
Screens
6
UI Terms and Concepts
7
Screen Size
8
Measured in Diagonal
SmallSmall
MediumMedium
LargeLarge
Extra LargeExtra Large
Categories
Screen Density
9
CategoriesDPI – Dots per inches
Low Normal
High Extra High
Orientation
10
Portrait Landscape
Density Independent Pixel (dp)
11
160 DPI Screen 240 DPI Screen
1 dp = 1.5 pixels1 dp = 1 pixels
Range
12
• xlarge screens are at least 960dp x 720dp
• large screens are at least 640dp x 480dp
• normal screens are at le...
Density Independence
13
px
dp
Building for Different Screen
Sizes
14
<supports-screen>
15
Screen Compatibility Mode
16
For Android 3.2 and above
Screen Compatibility Mode
17
For Android 3.2 and above
Stretch to Fill Zoom to Fill
18
Compatibility Modes
android:requiresSmallestWidthDp
•Small Width Required for this application to be
installed on the give...
Compatibility Modes
android:compatibleWidthLimitDp
•Small Width supported by the application.
•If Smallest Side of Device ...
Compatibility Modes
android:largestWidthLimitDpSmall Width
supported by the application.
•If Smallest Side of Device >
lar...
Different Layouts
22
UI Guidelines
• Keep Business logic separate
• Keep Views independent
• Keep Navigation logic out of Views
23
< Android 3.1
• layout-small
• layout-normal
• layout-large
• layout-xlarge
24
>= Android 3.2
• layout-sw600dp
• layout-w720dp
• layout-h500dp
25
http://developer.android.com/guide/practices/screens_su...
Different Bitmaps
26
Drawable-Resolution
• drawable
• drawble-nodpi – Not Scaled at all
• drawable-ldpi ~ 120 dpi (.75x scale)
• drawable-mdpi ...
Icon GuideLines
28
As of Android 3.0, Options menu has been superseded by Action bar
For Android 3.0+
Menu Icons Guidelines
29
For Android 2.3
Status Bar Icons
30
For Android 3.0+
Status Bar Icons
31
For Android 2.3
Nine Patch Images
32
Nine Patch Images
33
Shapes XML
34
35
Best part is these are Density Independent
MultiResolution App
36
37
38
Config Qualifier
39
40
1.
Mcc & mnc
2.
Lang & Region
en,
fr,
en-rUS
3.
Smallest Width
Sw320dp,
Sw600dp,
sw720dp
4.
Available Width
W720dp,
w10...
How Android finds best
resource?
41
42
Available Resources
drawable/
drawable-en/
drawable-fr-rCA/
drawable-en-port/
drawable-en-notouch-12key/
drawable-port-ldp...
Device Configuration
Locale = en-GB
Screen orientation = port
Screen pixel density = hdpi
Touchscreen type = notouch
Prima...
Step 1 Remove Contradictory Entry
45
Step 2-5 Start Filtering
Locale = en-GB
Screen orientation = port
Screen pixel density = hdpi
Touchscreen type = notouch
P...
Step 2- 5 Filter by Language
47
Step 2-5 Filter by Orientation
48
Building for Tablets & Handsets
49
HoneyComb UI
New UI Elements
•Fragments
•Action Bar
50
Before Fragments
51
Before Fragments
52
Let’s see some code
53
Fragments Example
54
ActionBar
Fragment
ListFragment
55
Portrait Landscape
Afghanistan
….
Bhutan
….
Cuba
….
Germany
Afghanistan
….
Bhutan
….
Cuba
….
Germany
This Country is
a ...
Afghanistan
….
Bhutan
….
Cuba
….
Germany
Afghanistan
….
Bhutan
….
Cuba
….
Germany
This Country is
a Independent
State. The...
Afghanistan
….
Bhutan
….
Cuba
….
Germany
Afghanistan
….
Bhutan
….
Cuba
….
Germany
CountryListFragment
OnCountrySelectedLis...
58
Portrait Landscape
Afghanistan
….
Bhutan
….
Cuba
….
Germany
Afghanistan
….
Bhutan
….
Cuba
….
Germany
This Country is
a ...
Let’s see some code
59
ActionBar Example
60
Let’s see some code
61
But all this is for > Android 3.x
Welcome Android Compatibility Pack
62
Android Compatibility Pack
• Provides limited support for HoneyComb
widgets for pre 3.0 Android devices
• Support for Frag...
Fragments on Android 2.x
64
Let’s see some code
65
What about ActionBar Support
for Android 2.x
Welcome ActionBarSherlock
66
ActionBarSherLock Example
67
Let’s see some code
68
Getting ready for Ice-cream
sandwich
http://android-
developers.blogspot.com/2011/09/p
reparing-for-handsets.html
69
What happens to Honey Comb
Apps?
70
Make Apps Tablets Only
Support Smaller
Screens
Make Apps Tablet Only
71
Support Smaller Screens
72
Support Smaller Screens
• Keep Business logic separate
• Keep Views(Fragments) independent
• Keep Navigation logic out of ...
ActionBar on Smaller Screens
• Use ifRoom instead of “always”
• Provide icons for all action items and use
showAsAction=“i...
ActionBar on Smaller Screens
75
ListViews
• Use different layouts for list items for
– Tablets (show more information)
– Handsets (show less information)
...
Making App work on all devices
77
Maximum Reach, Assume nothing
78
Type/Ca
pabilities
Tele
pho
ny
2G/3G
/4G
Wifi GPS Accele
romet
er/Co
mpass
Camer
a
Phone ...
Use <uses-feature> judiciary
In the Application Manifest: <uses-feature>
•For any hardware your app uses
•For any hardware...
Currently available Features to be declared by
<uses-feature>:(see PackageManager class)
• CAMERA
• CAMERA_AUTOFOCUS
• CAM...
Feature availability at runtime
• PackageManager.hasSystemFeature(FEATURE
_NAME)
• Check if feature present then only expo...
Q & A
82
More about Me
• Twitter - http://twitter.com/#!/rohitghatol
• TechGig -
http://www.techgig.com/rohitghatol
• LinkedIn -
ht...
Upcoming SlideShare
Loading in...5
×

Salt march 2011-android development for different screens and devices

307

Published on

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
307
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Salt march 2011-android development for different screens and devices

  1. 1. Android Development for Different Screens and Devices Rohit Ghatol
  2. 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. 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. 4. Diversity on Android Android Devices •Handsets •Tablets •TV 4
  5. 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. 6. Making App work for different Screens 6
  7. 7. UI Terms and Concepts 7
  8. 8. Screen Size 8 Measured in Diagonal SmallSmall MediumMedium LargeLarge Extra LargeExtra Large Categories
  9. 9. Screen Density 9 CategoriesDPI – Dots per inches Low Normal High Extra High
  10. 10. Orientation 10 Portrait Landscape
  11. 11. Density Independent Pixel (dp) 11 160 DPI Screen 240 DPI Screen 1 dp = 1.5 pixels1 dp = 1 pixels
  12. 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. 13. Density Independence 13 px dp
  14. 14. Building for Different Screen Sizes 14
  15. 15. <supports-screen> 15
  16. 16. Screen Compatibility Mode 16 For Android 3.2 and above
  17. 17. Screen Compatibility Mode 17 For Android 3.2 and above Stretch to Fill Zoom to Fill
  18. 18. 18
  19. 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. 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. 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. 22. Different Layouts 22
  23. 23. UI Guidelines • Keep Business logic separate • Keep Views independent • Keep Navigation logic out of Views 23
  24. 24. < Android 3.1 • layout-small • layout-normal • layout-large • layout-xlarge 24
  25. 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. 26. Different Bitmaps 26
  27. 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. 28. Icon GuideLines 28 As of Android 3.0, Options menu has been superseded by Action bar For Android 3.0+
  29. 29. Menu Icons Guidelines 29 For Android 2.3
  30. 30. Status Bar Icons 30 For Android 3.0+
  31. 31. Status Bar Icons 31 For Android 2.3
  32. 32. Nine Patch Images 32
  33. 33. Nine Patch Images 33
  34. 34. Shapes XML 34
  35. 35. 35 Best part is these are Density Independent
  36. 36. MultiResolution App 36
  37. 37. 37
  38. 38. 38
  39. 39. Config Qualifier 39
  40. 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. 41. How Android finds best resource? 41
  42. 42. 42
  43. 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. 44. Device Configuration Locale = en-GB Screen orientation = port Screen pixel density = hdpi Touchscreen type = notouch Primary text input method = 12key 44
  45. 45. Step 1 Remove Contradictory Entry 45
  46. 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. 47. Step 2- 5 Filter by Language 47
  48. 48. Step 2-5 Filter by Orientation 48
  49. 49. Building for Tablets & Handsets 49
  50. 50. HoneyComb UI New UI Elements •Fragments •Action Bar 50
  51. 51. Before Fragments 51
  52. 52. Before Fragments 52
  53. 53. Let’s see some code 53
  54. 54. Fragments Example 54 ActionBar Fragment ListFragment
  55. 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. 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. 57. Afghanistan …. Bhutan …. Cuba …. Germany Afghanistan …. Bhutan …. Cuba …. Germany CountryListFragment OnCountrySelectedListenerOnCountrySelectedListener void onCountrySelect(int position) CountryListActivity Country Select Event Country Select Event
  58. 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. 59. Let’s see some code 59
  60. 60. ActionBar Example 60
  61. 61. Let’s see some code 61
  62. 62. But all this is for > Android 3.x Welcome Android Compatibility Pack 62
  63. 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. 64. Fragments on Android 2.x 64
  65. 65. Let’s see some code 65
  66. 66. What about ActionBar Support for Android 2.x Welcome ActionBarSherlock 66
  67. 67. ActionBarSherLock Example 67
  68. 68. Let’s see some code 68
  69. 69. Getting ready for Ice-cream sandwich http://android- developers.blogspot.com/2011/09/p reparing-for-handsets.html 69
  70. 70. What happens to Honey Comb Apps? 70 Make Apps Tablets Only Support Smaller Screens
  71. 71. Make Apps Tablet Only 71
  72. 72. Support Smaller Screens 72
  73. 73. Support Smaller Screens • Keep Business logic separate • Keep Views(Fragments) independent • Keep Navigation logic out of Views (Fragments) 73
  74. 74. ActionBar on Smaller Screens • Use ifRoom instead of “always” • Provide icons for all action items and use showAsAction=“ifRoom|withText”. 74
  75. 75. ActionBar on Smaller Screens 75
  76. 76. ListViews • Use different layouts for list items for – Tablets (show more information) – Handsets (show less information) 76
  77. 77. Making App work on all devices 77
  78. 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. 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. 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. 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. 82. Q & A 82
  83. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×