The document outlines best practices for developing layouts tailored to various Android device classifications by utilizing qualifiers such as language, screen size, and pixel density. It emphasizes the importance of resource aliasing and the use of custom views to enhance modularity and responsiveness. It also provides coding guidelines for managing resources effectively across different device configurations.

1. Hasan Hosgel | ImmobilienScout24
Best Practices to develop the
Layouts for different Android Device
Classifications

2. About Me
Hasan Hosgel
• developer @
ImmobilienScout24,
• CO-Organizer @
GDG Berlin Android
• Twitter / Github:
alosdev
• Google+:
Hasan Hosgel

4. > 3600 Android Devices

5. Source: http://www.flickr.com/photos/hertenberger/1434191066/

6. Device Classification
Images sources:
https://play.google.com/store/devices

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

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

9. Images Sources
https://developer.ford.com/

11. Images sources:
http://www.sonymobile.com/global-en/products/accessories/smartwatch-2-sw2/

12. Source: http://www.flickr.com/photos/paulbrigham/8452522044/

13. Resource Folders
You can use several qualifiers in the
resource folders name for serving the
best matching resource.

14. Qualifiers
• Language (-en)
• Language & Region (-en-rUS)
• Smallest Width (sw600dp)
• Screensize (-small, -normal, -large)
• Screen Orientation (-port, -land)
• Screen Pixel Densitiy (-mdpi, -hdpi,...)
• Platform Version (-v11, -v13)

15. Best Matching Resources Win
1. res/values/strings.xml
2. res/values-en-rUS/strings.xml
3. res/values-large/strings.xml
4. res/values-sw600dp/strings.xml
The order of the qualifiers in the previous slides
gives the ranking, if two resources have the
same matching number of qualifiers.

16. Images Resources
• 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.
• You must provide different launcher icons for
Froyo, Honeycomb and above? Use the platform
version. (v4, v11, v14)

17. Classifications for Layouts
Platform version at least v13
project-folder/res/
layout/ è small phones
layout-sw320dp/ è other phones
layout-sw600dp/ è tablets 7”
layout-sw720dp/ è tablets 10”

18. Platform version at lower v11
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”

19. hint
The smallest width qualifier gets
automatically platform version "-v13"
through the packager, for avoiding
problems with the number of matching
qualifiers.

20. Howto Classify In Code
• Read configuration from the device
• Smarter approach use boolean
resources

21. 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>

22. 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>

23. 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>

24. 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>

25. 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)

26. 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)

27. Current 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

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

29. Fixing one bug in the 10" layout has to
be done in two files
è error prone

30. Fixing one bug in the 10" layout has to
be done in two files
è error prone
How to avoid this?

31. Fixing one bug in the 10" layout has to
be done in two files
è error prone
How to avoid this?
- Use resource aliasing.

32. Resource Alias
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
layout/main_tablet_10.xml

33. Resource Alias
2. Create an item with the needed
classification in the previously defined
values folder.
project-folder/res/values-sw720dp/
layouts.xml
<item name="main"
type="layout">@layout/main_tablet10</item>

34. Resource Alias
2. Create an item with the needed
classification in the previously defined
values folder.
project-folder/res/values-sw720dp/
layouts.xml
<item name="main"
type="layout">@layout/main_tablet10</item>

35. Resource Alias
2. Create an item with the needed
classification in the previously defined
values folder.
project-folder/res/values-sw720dp/
layouts.xml
<item name="main"
type="layout">@layout/main_tablet10</item>

36. Resource Alias
2. Create an item with the needed
classification in the previously defined
values folder.
project-folder/res/values-sw720dp/
layouts.xml
<item name="main"
type="layout">@layout/main_tablet10</item>

37. CODE

38. Sample Screen

39. Sample Screen

40. Sample Screen
Use <includes>

41. Usage Includes
<LinearLayout … >
…
<include layout="@layout/footer"/>
…
</LinearLayout>

42. Usage Includes
<LinearLayout … >
…
<include layout="@layout/footer"/>
…
</LinearLayout>

43. Usage Includes
<LinearLayout … >
…
<include layout="@layout/footer"/>
…
</LinearLayout>

44. CODE

45. Sample Screen
Use <includes>

46. Sample Screen
Use <includes>

47. Sample Screen
Use <includes>
Create custom view

48. Custom View
public class CustomView extends LinearLayout {
…
public CustomView(Context context, AttributeSet
attrs) {
…
addView(createTextView(context, "label"), lp);
addView(createTextView(context, "desc"), lp);
if(getResources().getBoolean(R.bool.is_phone)){
setOrientation(VERTICAL);
} else {
setOrientation(HORIZONTAL);
}
}
…
}

49. Sample Screen
Use <includes>
Create custom view

50. Sample Screen
Use <includes>
Create custom view
If custom view has much more
business logic and need lifecycles
 Create a Fragment

51. Custom XML Attribute
<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>

52. Custom XML Attribute
<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>

53. Custom XML Attribute
<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>

54. Custom XML Attribute
<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>

55. Custom XML Attribute
<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>

56. Custom XML Attribute
<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>

57. 1. Add to root XML node
xmlns:app="http://
schemas.android.com/apk/res-auto"
2. 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" />

58. 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();
}
}
…
}

59. 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();
}
}
…
}

60. 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();
}
}
…
}

61. 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();
}
}
…
}

62. CODE

63. Custom XML Attribute

64. Best Practices
• 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

65. Best Practices
• If you support both orientations, save
the instance state while orientation
changes for more responsiveness
» Especially for states, that need a long
computation for creation.
» Make the state object Parcelable for
faster write & read and also to have a
smaller memory footprint

66. Developer Hints
• You can start an activity for result from
a fragment, so the response can be
handled in the fragment.
• If you want to register a special service
on every onCreate method of an activity
give the ActivityLivecycleCallbacks a
try. You can register them in the
onCreate method of the application.
(min v14)

67. • If you get a BadParcelableException
with the cause ClassNotFound-
Exception, the source can be a
NullPointerException during the read or
write of the Parcelable. Exceptions are
hidden during the parcel process.

68. Listener Hell
If you have to many listeners or you think
the programming model is old school like
the “goto statements”. Give message/
event/ service bus a try. For Android:
• Otto from Square
• EventBus from greenrobot
See also: Callbacks as our Generations' Go To Statement

69. Custom Theme & Style
Android Ui Utils

70. ActionBar Style Generator

71. Holo Color Generator

73. Q & A
Source: http://www.flickr.com/photos/21496790@N06/5065834411/

74. www.immobilienscout24.dewww.immobilienscout24.de
Thanks for your attention
& we are hiring!
Contact:
Hasan Hosgel
Twitter: @alosdev
Github: alosdev
Best Practices to develop the Layouts for different Android Device Classifications
Repo: https://github.com/alosdev/multidevice-nightmare-demo
SlideShare: http://www.slideshare.net/hosgel/mtc-2013-berlin-best-practices-for-multi-devices