Here you can gain advances knowledge on how to survive the Multi-Device Nightmare. It gives an introduction and samples of using different resource/ layout folders for filter specific configurations, referencing other resources and using layout aliases. This session aims at people with knowledge of coding for Android.
2. About me
Hasan Hosgel
Twitter: @alosdev
Github: alosdev
Google+: Hasan Hosgel
Slideshare: hosgel
developer @ ImmobilienScout24
CO-Organizer @ GDG Android in
Berlin
& community events
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
3. Fragmentation
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
5. Here comes The Nightmare
Image source: Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
http://www.flickr.com/photos/boogeyman13/4553188509/
6. Here comes The Nightmare
For developers
Image source: Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
http://www.flickr.com/photos/boogeyman13/4553188509/
11. 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)
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
12. 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
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
13. 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: 1.
Galaxy Tab 7.0 in German: 3.
Nexus 7: 4.
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
14. 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)
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
15. 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”
layout-sw720dp/ tablets 10”
You should also use orientation
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
16. 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
layout-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.
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
17. 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>
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
18. 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:
Context.getResources().getBoolean(R.bool.is_phone_small)
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
19. Current Layout File Structure
project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
layout-sw320dp/main.xml
layout-sw600dp/main.xml
layout-sw720dp/main.xml
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
20. Current Layout File Structure
project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
layout-sw320dp/main.xml
layout-sw600dp/main.xml
layout-sw720dp/main.xml
Fixing one bug in the 10“ layout has to be done in two files.
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
21. Current Layout File Structure
project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
layout-sw320dp/main.xml
layout-sw600dp/main.xml
layout-sw720dp/main.xml
Fixing one bug in the 10“ layout has to be done in two files.
error prone
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
22. Resource Alias
1. Put your layout files in the default folder.
project-folder/res/
layout/main.xml
layout/main_phone_other.xml
layout/main_tablet_7.xml
layout/main_tablet_10.xml
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
23. Resource Alias
1. Put the needed layout files in the default folder.
project-folder/res/
layout/main.xml
layout/main_phone_other.xml
layout/main_tablet_7.xml
layout/main_tablet_10.xml
2. Declare another resource file in the values folder and create an item
with the needed classification.
project-folder/res/values-sw600dp/layouts.xml
<item name=“main” type=“layout”>@layout/main_tablet7</item>
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
28. Sample Screen
Create custom view
Use <includes>
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
29. Sample Screen
Create custom view
If custom view has much more
business logic and need lifecycles
Create a Fragment
Use <includes>
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
31. 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" />
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
32. 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();
}
}
…
}
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
33. 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
Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel