Multi Screen HellDevFest 2013, Ankara

/ Abdullah Cetin CAVDAR @accavdar

Why Hell?

ManufacturersAcerAsusHTCLGMotorolaSamsungSony...

Fragmentation

Device Types11.868 distinct Android devices

seen in 2013Open Signal Fragmentation Report 2013

Phones

Tablets

Laptops

TV

Set-Top-Box

Consoles

EverywhereInternet of Things (IoT)?

Behind the 'Internet of Things' Is Android and It's Everywhere

Size & Resolution2.8 in, 3.2 in, 3.5 in, 3.6 in, 3.7 in, 4.0 in, 4.3 in, 4.5 in, 4.7 in, 4.8 in, 5.0 in,

6.4 in, 7.0, 9.7 in, 10.1 in, ...

320x240 QVGA, 480x320 HVGA, 800x480 WVGA, 960x540 qHD,1280x768 WXGA, 1280x720 HD, 1920x1080 HD, ...

API Versions

Android Dashboards

OrientationLandscape or Portrait?

Keep Calmand

Çare Drogba

SupportingMultiple Screens

Range of Screens Supportedsizes: small, normal, large, and xlargedensities: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high)

Size and Density Group

Density-independent Pixel (dp)A virtual pixel unit that you should use when defining UI layout, to

express layout dimensions or position in a density-independent way.

The density-independent pixel is equivalent to one physical pixel on a160 dpi screen (medium density)

Conversionpx = dp * (dpi / 160)

Ex: on a 240 dpi screen, 1 dp equals 1.5 physical pixels

Density IndependenceIt preserves the physical size of user interface elements when displayed

on screens with different densities

The system scales dp units as appropriate for the current screendensityThe system scales drawable resources to the appropriate size, basedon the current screen density, if necessary

Bad

Good

How to Support MultipleScreens?

Use <supports-screen>Explicitly declare in the manifest which screen sizes your application

supports

Provide different layouts fordifferent screen sizes

Provide size-specific resources: small, normal, large, and xlargeEx: layout-xlarge/

Use the sw<N>dp configuration qualifier to define the smallestavailable width (beginning API 13)

Ex: layout-sw600dp/ (at least 600dp screen width)

Provide different bitmapsBy default, Android scales drawables (.png, .jpg, .gif and .9.png files)Include alternative versions at different resolutions for differentscreen densitiesDensity-specific resources are ldpi (low), mdpi (medium), hdpi (high),and xhdpi (extra high)

Ex: drawable-hdpi/

Configuration QualifiersUsage: <resources_name>-<qualifier>

<resources_name> is the standard resource name (such as drawableor layout)<qualifier> is a configuration qualifier (such as hdpi or xlarge)

Layouts & Drawables

Alternative DrawablesYou only need to provide density-specific drawables (.png, .jpg, .gif or.9.png)Follow the 3:4:6:8 scaling ratio between the four generalized densities

36x36 for low-density48x48 for medium-density72x72 for high-density96x96 for extra high-density

See Icon Design Guideline

Relative Sizes

Tablet Layouts for Android 3.2Android 3.2 introduces a new way to specify resources for more discrete

screen sizes

New Size QualifierssmallestWidth: sw<N>dp

Ex: sw600dpAvailable screen width: w<N>dp

Ex: w1024dpAvailable screen height: h<N>dp

Ex: h720dp

Configuration Examples

Best Practises

1. Use wrap_content,match_parent, or the dp unit

for layout dimensionsUsing wrap_content, match_parent or dp units guarantees that the view

is given an appropriate size on the current device screen

PS: Use sp for font sizes

2. Do not use hard-coded pixelvalues in your application code

3. Use RelativeLayoutIt uses relative positioning to lay out its child views

For instance, you can specify that a button widget should appear "to theright of" a text widget

4. Use size and density-specificresources

PS: To avoid pre-scaling, put the resource in a resource directory withthe nodpi configuration qualifier

5. Use Nine-patch BitmapsThey are specially formatted PNG files that indicate which areas can and

cannot be stretched

Tablets&

Handsets

Basic Guideline

1. Build your activity designsbased on Fragments

FragmentIntroduced in Android 3.0 (API Level 11)It allows you to separate distinct behavioral components of your UIinto separate partsProvides modular UI developmentPS: Use Android to use fragments in older Androidversions

Support Libraries

Multiple Fragments, MultipleActivities

Handsetsres/layout/main.xml

Tabletsres/layout-large/main.xml

PS: You should also use the new minimum width size qualifiers in orderto more precisely control the screen size

How does it work?If Fragment B is in the layout, Activity A notifies Fragment B to updateitselfIf Fragment B is not in the layout, Activity A starts Activity B (whichhosts Fragment B)Important Note: Define a callback interface in each fragment class tocommunicate with host activity

2. Use the Action BarThe action bar is a window feature that Action Baridentifies the user

location, and Action Barprovides user actions and Action Barnavigationmodes

Introduced in Android 3.0 (API Level 11). However, you can use t usingAndroid Support Libraries

Why Action Bar?Android system does all the work to gracefully adapt the action bar for

different screen sizes

Tips for creating Action Bar

1. Avoid using the always valueForcing too many action items into the action bar can create acluttered UIAction items may overlap with other action bar elements such as thetitle or navigation itemsUse ifRoom for the android:showAsAction attribute

2. Provide an IconAlways provide an icon for the action itemsUse showAsAction="ifRoom|withText"

3. Provide a TitleAlways provide a titleUsers view the title as a tooltip on long-clickIt is critical for accessibility: Screen readers read aloud the item titleeven when not visisble

4. Avoid using customnavigation modes when

possibleUse the built-in tab and drop-down navigation modes when possibleSystem can adapt their presentation to different screen sizesautomatically

Ex: stacked action bar in handsets

Split Action BarAvailable in Android 4.0 (API level 14) and higherAdd uiOptions="splitActionBarWhenNarrow" to your <activity> or<application> manifest elementCall setDisplayShowHomeEnabled(false) to disable the applicationicon in the action bar

Testing

Use Emulator with differentconfigs

emulator -avd <avd_name> -scale 96dpi

Android StudioBuilt in device previews (landscape and portrait modes)

CompatibilityMost important characteristic of a compatible device is the ability to

install and correctly run an Android .apk file

Apps Availability<uses-feature> in manifest file

<uses-feature android:name="android.hardware.bluetooth" />

<uses-feature android:name="android.hardware.camera" />

The other filters for apps availability in Google Play:

<supports-gl-texture><uses-configuration><uses-library><uses-permission><uses-sdk>

Package ManagerCheck feature availabilities at runtime

PackageManager packageManager = this.getPackageManager();

if (packageManager.hasSystemFeature(PackageManager.FEATURE_NFC)) {

Log.d(TAG, "Oh yeah, NFC is available. :)");

} else {

Log.d(TAG, "Shit, no NFC. :(");

}

Business ReasonsList the countries an app is available inSelect which carrier’s users are able to access the app

Slideshttp://github.com/accavdar/MultiScreenHell

Questions?

THE ENDby Abdullah Cetin CAVDAR / @accavdar