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

About me
Hasan Hosgel
Twitter: @alosdev
Github: alosdev
Google+: Hasan Hosgel
Slideshare: hosgel
developer @ ImmobilienScout24,
CO-Organizer @ GDG Berlin Android,
Organizer @ community events &
Speaker
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel

Fragmentation

Fragmentation
> 3100 Android Devices

Here comes The Nightmare
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan HosgelImage 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
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan HosgelImages sources:
https://play.google.com/store/devices

https://play.google.com/store/devices
http://www.htc.com/de/

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

Android Developer Days 2013 | Mutli-Device Nightmare | Hasan HosgelImages Sources
https://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.xml
2. res/values-en-rUS/strings.xml
3. res/values-large/strings.xml
4. 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.xml
2. res/values-en-rUS/strings.xml
3. res/values-large/strings.xml
4. 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 phones
layout-sw320dp/  other phones
layout-sw600dp/  tablets 7”
You should also use orientation

Classifications For Layouts
If your minimum SDK is lower than platform version 11 (Honeycomb)
project-folder/res/
layout/  phones
layout-v11/  tablets 10”
layout-v13/  small phones
layout-sw320dp/  other phones
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>
</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>
</resources>
Usage in code:
getResources().getBoolean(R.bool.is_phone_small)

Current Layout File Structure
project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
layout-sw320dp/main.xml

project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
Fixing one bug in the 10“ layout has to be done in two files.

project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
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.xml
layout/main_phone_other.xml
layout/main_tablet_7.xml

Resource Alias
1. Put your layout files in the default folder.
project-folder/res/
layout/main_phone_small.xml
layout/main_phone_other.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

Sample Screen
Use <includes>

Sample Screen
Use <includes>
Create custom view

Custom View
public 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
If custom view has much more
business logic and need lifecycles
 Create a Fragment

Custom XML Attribute (attrs.xml)
<resources>
<declare-styleable name=”CustomView">
<attr name="label" format="reference|string" />
<attr name="value" format="reference|string" />
<attr name="orientation" format="enum">
<enum name="horizontal" value="0" />
<enum name="vertical" value="1" />
</attr>
</declare-styleable>
<resources>

Custom XML Attribute (main.xml)
Add to root XML node
xmlns: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 Practices
which learned painfully
● You have already an application
Remove orientation fixation and suppressing of orientation
change from manifest to avoid long bug analyzing.
● You start from the scratch
Focus 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 responsiveness
Especially 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
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgelhttp://www.flickr.com/photos/ianaberle/5729561934/

Q & A
Source: http://www.flickr.com/photos/21496790@N06/5065834411/ Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
Page 37

www.immobilienscout24.dewww.immobilienscout24.de
Thanks for your attention
& we are hiring!
Contact:
Hasan Hosgel
Twitter: @alosdev
Github: alosdev
Multidevice Nightmare
Repo: https://github.com/alosdev/multidevice-nightmare-demo
SlideShare: http://de.slideshare.net/hosgel/add-2013-multidevice-nightmare

Android Developer Days 2013 - MultiDevice Nightmare

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to Android Developer Days 2013 - MultiDevice Nightmare

Similar to Android Developer Days 2013 - MultiDevice Nightmare (20)

More from Hasan Hosgel

More from Hasan Hosgel (7)

Recently uploaded

Recently uploaded (20)

Android Developer Days 2013 - MultiDevice Nightmare