Upload
doreen-stafford
View
215
Download
0
Tags:
Embed Size (px)
Citation preview
Android Development for Different Screens and Devices
Rohit Ghatol
About MeRohit Ghatol
1. Architect @QuickOffice2. Project Mgr @Synerzip3. Certified Scrum Master4. Author “Beginning PhoneGap” @Apress5. Founder TechNext Pune (Pune Developer
Community)
LinkedIn ProfileLinkedIn Profile
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
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, GPS)• User Interaction
– Touch, DPAD, Trackball, Keyboard
5
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 least 470dp x 320dp• small screens are at least 426dp x 320dp
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 given device•Currently Android Market does not use it
19
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
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
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
25http://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
Different Bitmaps
26
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
Icon GuideLines
28
As of Android 3.0, Options menu has been superseded by Action bar
For Android 3.0+
Menu Icons Guidelines
29For Android 2.3
Status Bar Icons
30For Android 3.0+
Status Bar Icons
31For 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 & Regionen,fr,en-rUS
3.Smallest WidthSw320dp,Sw600dp,sw720dp
4.Available WidthW720dp,w1024dp
5.Available HeightH720dp,h1024dp
6. ScreenSizesmall,normal,large,xlarge
7.Screen Aspectlong, notlong
8.Screen Orientport,land
9.Doc Modecar, desk
10.Night Modenight,notnight
11. DPIldpi,mdpi,ldpi,xldpi,tvdpi,nodpi
12.Touch Typenotouchstylusfinger
13.Keyboard Availabilitykeysexposedkeyshiddenkeyssoft
14.Primary Text Input Methodnokeysqwerty12key
15.Navigation key Availabilitynavexposednavhidden
16. Primary NonTouch Input Method
nonavdpadtrackballwheel
17. API Levelv3v4v7
How Android finds best resource?
41
42
Available Resources
drawable/drawable-en/drawable-fr-rCA/drawable-en-port/drawable-en-notouch-12key/drawable-port-ldpi/drawable-port-notouch-12key/
43
Device Configuration
Locale = en-GB Screen orientation = port Screen pixel density = hdpi Touchscreen type = notouch Primary text input method = 12key
44
Step 1 Remove Contradictory Entry
45
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
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
55Portrait 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
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)
Afghanistan….Bhutan….Cuba….Germany
Afghanistan….Bhutan….Cuba….Germany
CountryListFragment
OnCountrySelectedListenerOnCountrySelectedListener
void onCountrySelect(int position)
CountryListActivity
Country Select Event
Country Select Event
58Portrait 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
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 Fragments present (with some api change)
• No Support for ActionBar
63
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/
preparing-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 Views
(Fragments)
73
ActionBar on Smaller Screens
• Use ifRoom instead of “always”• Provide icons for all action items and use
showAsAction=“ifRoom|withText”.
74
ActionBar on Smaller Screens
75
ListViews
• Use different layouts for list items for– Tablets (show more information)– Handsets (show less information)
76
Making App work on all devices
77
Maximum Reach, Assume nothing
78
Type/Capabilities
Telephony
2G/3G/4G
Wifi GPS Accelerometer/Compass
Camera
Phone Yes Yes Yes Yes Yes Yes
Tablets No Optional
Yes Yes Yes Yes
Google TV
No No Optional
No No Nohttp://www.google.com/events/developerday/2010/moscow/sessions/your-app-can-run-on-every-android.html
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
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
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
Q & A
82
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