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

www.immobilienscout24.dewww.immobilienscout24.de

Best Practices to develop for different Android Device Classifications

Droidcon | Amsterdam | 26.11.2013 | Hasan Hosgel

Droidcon NL 2013 | Develop for different device classifications | Hasan Hosgel

About me

+Hasan Hosgel

Twitter: @alosdevGithub: alosdevSlideshare: hosgel

CO-Organizer @ GDG Android in Berlin& community events

developer @ ImmobilienScout24

https://www.google.com/+HasanHosgel



https://twitter.com/alosdev

https://github.com/alosdev

http://de.slideshare.net/hosgel/

https://plus.google.com/102464661817600154044/

http://developer.immobilienscout24.de/advocates/

http://developer.immobilienscout24.de/advocates/


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

Fragmentation


Fragmentation


> 4400 Android Devices

Here comes The Nightmare

Droidcon NL 2013 | Develop for different device classifications | Hasan HosgelImage source:http://www.flickr.com/photos/boogeyman13/4553188509/

http://www.flickr.com/photos/boogeyman13/4553188509/

Here comes The Nightmare


For developers

Image source:http://www.flickr.com/photos/boogeyman13/4553188509/

http://www.flickr.com/photos/boogeyman13/4553188509/

Let’s build the fundament

Droidcon NL 2013 | Develop for different device classifications | Hasan HosgelImage source:http://www.flickr.com/photos/hertenberger/1434191066/

http://www.flickr.com/photos/hertenberger/1434191066/


Device Classification

Images sources:https://play.google.com/store/devices

https://play.google.com/store/devices



Images sources:https://play.google.com/store/deviceshttp://www.htc.com/de/

https://play.google.com/store/devices

http://www.htc.com/de/



Images sources:http://www.sony.de/hub/google-tv

http://www.sony.de/hub/google-tv


Droidcon NL 2013 | Develop for different device classifications | Hasan HosgelImages Sourceshttps://developer.ford.com/

https://developer.ford.com/


Wearables


Glass


Hard Work Ahead

Source: http://www.flickr.com/photos/16210667@N02/9172895225

http://www.flickr.com/photos/16210667@N02/9172895225

Resource Folders


You can use several qualifiers in the resource folders name for serving the best matching resource.


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)


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


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.


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)


Classifications for Layouts

Platform version at least v13 (Honeycomb MR2)




project-folder/res/layout/




project-folder/res/layout/ small phones




project-folder/res/layout/ small phoneslayout-sw320dp/ other phones




project-folder/res/layout/ small phoneslayout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”




project-folder/res/layout/ small phoneslayout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”layout-sw720dp/ tablets 10”

* You should also use the orientation qualifier


Platform version at lower v11

project-folder/res/layout/ phones layout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”layout-sw720dp/ tablets 10”



project-folder/res/layout/ phoneslayout-v11/ tablets 10”

layout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”layout-sw720dp/ tablets 10”



project-folder/res/layout/ phoneslayout-v11/ tablets 10”layout-v13/ small phoneslayout-sw320dp/ other phoneslayout-sw600dp/ tablets 7”layout-sw720dp/ tablets 10”


Hint

The smallest width qualifier gets automatically platform version ”-v13” through the packager, for avoiding problems with the number of matching qualifiers.


Howto Classify In Code

• Read configuration from the device


Howto Classify In Code

• Read configuration from the device• Smarter approach is to use boolean

resources


project-folder/res/values/layouts.xml<resources>

</resources>



<bool > </bool>

</resources>



<bool name="is_phone_small"> </bool>

</resources>



<bool name="is_phone_small">true</bool>

</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>


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


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.




Fixing one bug in the 10“ layout has to be done in two files. error prone


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


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>


Resource Alias



<item >

</item></resources>


Resource Alias



<item name="main" >

</item></resources>


Resource Alias



<item name="main" type="layout">

</item></resources>


Resource Alias



<item name="main" type="layout">

@layout/main_tablet_10.xml</item></resources>


Sample Screen


Sample Screen


Sample Screen

Use <includes>


Usage Includes

<LinearLayout … >… …

</LinearLayout>


Usage Includes

<LinearLayout … >…<include />…

</LinearLayout>


Usage Includes

<LinearLayout … >…<include layout="@layout/footer"/>…

</LinearLayout>


Sample Screen

Use <includes>


Sample Screen

Use <includes>


Sample Screen

Use <includes>

Create custom view


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);}

}…}


Usage CustomView in layout file

<LinearLayout … >…

…

</LinearLayout>


Usage CustomView in layout file

<LinearLayout … >…<de.alosdev.CustomView

android:layout_width="wrap_content" android:layout_height="wrap_content"/>

…</LinearLayout>


Sample Screen

Use <includes>

Create custom view

Custom XML Attribute


<resources> <declare-styleable > </declare-styleable><resources>



<resources> <declare-styleable name=”CustomView"> </declare-styleable><resources>



<resources> <declare-styleable name=”CustomView"> <attr /> </declare-styleable><resources>



<resources> <declare-styleable name=”CustomView"> <attr name="label" /> </declare-styleable><resources>



<resources> <declare-styleable name=”CustomView"> <attr name="label" format="reference|string"/> </declare-styleable><resources>



<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>


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" />


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(); } } …}





If custom view has much more business logic and need lifecycles Create a Fragment


Code


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


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


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)


●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.


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>


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

http://square.github.io/otto/

https://github.com/greenrobot/EventBus

http://tirania.org/blog/archive/2013/Aug-15.html

Custom Theme & StyleAndroid Ui Utils

http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

ActionBar Style Generator

http://jgilfelt.github.com/android-actionbarstylegenerator/

Holo Color Generator

http://android-holo-colors.com/


Mission Accomplished ?

http://www.flickr.com/photos/ianaberle/5729561934/



Mission Accomplished


cleared


Q & A

Source: http://www.flickr.com/photos/21496790@N06/5065834411/Page 84

http://www.flickr.com/photos/21496790@N06/5065834411/

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-nl-2013-best-practices-to-develop-for-different-android-device-classifications


https://twitter.com/alosdev

https://github.com/alosdev

https://github.com/alosdev/multidevice-nightmare-demo

http://www.slideshare.net/hosgel/droidcon-nl-2013-best-practices-to-develop-for-different-android-device-classifications



Technology

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