Post on 11-Jan-2017
transcript
www.immobilienscout24.dewww.immobilienscout24.de
Best Practices to develop for different Android Device Classifications
Droidcon | Turin| 07.02.2014 | Hasan Hosgel
About me
+HasanHosgel
Twitter: @alosdevGithub: alosdevSlideshare: hosgel
CO-Organizer @ GDG Android in Berlin& community events
developer @ ImmobilienScout24
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
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
Fragmentation
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Fragmentation
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
> 5000 Android Devices
Here comes The Nightmare
Droidcon IT 2014 | Develop for different device classifications | Hasan HosgelImage source:http://www.flickr.com/photos/boogeyman13/4553188509/
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/
Let’s build the fundament
Droidcon IT 2014 | Develop for different device classifications | Hasan HosgelImage source:http://www.flickr.com/photos/hertenberger/1434191066/
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Device Classification
Images sources:https://play.google.com/store/devices
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Device Classification
Images sources:https://play.google.com/store/deviceshttp://www.htc.com/de/
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Device Classification
Images sources:http://www.sony.de/hub/google-tv
Device Classification
Droidcon IT 2014 | Develop for different device classifications | Hasan HosgelImages Sourceshttps://developer.ford.com/
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Open Automotive Alliance
Starting 2014 several companies plan to bring Android platform to the cars.• Audi• GM• Google• Honda• Hyundai• Nvidiahttp://www.openautoalliance.net/
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Wearables
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Glass
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Hard Work Ahead
Source: http://www.flickr.com/photos/16210667@N02/9172895225
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.
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
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
Best Matching Resources Win
1.res/values/strings.xml2.res/values-en-rUS/strings.xml3.res/values-large/strings.xml4.res/values-sw600dp/strings.xml
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Best Matching Resources Win
1.res/values/strings.xml2.res/values-en-rUS/strings.xml3.res/values-large/strings.xml4.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
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
Classifications for Layouts
Platform version at least v13 (Honeycomb MR2)
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Classifications for Layouts
Platform version at least v13 (Honeycomb MR2)
project-folder/res/layout/
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
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
Classifications for Layouts
Platform version at least v13 (Honeycomb MR2)
project-folder/res/layout/ small phoneslayout-sw320dp/ other phones
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Classifications for Layouts
Platform version at least v13 (Honeycomb MR2)
project-folder/res/layout/ small phoneslayout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Classifications for Layouts
Platform version at least v13 (Honeycomb MR2)
project-folder/res/layout/ small phoneslayout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”layout-sw720dp/ tablets 10”
* You should also use the orientation qualifier
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Platform version at lower v11
project-folder/res/layout/ phones layout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”layout-sw720dp/ tablets 10”
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Platform version at lower v11
project-folder/res/layout/ phoneslayout-v11/ tablets 10”
layout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”layout-sw720dp/ tablets 10”
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Platform version at lower v11
project-folder/res/layout/ phoneslayout-v11/ tablets 10”layout-v13/ small phoneslayout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”layout-sw720dp/ tablets 10”
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
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
Howto Classify In Code
• Read configuration from the device
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
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
project-folder/res/values/layouts.xml<resources>
</resources>
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
project-folder/res/values/layouts.xml<resources>
<bool > </bool>
</resources>
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
project-folder/res/values/layouts.xml<resources>
<bool name="is_phone_small"> </bool>
</resources>
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
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
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
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)
Current Layout File Structure
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
project-folder/res/layout/main.xmllayout-v11/main.xmllayout-v13/main.xmllayout-sw320dp/main.xmllayout-sw600dp/main.xmllayout-sw720dp/main.xml
Current Layout File Structure
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
project-folder/res/layout/main.xmllayout-v11/main.xmllayout-v13/main.xmllayout-sw320dp/main.xmllayout-sw600dp/main.xmllayout-sw720dp/main.xml
Fixing one bug in the 10“ layout has to be done in two files.
Current Layout File Structure
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
project-folder/res/layout/main.xmllayout-v11/main.xmllayout-v13/main.xmllayout-sw320dp/main.xmllayout-sw600dp/main.xmllayout-sw720dp/main.xml
Fixing one bug in the 10“ layout has to be done in two files. error prone
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Resource Alias
Put your layout files in the default folder.
project-folder/res/layout/main_phone_small.xmllayout/main_phone_other.xmllayout/main_tablet_7.xmllayout/main_tablet_10.xml
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
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
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
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
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
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
Sample Screen
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Sample Screen
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Sample Screen
Use <includes>
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Usage Includes
<LinearLayout … >… …
</LinearLayout>
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Usage Includes
<LinearLayout … >…<include />…
</LinearLayout>
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Usage Includes
<LinearLayout … >…<include layout="@layout/footer"/>…
</LinearLayout>
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Sample Screen
Use <includes>
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Sample Screen
Use <includes>
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Sample Screen
Use <includes>
Create custom view
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
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
Usage CustomView in layout file
<LinearLayout … >…
…
</LinearLayout>
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
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
Sample Screen
Use <includes>
Create custom view
Custom XML Attribute
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
<resources> <declare-styleable > </declare-styleable><resources>
Custom XML Attribute
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
<resources> <declare-styleable name=”CustomView"> </declare-styleable><resources>
Custom XML Attribute
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
<resources> <declare-styleable name=”CustomView"> <attr /> </declare-styleable><resources>
Custom XML Attribute
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
<resources> <declare-styleable name=”CustomView"> <attr name="label" /> </declare-styleable><resources>
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>
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>
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Usage in layout resource
1. Add to root XML nodexmlns: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
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
Custom XML Attribute
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Custom XML Attribute
If custom view has much more business logic and need lifecycles Create a Fragment
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Code
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Best Practices
●You have already an applicationRemove orientation fixation and suppressing of orientation change from manifest to avoid long bug analyzing.
●You start from the scratchFocus on main classification for faster time to marketBut create an overall concept for better modularization
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
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
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
●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
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
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 SquareEventBus from greenrobot
See also: Callbacks as our Generations' Go To Statement
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Custom Theme & StyleAndroid Ui Utils
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
ActionBar Style Generator
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Holo Color Generator
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Mission Accomplished ?
http://www.flickr.com/photos/ianaberle/5729561934/
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Mission Accomplished
http://www.flickr.com/photos/ianaberle/5729561934/
cleared
Droidcon IT 2014 | Develop for different device classifications | Hasan Hosgel
Q & A
Source: http://www.flickr.com/photos/21496790@N06/5065834411/Page 85
www.immobilienscout24.dewww.immobilienscout24.de
Thanks for your attention!
Contact:
+HasanHosgelTwitter: @alosdevGithub: alosdev
Best Practices to develop for different Android Device Classificationshttps://github.com/alosdev/multidevice-nightmare-demohttp://www.slideshare.net/hosgel/droidcon-it-2014-best-practices-to-develop-for-different-android-device-classifications