Best Practices to develop the Layouts for different Android Device Classifications - Mobile Tech Conference 2013 Autumn Berlin

Here you can experience the learnings, which the presenter got during development of the ImmobilienScout 24 Android application. The presentation doesn't cover Design, UX or Fragments, but it gives an introduction and samples of using different resources, in special layouts. These folders can be used for filtering specific configurations, referencing other resources and using layout aliases. This session aims at people with knowledge of coding for Android.

Transcript

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.de www.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