Salt march 2011-android development for different screens and devices

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