Your SlideShare is downloading. ×
Droidcon nl 2013 best practices to develop for different android device classifications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Droidcon nl 2013 best practices to develop for different android device classifications

607
views

Published on

Here you can experience the learnings, which the presenter got during development of the ImmobilienScout24 Android application. The presentation doesn't cover Design, UX or Fragments, but it gives an …

Here you can experience the learnings, which the presenter got during development of the ImmobilienScout24 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.

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
607
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. www.immobilienscout24.de Best Practices to develop for different Android Device Classifications Droidcon | Amsterdam | 26.11.2013 | Hasan Hosgel
  • 2. About me +Hasan Hosgel Twitter: @alosdev Github: alosdev Slideshare: hosgel CO-Organizer @ GDG Android in Berlin & community events developer @ ImmobilienScout24 Droidcon NL 2013 | 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 ~ 6.5 Mio. App downloads ~ 3 Mio. Android ~ 50% mobile traffic Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 4. Fragmentation Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 5. Fragmentation > 4400 Android Devices Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 6. Here comes The Nightmare Image source: Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel http://www.flickr.com/photos/boogeyman13/4553188509/
  • 7. Here comes The Nightmare For developers Image source: Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel http://www.flickr.com/photos/boogeyman13/4553188509/
  • 8. Let’s build the fundament Image source: Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel http://www.flickr.com/photos/hertenberger/1434191066/
  • 9. Device Classification Images sources: https://play.google.com/store/devices Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 10. Device Classification Images sources: https://play.google.com/store/devices http://www.htc.com/de/ Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 11. Device Classification Images sources: http://www.sony.de/hub/google-tv Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 12. Device Classification Images Sources https://developer.ford.com/ Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 13. Wearables Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 14. Glass Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 15. Hard Work Ahead Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel Source: http://www.flickr.com/photos/16210667@N02/9172895225
  • 16. Resource Folders You can use several qualifiers in the resource folders name for serving the best matching resource. Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 17. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 18. 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 NL 2013 | 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 The order of the qualifiers in the previous slides gives the ranking, if two resources have the same matching number of qualifiers. Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 20. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 21. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 22. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/ Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 23. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/  small phones Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 24. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/  small phones layout-sw320dp/  other phones Droidcon NL 2013 | 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 layout-sw600dp/  tablets 7” Droidcon NL 2013 | 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” layout-sw720dp/  tablets 10” * You should also use the orientation qualifier Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 27. Platform version at lower v11 project-folder/res/ layout/  phones layout-sw320dp/  other phones layout-sw600dp/  tablets 7” layout-sw720dp/  tablets 10” Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 28. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 29. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 30. Hint The smallest width qualifier gets automatically platform version ”-v13” through the packager, for avoiding problems with the number of matching qualifiers. Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 31. Howto Classify In Code • Read configuration from the device Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 32. Howto Classify In Code • Read configuration from the device • Smarter approach is to use boolean resources Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 33. project-folder/res/values/layouts.xml <resources> </resources> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 34. project-folder/res/values/layouts.xml <resources> <bool > </bool> </resources> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 35. project-folder/res/values/layouts.xml <resources> <bool name="is_phone_small"> </bool> </resources> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 36. project-folder/res/values/layouts.xml <resources> <bool name="is_phone_small">true</bool> </resources> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 37. 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 NL 2013 | 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> Usage in code: getResources().getBoolean(R.bool.is_phone_small) Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 39. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 40. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 41. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 42. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 43. Resource Alias 2. Create an item with the needed classification in the previously defined values folder. project-folder/res/valuessw720dp/layouts.xml <resources> </resources> Droidcon NL 2013 | 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/valuessw720dp/layouts.xml <resources> <item > </item> </resources> Droidcon NL 2013 | 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/valuessw720dp/layouts.xml <resources> <item name="main" > </item> </resources> Droidcon NL 2013 | 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/valuessw720dp/layouts.xml <resources> <item name="main" type="layout"> </item> </resources> Droidcon NL 2013 | 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/valuessw720dp/layouts.xml <resources> <item name="main" type="layout"> @layout/main_tablet_10.xml</item> </resources> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 48. Sample Screen Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 49. Sample Screen Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 50. Sample Screen Use <includes> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 51. Usage Includes <LinearLayout … > … … </LinearLayout> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 52. Usage Includes <LinearLayout … > … <include … </LinearLayout> /> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 53. Usage Includes <LinearLayout … > … <include layout="@layout/footer"/> … </LinearLayout> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 54. Sample Screen Use <includes> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 55. Sample Screen Use <includes> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 56. Sample Screen Create custom view Use <includes> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 57. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 58. Usage CustomView in layout file <LinearLayout … > … … </LinearLayout> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 59. Usage CustomView in layout file <LinearLayout … > … <de.alosdev.CustomView android:layout_width="wrap_content" android:layout_height="wrap_content"/> … </LinearLayout> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 60. Sample Screen Create custom view Use <includes> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 61. Custom XML Attribute <resources> <declare-styleable > </declare-styleable> <resources> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 62. Custom XML Attribute <resources> <declare-styleable name=”CustomView"> </declare-styleable> <resources> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 63. Custom XML Attribute <resources> <declare-styleable name=”CustomView"> <attr </declare-styleable> <resources> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel />
  • 64. Custom XML Attribute <resources> <declare-styleable name=”CustomView"> <attr name="label" </declare-styleable> <resources> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel />
  • 65. Custom XML Attribute <resources> <declare-styleable name=”CustomView"> <attr name="label" format="reference|string"/> </declare-styleable> <resources> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 66. 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> Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 67. Usage in layout resource 1. Add to root XML node xmlns:app="http://schemas.android.com/apk/resauto" 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 68. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 69. Custom XML Attribute Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 70. Custom XML Attribute If custom view has much more business logic and need lifecycles  Create a Fragment Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 71. Code Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 72. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 73. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 74. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 75. ● 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 76. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 77. 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 NL 2013 | Develop for different device classifications | Hasan Hosgel
  • 78. Custom Theme & Style Android Ui Utils
  • 79. ActionBar Style Generator
  • 80. Holo Color Generator
  • 81. Mission Accomplished ? Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel http://www.flickr.com/photos/ianaberle/5729561934/
  • 82. Mission Accomplished Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel http://www.flickr.com/photos/ianaberle/5729561934/
  • 83. Q&A Page 84 Source: http://www.flickr.com/photos/21496790@N06/5065834411/
  • 84. 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-nl-2013-best-practices-to-develop-fordifferent-android-device-classifications