Droidcon 2013 multidevice nightmare

  • View
    210

  • Download
    2

Embed Size (px)

Transcript

  • 1.www.immobilienscout24.deThe Multi-Device Nightmare- and how to clear the Elm StreetDroidcon | Berlin | 09.03.2013 | Hasan Hosgel

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. FragmentationDroidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 4. Fragmentation > 2700 Android DevicesDroidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 5. Here comes The NightmareImage source:Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttp://www.flickr.com/photos/boogeyman13/4553188509/ 6. Here comes The NightmareFor developersImage source:Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttp://www.flickr.com/photos/boogeyman13/4553188509/ 7. Device ClassificationImages sources: Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttps://play.google.com/store/devices 8. Device ClassificationImages sources: Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttps://play.google.com/store/deviceshttp://www.htc.com/de/ 9. Device ClassificationImages sources:Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttp://www.sony.de/hub/google-tv 10. Device ClassificationImages SourcesDroidcon 2013 | Mutli-Device Nightmare | Hasan Hosgelhttps://developer.ford.com/ 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. 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. 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. 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. 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 10You should also use orientation Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 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 10The smallest width qualifier gets automatically platform version v13through the packager, for avoiding problems with the number ofmatching qualifiers.You can also use the screen size qualifier, if you want to reach small,medium and large screens previous to Honeycomb.Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 17. Classifications In CodeYou can read the configurations from the device.Smarter Approach: use boolean resourcesproject-folder/res/values/layouts.xmltruefalse Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 18. Classifications In CodeYou can read the configurations from the device.Smarter Approach: use boolean resourcesproject-folder/res/values/layouts.xmltruefalseUsage in code:Context.getResources().getBoolean(R.bool.is_phone_small) Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 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. 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. 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. Resource Alias1. Put your layout files in the default folder.project-folder/res/layout/main.xmllayout/main_phone_other.xmllayout/main_tablet_7.xmllayout/main_tablet_10.xml Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 23. Resource Alias1. Put the needed layout files in the default folder.project-folder/res/layout/main.xmllayout/main_phone_other.xmllayout/main_tablet_7.xmllayout/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@layout/main_tablet7Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 24. Sample ScreenDroidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 25. Sample ScreenUse Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 26. Sample Screen Create custom viewUse Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 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. Sample Screen Create custom viewUse Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 29. Sample ScreenCreate custom viewIf custom view has much morebusiness logic and need lifecycles Create a Fragment Use Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 30. Custom XML Attribute (attrs.xml) Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 31. Custom XML Attribute (main.xml)Add to root XML nodexmlns:app="http://schemas.android.com/apk/res/de.alosdev"Usage in custom view Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 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. Best Practiceswhich learned painfully You have already an application " Remove orientation fixation and suppressing of orientationchange 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. Mission Accomplishedhttp://www.flickr.com/photos/ianaberle/5729561934/ Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 35. Mission Accomplishedclea redhttp://www.flickr.com/photos/ianaberle/5729561934/ Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 36. Q&APage 36Source: http://www.flickr.com/photos/21496790@N06/5065834411/ Droidcon 2013 | Mutli-Device Nightmare | Hasan Hosgel 37. www.immobilienscout24.deThanks for your attention!Contact:Hasan Hosgel Multidevice NightmareTwitter: @alosdevRepo:https://github.com/alosdev/multidevice-nightmare-demoGithub: alosdevSlideShare: http://de.slideshare.net/hosgel/droidcon-2013-multidevice-nightmare