Android Developer Days 2013 - MultiDevice Nightmare

www.immobilienscout24.dewww.immobilienscout24.de

The Multi-Device Nightmare- and how to clear the Elm Street

Android Developer Days | Ankara | 15.06.2013 | Hasan Hosgel

Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel

About me

Hasan Hosgel

Twitter: @alosdevGithub: alosdevGoogle+: Hasan HosgelSlideshare: hosgel

developer @ ImmobilienScout24,CO-Organizer @ GDG Berlin Android, Organizer @ community events &Speaker

Fragmentation

> 3100 Android Devices

Here comes The Nightmare

Image source:http://www.flickr.com/photos/boogeyman13/4553188509/

Here comes The Nightmare

For developers

Image source:http://www.flickr.com/photos/boogeyman13/4553188509/

Device Classification

Images sources:https://play.google.com/store/devices

Images sources:https://play.google.com/store/deviceshttp://www.htc.com/de/

Images sources:http://www.sony.de/hub/google-tv

Images Sourceshttps://developer.ford.com/

Resource Folders

You can use several qualifiers in the resource folders name for serving the best matching resource. Most used qualifiers:

● Language (-en)● Language & Region (-en-rUS)● Smallest Width (-swXXXdp, e.g. –sw600dp)● Screensize (-small, -normal, -large)● Screen Orientation (-port, -land)● Screen Pixel Densitiy (-mdpi, -hdpi, -xhdpi, -xxhdpi)● Platform Version (-v11, -v13)

Resource Folders

If you have several resource folders, the one with the greatest matching number qualifiers will be used. e.g. :

1. res/values/strings.xml2. res/values-en-rUS/strings.xml3. res/values-large/strings.xml4. res/values-sw600dp/strings.xml

Resource Folders

If you have several resource folders, the one with the greatest matching number qualifiers will be used. e.g. :

1. res/values/strings.xml2. res/values-en-rUS/strings.xml3. res/values-large/strings.xml4. res/values-sw600dp/strings.xml

If two resources have the same number of matching qualifiers, the ordering in the previous slide will rank the qualifiers.

e.g. Device configurations: Nexus One, Turkish: 1.Galaxy Tab 7.0 in German: 3.Nexus 7: 4.

Images

● Use the different qualifiers for the screen pixel density (mdpi, hdpi, etc.)

● If you are forced to use text on images use language and region (en, es-rUs, en-rUS, etc.)

● Better approach is to use 9-patch drawables, which stretches automatically depending on the content inside.

More about it: developer.android.com● You must provide different launcher icons for Froyo, Honeycomb

and above? Use the platform version. (v4, v11, v14)

Classifications For Layouts

If your minimum SDK is at least platform version 13 (Honeycomb MR2)

project-folder/res/layout/ small phoneslayout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”layout-sw720dp/ tablets 10”

You should also use orientation

Classifications For Layouts

If your minimum SDK is lower than platform version 11 (Honeycomb)project-folder/res/

layout/ phoneslayout-v11/ tablets 10”layout-v13/ small phoneslayout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”layout-sw720dp/ tablets 10”

The smallest width qualifier gets automatically platform version “v13” through the packager, for avoiding problems with the number of matching qualifiers.You can also use the screen size qualifier, if you want to reach small, medium and large screens previous to Honeycomb.

Classifications In Code

You can read the configurations from the device.

Smarter Approach: use boolean resources

project-folder/res/values/layouts.xml<resources>

<bool name="is_phone_small”>false</bool> <bool name="is_phone_other">true</bool> <bool name="is_tablet_7”>false</bool> <bool name="is_tablet_10”>false</bool>

</resources>

Classifications In Code

You can read the configurations from the device.

Smarter Approach: use boolean resources

project-folder/res/values/layouts.xml<resources>

<bool name="is_phone_small”>false</bool> <bool name="is_phone_other">true</bool> <bool name="is_tablet_7”>false</bool> <bool name="is_tablet_10”>false</bool>

</resources>

Usage in code: getResources().getBoolean(R.bool.is_phone_small)

Current Layout File Structure

project-folder/res/layout/main.xmllayout-v11/main.xmllayout-v13/main.xmllayout-sw320dp/main.xmllayout-sw600dp/main.xmllayout-sw720dp/main.xml

Fixing one bug in the 10“ layout has to be done in two files.

Fixing one bug in the 10“ layout has to be done in two files. error prone

Resource Alias

1. Put your layout files in the default folder.

project-folder/res/layout/main_phone_small.xmllayout/main_phone_other.xmllayout/main_tablet_7.xmllayout/main_tablet_10.xml

Resource Alias

1. Put your layout files in the default folder.

project-folder/res/layout/main_phone_small.xmllayout/main_phone_other.xmllayout/main_tablet_7.xmllayout/main_tablet_10.xml

2. Create an item with the needed classification in the previously defined values folder.

project-folder/res/values-sw600dp/layouts.xml<item name=“main”

type=“layout”>@layout/main_tablet7</item>

Sample Screen

Use <includes>

Sample Screen

Use <includes>

Create custom view

Custom Viewpublic class CustomView extends LinearLayout {

public CustomView(Context context, AttributeSet attrs) {super(context, attrs);LayoutParams lp = …addView(createText(context, "label"), lp);addView(createText(context, ”desc"), lp);if (getResources().getBoolean(R.bool.is_phone_small)

|| getResources().getBoolean(R.bool.is_phone_other)) {

setOrientation(VERTICAL);} else {

setOrientation(HORIZONTAL);}

private TextView createText(Context context, String text) { TextView textView = new TextView(context); textView.setText(text); return textView; }}

Sample Screen

Use <includes>

Create custom view

Sample Screen

Use <includes>

Create custom view

If custom view has much more business logic and need lifecycles Create a Fragment

Custom XML Attribute (attrs.xml)

Custom XML Attribute (main.xml)

Add to root XML nodexmlns:app="http://schemas.android.com/apk/res/de.alosdev"

Usage in custom view

<de.alosdev.CustomView android:id="@+id/customView" android:layout_width="wrap_content" android:layout_height="wrap_content" app:label="label 1" app:orientation="vertical" app:value="value 1" />

Custom XML Attribute (CustomView.java)

public class CustomView extends LinearLayout {static final int[] ORIENTATION = new int[] { HORIZONTAL, VERTICAL };

public CustomView(Context context, AttributeSet attrs) {super(context, attrs);

… TypedArray a = context.obtainStyledAttributes(attrs,

R.styleable.CustomView); try { setOrientation(ORIENTATION[ a.getInt(R.styleable.CustomView_orientation, 0)]); } finally { a.recycle(); } }

Custom XML Attribute (Screenshot)

Best Practiceswhich learned painfully

● You have already an applicationRemove orientation fixation and suppressing of orientation change from manifest to avoid long bug analyzing.

● You start from the scratchFocus on main classification for faster time to market

But create an overall concept for better modularization● If you support both orientations, save the instance state while

orientation changes for more responsivenessEspecially for states, need a long computation for creation.Make the state object Parcelable for faster write & read and also to have a smaller memory footprint

Mission Accomplished

http://www.flickr.com/photos/ianaberle/5729561934/

Mission Accomplished

http://www.flickr.com/photos/ianaberle/5729561934/

cleared

Source: http://www.flickr.com/photos/21496790@N06/5065834411/ Droidcon 2013 | Mutli-Device Nightmare | Hasan HosgelPage 37

www.immobilienscout24.dewww.immobilienscout24.de

Thanks for your attention& we are hiring!Contact:

Hasan HosgelTwitter: @alosdevGithub: alosdev

Multidevice NightmareRepo: https://github.com/alosdev/multidevice-nightmare-demoSlideShare: http://de.slideshare.net/hosgel/add-2013-multidevice-nightmare

Android Developer Days 2013 - MultiDevice Nightmare

Technology

Nuclear Nightmare

NIGHTMARE: Children abandoned - almedia.al.com/birminghamentries/other/Nightmare entry page 2.pdf · NIGHTMARE: Children abandoned FromPage1A Birminghampolice officerRachel Hoodsitsinfront

Blizzard Nightmare

Halloween Nightmare

Ike's nightmare

Nightmare 02

Bookmakers Nightmare

Dream nightmare ?

Nightmare thesis powerpoint

The Nightmare

Kazims nightmare

Nightmare Island

RAVENNA NIGHTMARE

Ms Nightmare

My nightmare

Nightmare 01

The Nightmare Encyclopedia Walkthroughnightmareonelmstreetfilms.com/Files/the-nightmare-series-encyclope… · The Nightmare Series Encyclopedia (NSE) is a bonus DVD in the Nightmare

Through Nightmare

Cómic nightmare

Nightmare On