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

www.immobilienscout24.de

Best Practices to develop for
different Android Device Classifications

Droidcon | Amsterdam | 26.11.2013 | Hasan Hosgel

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

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

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

Here comes The Nightmare

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

Let’s build the fundament

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

Device Classification

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



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



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



Images Sources
https://developer.ford.com/


Wearables


Glass


Hard Work Ahead


Source: 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.xml
2.res/values-en-rUS/strings.xml
3.res/values-large/strings.xml
4.res/values-sw600dp/strings.xml


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.


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)



MR2)
project-folder/res/

layout/



MR2)
project-folder/res/

layout/

 small phones



MR2)
project-folder/res/

layout/

 small phones

layout-sw320dp/

 other phones



MR2)
project-folder/res/

layout/

 small phones

layout-sw320dp/

 other phones

layout-sw600dp/

 tablets 7”



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


Platform version at lower v11
project-folder/res/
layout/

 phones

layout-sw320dp/

 other phones

layout-sw600dp/

 tablets 7”

layout-sw720dp/

 tablets 10”


project-folder/res/
layout/

 phones

layout-v11/

 tablets 10”

layout-sw320dp/

 other phones

layout-sw600dp/

 tablets 7”

layout-sw720dp/

 tablets 10”


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”


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>


<resources>
<bool name="is_phone_other">false</bool>

<bool name="is_tablet_7">false</bool>
</resources>


<resources>
<bool name="is_phone_other">false</bool>

</resources>
Usage in code:
getResources().getBoolean(R.bool.is_phone_small)

Current Layout File Structure

project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
layout-sw320dp/main.xml



project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
Fixing one bug in the 10“ layout has to be done in two files.



project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
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.xml

layout/main_phone_other.xml
layout/main_tablet_7.xml
layout/main_tablet_10.xml


Resource Alias

2. Create an item with the needed
classification in the previously defined values
folder.

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

</resources>

Resource Alias

folder.

<resources>

<item

>
</item>

</resources>

Resource Alias

folder.

<resources>

<item name="main"

>
</item>

</resources>

Resource Alias

folder.

<resources>

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

Resource Alias

folder.

<resources>

<item name="main" type="layout">
@layout/main_tablet_10.xml</item>
</resources>

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

Create custom view

Use <includes>

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>


Custom XML Attribute
<resources>
<declare-styleable

>

</declare-styleable>
<resources>


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


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

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 Square
EventBus from greenrobot

See also: Callbacks as our Generations' Go To
Statement

Custom Theme & Style
Android Ui Utils

Mission Accomplished ?

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

Mission Accomplished

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

Q&A

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

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

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

More Related Content

Viewers also liked

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

More from Hasan Hosgel

Recently uploaded

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