Android Development for
Different Screens and Devices
Rohit Ghatol
About Me
Rohit Ghatol
1. Architect @QuickOffice
2. Project Mgr @Synerzip
3. Certified Scrum Master
LinkedIn Profile
4. Author “Beginning PhoneGap” @Apress
5. Founder TechNext Pune (Pune Developer
Community)
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
Small
Categories
Medium
Large
Extra Large
8
Screen Density
DPI – Dots per inches
Categories
Low
Normal
High
Extra High
9
Orientation
Portrait
Landscape
10
Density Independent Pixel (dp)
1 dp = 1 pixels
160 DPI Screen
1 dp = 1.5 pixels
240 DPI Screen
11
Range
•
•
•
•
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
12
Density Independence
px
dp
13
Building for Different Screen
Sizes
14
<supports-screen>
15
Screen Compatibility Mode
For Android 3.2 and above
16
Screen Compatibility Mode
Stretch to Fill
Zoom to Fill
For Android 3.2 and above
17
<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"/>
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
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
http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts
25
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
As of Android 3.0, Options menu has been superseded by Action bar
For Android 3.0+
28
Menu Icons Guidelines
For Android 2.3
29
Status Bar Icons
For Android 3.0+
30
Status Bar Icons
For Android 2.3
31
Nine Patch Images
32
Nine Patch Images
33
Shapes XML
34
Best part is these are Density Independent
35
MultiResolution App
36
37
38
Config Qualifier
39
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
40
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
drawable/
drawable-en/
drawable-fr-rCA/
drawable-en-port/
drawable-en-notouch-12key/
drawable-port-ldpi/
drawable-port-notouch-12key/
45
Step 2-5 Start Filtering
2
Locale = en-GB
Screen orientation = port 8
11
Screen pixel density = hdpi
Touchscreen type = notouch 12
Primary text input method = 12key
#
14
Config Precedence order
46
Step 2- 5 Filter by Language
drawable/
drawable-en/
drawable-en-port/
drawable-en-notouch-12key/
drawable-port-ldpi/
drawable-port-notouch-12key/
47
Step 2-5 Filter by Orientation
drawable/
drawable-en/
drawable-en-port/
drawable-en-notouch-12key/
drawable-port-ldpi/
drawable-port-notouch-12key/
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
ListFragment
Fragments Example
ActionBar
Fragment
54
Afghanistan
….
Bhutan
….
Cuba
….
Germany
CountryList
This Country is
a Independent
State. The
Capital is Kabul.
Afghanistan
….
Bhutan
….
Cuba
….
Germany
This Country is
a Independent
State. The
Capital is Kabul.
Activity
Fragment
CountryInfo
Portrait
Landscape
55
Afghanistan
….
Bhutan
….
Cuba
….
Germany
CountryListFragment
OnCountrySelectedListener
void onCountrySelect(int
position)
This Country is
a Independent
State. The
Capital is Kabul.
CountryInfoFragment
OnCountrySelectedListener
Afghanistan
….
Bhutan
….
Cuba
….
Germany
void onCountrySelect(int
position)
CountryListFragment
CountryListActivity
Afghanistan
….
Bhutan
….
Cuba
….
Germany
CountryList
Send
Intent
This Country is
a Independent
State. The
Capital is Kabul.
Directly Tell
Fragment
Afghanistan
….
Bhutan
….
Cuba
….
Germany
This Country is
a Independent
State. The
Capital is Kabul.
Activity
Fragment
CountryInfo
Portrait
Landscape
58
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://androiddevelopers.blogspot.com/2011/09/p
reparing-for-handsets.html
69
What happens to Honey Comb
Apps?
Make Apps Tablets Only
Support Smaller
Screens
70
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
Type/Ca Tele 2G/3G Wifi
pabilities pho /4G
ny
GPS
Accele Camer
romet a
er/Co
mpass
Phone
Yes
Yes
Yes
Yes
Yes
Yes
Tablets
No
Option Yes
al
Yes
Yes
Yes
Google
No No
Option No
No
No
TV http://www.google.com/events/developerday/2010/moscow/sessions/youral
app-can-run-on-every-android.html
78
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_DISTIN
CT
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