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
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Fragmentation
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Fragmentation
> 3100 Android Devices
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Here comes The Nightmare
Image source:http://www.flickr.com/photos/boogeyman13/4553188509/
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Here comes The Nightmare
For developers
Image source:http://www.flickr.com/photos/boogeyman13/4553188509/
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Device Classification
Images sources:https://play.google.com/store/devices
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Device Classification
Images sources:https://play.google.com/store/deviceshttp://www.htc.com/de/
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Device Classification
Images sources:http://www.sony.de/hub/google-tv
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Device Classification
Images Sourceshttps://developer.ford.com/
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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)
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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.
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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)
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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.
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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>
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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)
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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.
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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. error prone
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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>
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Sample Screen
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Sample Screen
Use <includes>
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Sample Screen
Use <includes>
Create custom view
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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; }}
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Sample Screen
Use <includes>
Create custom view
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Sample Screen
Use <includes>
Create custom view
If custom view has much more business logic and need lifecycles Create a Fragment
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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>
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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" />
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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(); } }
…}
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Custom XML Attribute (Screenshot)
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
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
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Mission Accomplished
http://www.flickr.com/photos/ianaberle/5729561934/
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Mission Accomplished
http://www.flickr.com/photos/ianaberle/5729561934/
cleared
Android Developer Days 2013 | Mutli-Device Nightmare | Hasan Hosgel
Q & A
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