Best Practices to develop for different Android Device Classifications - DroidCon Turin 2014

This Session will give a best practices from the Immobilienscout24 Development for the different Android device classifications. During this presentation 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. Conclusion: The developers should loose their fear of developing for different screensizes in one application.

Transcript

1. www.immobilienscout24.de www.immobilienscout24.de Best Practices to develop for different Android Device Classifications Droidcon | Turin| 07.02.2014 | Hasan Hosgel
2. About me +HasanHosgel Twitter: @alosdev Github: alosdev Slideshare: hosgel CO-Organizer @ GDG Android in Berlin & community events developer @ ImmobilienScout24 Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
3. About ImmobilienScout24 Germany’s largest real estate listing company. > 10 Mio. Monthly unique users > 1.5 Mio. real estates > 300 Mio. detail views > 1500 Servers ~ 7.5 Mio. App downloads > 3 Mio. Android > 50% mobile traffic Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
4. Fragmentation Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
5. Fragmentation Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel > 5000 Android Devices
6. Here comes The Nightmare Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel Image source: http://www.flickr.com/photos/boogeyman13/4553188509/
7. Here comes The Nightmare Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel For developers Image source: http://www.flickr.com/photos/boogeyman13/4553188509/
8. Let’s build the fundament Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel Image source: http://www.flickr.com/photos/hertenberger/1434191066/
9. Device Classification Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel Images sources: https://play.google.com/store/devices
10. Device Classification Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel Images sources: https://play.google.com/store/devices http://www.htc.com/de/
11. Device Classification Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel Images sources: http://www.sony.de/hub/google-tv
12. Device Classification Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel Images Sources https://developer.ford.com/
13. Open Automotive Alliance Starting 2014 several companies plan to bring Android platform to the cars. • Audi • GM • Google • Honda • Hyundai • Nvidia http://www.openautoalliance.net/ Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
14. Wearables Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
15. Glass Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
16. Hard Work Ahead Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel Source: http://www.flickr.com/photos/16210667@N02/9172895225
17. Resource Folders Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel You can use several qualifiers in the resource folders name for serving the best matching resource.
18. Qualifiers • Language (-en) • Language & Region (-en-rUS) • Smallest Width (–sw600dp) • Screensize (-small, -normal, -large) • Screen Orientation (-port, -land) • Screen Pixel Densitiy (-hdpi, -xhdpi, -xxhdpi) • Platform Version (-v11, -v13) Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
19. 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 Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
20. 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. Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
21. 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) Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
22. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
23. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/ Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
24. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/  small phones Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
25. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/  small phones layout-sw320dp/  other phones Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
26. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/  small phones layout-sw320dp/  other phones layout-sw600dp/  tablets 7” Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
27. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/  small phones layout-sw320dp/  other phones layout-sw600dp/  tablets 7” layout-sw720dp/  tablets 10” * You should also use the orientation qualifier Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
28. Platform version at lower v11 project-folder/res/ layout/  phones layout-sw320dp/  other phones layout-sw600dp/  tablets 7” layout-sw720dp/  tablets 10” Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
29. Platform version at lower v11 project-folder/res/ layout/  phones layout-v11/  tablets 10” layout-sw320dp/  other phones layout-sw600dp/  tablets 7” layout-sw720dp/  tablets 10” Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
30. 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” Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
31. Hint The smallest width qualifier gets automatically platform version ”-v13” through the packager, for avoiding problems with the number of matching qualifiers. Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
32. Howto Classify In Code • Read configuration from the device Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
33. Howto Classify In Code • Read configuration from the device • Smarter approach is to use boolean resources Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
34. project-folder/res/values/layouts.xml <resources> </resources> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
35. project-folder/res/values/layouts.xml <resources> <bool > </bool> </resources> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
36. project-folder/res/values/layouts.xml <resources> <bool name="is_phone_small"> </bool> </resources> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
37. project-folder/res/values/layouts.xml <resources> <bool name="is_phone_small">true</bool> </resources> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
38. project-folder/res/values/layouts.xml <resources> <bool name="is_phone_small">true</bool> <bool name="is_phone_other">false</bool> <bool name="is_tablet_7">false</bool> <bool name="is_tablet_10">false</bool> </resources> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
39. project-folder/res/values/layouts.xml <resources> <bool name="is_phone_small">true</bool> <bool name="is_phone_other">false</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) Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
40. Current Layout File Structure Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel 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
41. Current Layout File Structure Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel 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.
42. Current Layout File Structure Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel 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
43. 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 Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
44. Resource Alias 2. Create an item with the needed classification in the previously defined values folder. project-folder/res/values- sw720dp/layouts.xml <resources> </resources> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
45. Resource Alias 2. Create an item with the needed classification in the previously defined values folder. project-folder/res/values- sw720dp/layouts.xml <resources> <item > </item> </resources> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
46. Resource Alias 2. Create an item with the needed classification in the previously defined values folder. project-folder/res/values- sw720dp/layouts.xml <resources> <item name="main" > </item> </resources> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
47. Resource Alias 2. Create an item with the needed classification in the previously defined values folder. project-folder/res/values- sw720dp/layouts.xml <resources> <item name="main" type="layout"> </item> </resources> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
48. Resource Alias 2. Create an item with the needed classification in the previously defined values folder. project-folder/res/values- sw720dp/layouts.xml <resources> <item name="main" type="layout"> @layout/main_tablet_10.xml</item> </resources> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
49. Sample Screen Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
50. Sample Screen Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
51. Sample Screen Use <includes> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
52. Usage Includes <LinearLayout … > … … </LinearLayout> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
53. Usage Includes <LinearLayout … > … <include /> … </LinearLayout> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
54. Usage Includes <LinearLayout … > … <include layout="@layout/footer"/> … </LinearLayout> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
55. Sample Screen Use <includes> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
56. Sample Screen Use <includes> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
57. Sample Screen Use <includes> Create custom view Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
58. 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); } } … } Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
59. Usage CustomView in layout file <LinearLayout … > … … </LinearLayout> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
60. Usage CustomView in layout file <LinearLayout … > … <de.alosdev.CustomView android:layout_width="wrap_content" android:layout_height="wrap_content"/> … </LinearLayout> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
61. Sample Screen Use <includes> Create custom view Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
62. Custom XML Attribute Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel <resources> <declare-styleable > </declare-styleable> <resources>
63. Custom XML Attribute Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel <resources> <declare-styleable name=”CustomView"> </declare-styleable> <resources>
64. Custom XML Attribute Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel <resources> <declare-styleable name=”CustomView"> <attr /> </declare-styleable> <resources>
65. Custom XML Attribute Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel <resources> <declare-styleable name=”CustomView"> <attr name="label" /> </declare-styleable> <resources>
66. Custom XML Attribute Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel <resources> <declare-styleable name=”CustomView"> <attr name="label" format="reference|string"/> </declare-styleable> <resources>
67. Custom XML Attribute Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel <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>
68. Usage in layout resource 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" /> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
69. Usage in code 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 IT 2014 | Develop for different device classifications | Hasan Hosgel
70. Custom XML Attribute Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
71. Custom XML Attribute Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel If custom view has much more business logic and need lifecycles  Create a Fragment
72. Code Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
73. 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 Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
74. 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 Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
75. 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. (minSDK -v14) Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
76. •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. Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
77. If you want to use “match_parent” or “wrap_content” in a dimension alias, you should use “-1dp” or “-2dp” project-folder/res/values/dimen.xml <resources> <dimen name="my_dimen>@dimen/match_parent</dimen> <dimen name="match_parent">-1dp</dimen> <dimen name="wrap_content">-2dp</dimen> </resources> project-folder/res/values-sw600dp/layout.xml <resources> <dimen name="my_dimen>300dp</dimen> </resources> Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
78. 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 Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
79. Custom Theme & Style Android Ui Utils Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
80. ActionBar Style Generator Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
81. Holo Color Generator Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
82. Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
83. Mission Accomplished ? Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel http://www.flickr.com/photos/ianaberle/5729561934/
84. Mission Accomplished Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel http://www.flickr.com/photos/ianaberle/5729561934/
85. Q & A Source: http://www.flickr.com/photos/21496790@N06/5065834411/ Page 85 Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
86. www.immobilienscout24.de www.immobilienscout24.de Thanks for your attention! Contact: +HasanHosgel Twitter: @alosdev Github: alosdev Best Practices to develop for different Android Device Classifications https://github.com/alosdev/multidevice-nightmare-demo http://www.slideshare.net/hosgel/droidcon-it-2014-best-practices-to-develop-for- different-android-device-classifications