www.immobilienscout24.deThe Multi-Device Nightmare- and how to clear the Elm StreetDroidcon | Berlin | 09.03.2013 | Hasan ...
About me             Hasan Hosgel             Twitter:              @alosdev             Github:               alosdev    ...
Fragmentation                Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
Fragmentation     > 2700 Android Devices                Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
Here comes The NightmareImage source:                                          Droidcon 2013 | Mutli-Device Nightmare | Ha...
Here comes The Nightmare                               For developersImage source:                                        ...
Device ClassificationImages sources:                         Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttps://...
Device ClassificationImages sources:                         Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttps://...
Device ClassificationImages sources:                    Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttp://www.so...
Device ClassificationImages Sources                Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttps://developer....
Resource FoldersYou can use several qualifiers in the resource folders name for servingthe best matching resource. Most us...
Resource FoldersIf you have several resource folders, the one with the greatestmatching number qualifiers will be used. e....
Resource FoldersIf you have several resource folders, the one with the greatestmatching number qualifiers will be used. e....
Images●   Use the different qualifiers for the screen pixel density (mdpi, hdpi,    etc.)●   If you are forced to use text...
Classifications For LayoutsIf your minimum SDK is at least platform version 13 (Honeycomb MR2)project-folder/res/   layout...
Classifications For LayoutsIf your minimum SDK is lower than platform version 11 (Honeycomb)project-folder/res/   layout/ ...
Classifications In CodeYou can read the configurations from the device.Smarter Approach: use boolean resourcesproject-fold...
Classifications In CodeYou can read the configurations from the device.Smarter Approach: use boolean resourcesproject-fold...
Current Layout File Structureproject-folder/res/   layout/main.xml   layout-v11/main.xml   layout-v13/main.xml   layout-sw...
Current Layout File Structureproject-folder/res/   layout/main.xml   layout-v11/main.xml   layout-v13/main.xml   layout-sw...
Current Layout File Structureproject-folder/res/   layout/main.xml   layout-v11/main.xml   layout-v13/main.xml   layout-sw...
Resource Alias1. Put your layout files in the default folder.    project-folder/res/        layout/main.xml        layout/...
Resource Alias1. Put the needed layout files in the default folder.    project-folder/res/        layout/main.xml        l...
Sample Screen                Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
Sample Screen                       Use <includes>                Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
Sample Screen                   Create custom view                       Use <includes>                Droidcon 2013 | Mut...
Custom Viewpublic class CustomView extends LinearLayout {  public CustomView(Context context, AttributeSet attrs) {    sup...
Sample Screen                   Create custom view                       Use <includes>                Droidcon 2013 | Mut...
Sample Screen                          Create custom view      If custom view has much more      business logic and need l...
Custom XML Attribute (attrs.xml)<resources> <declare-styleable name=”CustomView">    <attr name="label" format="reference|...
Custom XML Attribute (main.xml)Add to root XML nodexmlns:app="http://schemas.android.com/apk/res/de.alosdev"Usage in custo...
Custom XML Attribute (CustomView.java)public class CustomView extends LinearLayout {static final int[] ORIENTATION = new i...
Best Practiceswhich learned painfully●   You have already an application       Remove orientation fixation and suppressing...
Mission Accomplishedhttp://www.flickr.com/photos/ianaberle/5729561934/   Droidcon 2013 | Mutli-Device Nightmare | Hasan Ho...
Mission Accomplishedhttp://www.flickr.com/photos/ianaberle/5729561934/   Droidcon 2013 | Mutli-Device Nightmare | Hasan Ho...
Q&A                                                                                                              Page 36So...
www.immobilienscout24.deThanks for your attention!Contact:Hasan Hosgel               Multidevice NightmareTwitter: @alosde...
Upcoming SlideShare
Loading in …5
×

Droidcon 2013 Multidevice Nightmare

1,429 views

Published on

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.

Published in: Technology, News & Politics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,429
On SlideShare
0
From Embeds
0
Number of Embeds
174
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Droidcon 2013 Multidevice Nightmare

  1. 1. www.immobilienscout24.deThe Multi-Device Nightmare- and how to clear the Elm StreetDroidcon | Berlin | 09.03.2013 | Hasan Hosgel
  2. 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. 3. Fragmentation Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  4. 4. Fragmentation > 2700 Android Devices Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  5. 5. Here comes The NightmareImage source: Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttp://www.flickr.com/photos/boogeyman13/4553188509/
  6. 6. Here comes The Nightmare For developersImage source: Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttp://www.flickr.com/photos/boogeyman13/4553188509/
  7. 7. Device ClassificationImages sources: Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttps://play.google.com/store/devices
  8. 8. Device ClassificationImages sources: Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttps://play.google.com/store/deviceshttp://www.htc.com/de/
  9. 9. Device ClassificationImages sources: Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttp://www.sony.de/hub/google-tv
  10. 10. Device ClassificationImages Sources Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttps://developer.ford.com/
  11. 11. Resource FoldersYou can use several qualifiers in the resource folders name for servingthe 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. 12. Resource FoldersIf you have several resource folders, the one with the greatestmatching number qualifiers will be used. e.g. :1. res/values/strings.xml2. res/values-en-rUS/strings.xml3. res/values-large/strings.xml4. res/values-sw600dp/strings.xml Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  13. 13. Resource FoldersIf you have several resource folders, the one with the greatestmatching number qualifiers will be used. e.g. :1. res/values/strings.xml2. res/values-en-rUS/strings.xml3. res/values-large/strings.xml4. res/values-sw600dp/strings.xmlIf two resources have the same number of matching qualifiers, theordering 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. 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. 15. Classifications For LayoutsIf 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. 16. Classifications For LayoutsIf 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 ofmatching qualifiers.You can also use the screen size qualifier, if you want to reachsmall, medium and large screens previous to Honeycomb. Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  17. 17. Classifications In CodeYou can read the configurations from the device.Smarter Approach: use boolean resourcesproject-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. 18. Classifications In CodeYou can read the configurations from the device.Smarter Approach: use boolean resourcesproject-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. 19. Current Layout File Structureproject-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. 20. Current Layout File Structureproject-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. 21. Current Layout File Structureproject-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. 22. Resource Alias1. 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. 23. Resource Alias1. 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.xml2. 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
  24. 24. Sample Screen Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  25. 25. Sample Screen Use <includes> Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  26. 26. Sample Screen Create custom view Use <includes> Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  27. 27. Custom Viewpublic class CustomView extends LinearLayout { public CustomView(Context context, AttributeSet attrs) { super(context, attrs); LayoutParams lp = … addView(getText(context, "label"), lp); addView(getText(context, "value"), lp); if (context.getResources().getBoolean(R.bool.is_phone) || context.getResources().getBoolean(R.bool.is_phone_other)) { setOrientation(VERTICAL); } else { setOrientation(HORIZONTAL); }} private TextView getText(Context context, String text) { TextView textView = new TextView(context); textView.setText(text); return textView; }} Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  28. 28. Sample Screen Create custom view Use <includes> Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  29. 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
  30. 30. Custom XML Attribute (attrs.xml)<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 2013 | Mutli-Device Nightmare | Hasan Hosgel
  31. 31. Custom XML Attribute (main.xml)Add to root XML nodexmlns: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. 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. 33. Best Practiceswhich 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
  34. 34. Mission Accomplishedhttp://www.flickr.com/photos/ianaberle/5729561934/ Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  35. 35. Mission Accomplishedhttp://www.flickr.com/photos/ianaberle/5729561934/ Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  36. 36. Q&A Page 36Source: http://www.flickr.com/photos/21496790@N06/5065834411/ Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel
  37. 37. www.immobilienscout24.deThanks for your attention!Contact:Hasan Hosgel Multidevice NightmareTwitter: @alosdev Repo: https://github.com/alosdev/multidevice-nightmare-demoGithub: alosdev SlideShare: http://de.slideshare.net/hosgel/droidcon-2013-multidevice-nightmare

×