Hasan Hosgel | ImmobilienScout24
Best Practices to develop for
different Android Device
Classifications
About me
• +HasanHosgel
@alosdev
alosdev
hosgel
CO-Organizer
Developer
ImmobilienScout24
Germany’s largest real estate listing company.
> 10 Mio. Monthly unique users
> 1.5 Mio. real estates
> ...
Fragmentation
Fragmentation
> 5000 Android Devices
Here comes the Nightmare
Image source:
http://www.flickr.com/photos/boogeyman13/4553188509/
Image source:
http://www.flickr.com/photos/boogeyman13/4553188509/
Here comes the Nightmare
For developers
Let’s build the fundament
Image source:
http://www.flickr.com/photos/hertenberger/1434191066/
Device Classification
Image source:
https://play.google.com/store/devices
Image source:
https://play.google.com/store/devices
http://www.htc.com
Image source:
http://www.sony.de/hub/google-tv
Image source:
https://developer.ford.com/
Open Automotive Alliance
Starting 2014 several companies plan to
bring Android platform to the cars.
• Audi
• GM
• Google
...
Wearables
Android Wear SDK
Google Glass
Hard Work Ahead
Image 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, -larg...
Best Matching Resource Wins
1. res/values/strings.xml
2. res/values-en-rUS/strings.xml
3. res/values-large/strings.xml
4. ...
Best Matching Resource Wins
1. res/values/strings.xml
2. res/values-en-rUS/strings.xml
3. res/values-large/strings.xml
4. ...
Image Resources
• Use the different qualifiers for the screen pixel
density (mdpi, hdpi, etc.)
• If you are forced to use ...
Classifications for Layouts
Platform version at least v13 (Honeycomb
MR2)
Classifications for Layouts
Platform version at least v13 (Honeycomb
MR2)
project-folder/res/
layout/
Classifications for Layouts
Platform version at least v13 (Honeycomb
MR2)
project-folder/res/
layout/  small phones
Classifications for Layouts
Platform version at least v13 (Honeycomb
MR2)
project-folder/res/
layout/  small phones
layou...
Classifications for Layouts
Platform version at least v13 (Honeycomb
MR2)
project-folder/res/
layout/  small phones
layou...
Classifications for Layouts
Platform version at least v13 (Honeycomb
MR2)
project-folder/res/
layout/  small phones
layou...
Platform version lower v11
project-folder/res/
layout/
layout-sw320dp/  other phones
layout-sw600dp/  tablets 7”
layout-...
Platform version lower v11
project-folder/res/
layout/  phones
layout-sw320dp/  other phones
layout-sw600dp/  tablets 7...
Platform version lower v11
project-folder/res/
layout/  phones
layout-v11/  tablets 10”
layout-sw320dp/  other phones
l...
Platform version lower v11
project-folder/res/
layout/  phones
layout-v11/  tablets 10”
layout-v13/  small phones
layou...
Hint
The smallest width qualifier gets
automatically platform version ”-v13”
through the packager, for avoiding
problems w...
How to Classify In Code
• Read configuration from the device
How to Classify In Code
• Read configuration from the device
• Smarter approach is to use boolean
resources
project-folder/res/values/layouts.xml
<resources>
</resources>
project-folder/res/values/layouts.xml
<resources>
<bool > </bool>
</resources>
project-folder/res/values/layouts.xml
<resources>
<bool name="is_phone_small"> </bool>
</resources>
project-folder/res/values/layouts.xml
<resources>
<bool name="is_phone_small">true</bool>
</resources>
project-folder/res/values/layouts.xml
<resources>
<bool name="is_phone_small">true</bool>
<bool name="is_phone_other">fals...
project-folder/res/values/layouts.xml
<resources>
<bool name="is_phone_small">true</bool>
<bool name="is_phone_other">fals...
Current Layout File Structure
project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
layout-sw320dp/m...
Current Layout File Structure
project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
layout-sw320dp/m...
Current Layout File Structure
project-folder/res/
layout/main.xml
layout-v11/main.xml
layout-v13/main.xml
layout-sw320dp/m...
Resource Alias
Put your layout files in the default folder.
project-folder/res/
layout/main_phone_small.xml
layout/main_ph...
Create an item with the needed
classification in the previously defined
values folder.
project-folder/res/values-sw720dp/l...
Create an item with the needed
classification in the previously defined
values folder.
project-folder/res/values-sw720dp/l...
Create an item with the needed
classification in the previously defined
values folder.
project-folder/res/values-sw720dp/l...
Create an item with the needed
classification in the previously defined
values folder.
project-folder/res/values-sw720dp/l...
Scenario
Use <includes>
Usage include
<LinearLayout … >
…
< />
…
</LinearLayout>
Usage include
<LinearLayout … >
…
<include />
…
</LinearLayout>
Usage include
<LinearLayout … >
…
<include layout="@layout/footer"/>
…
</LinearLayout>
Use <includes>
Use <includes>
Custom View
public class CustomView extends LinearLayout {
…
public CustomView(Context context, AttributeSet attrs) {
…
ad...
Usage In Layout Files
<LinearLayout … >
…
<de.alosdev.CustomView
android:layout_width="wrap_content"
android:layout_height...
Use <includes>
Create custom view
Custom XML Attribute
<resources>
<resources>
Custom XML Attribute
<resources>
<declare-styleable >
</declare-styleable>
<resources>
Custom XML Attribute
<resources>
<declare-styleable name=”CustomView">
</declare-styleable>
<resources>
Custom XML Attribute
<resources>
<declare-styleable name=”CustomView">
<attr />
</declare-styleable>
<resources>
Custom XML Attribute
<resources>
<declare-styleable name=”CustomView">
<attr name="label" />
</declare-styleable>
<resourc...
Custom XML Attribute
<resources>
<declare-styleable name=”CustomView">
<attr name="label" format="reference|string"/>
</de...
Custom XML Attribute
<resources>
<declare-styleable name=”CustomView">
<attr name="label" format="reference|string"/>
<att...
Custom XML Attribute
<resources>
<declare-styleable name=”CustomView">
<attr name="label" format="reference|string"/>
<att...
Usage In Layout Files
1. Add to root XML node
xmlns:app="http://schemas.android.com/apk/res-
auto"
Usage In Layout Files
1. Add to root XML node
xmlns:app="http://schemas.android.com/apk/res-
auto"
2. Usage in custom view...
public class CustomView extends LinearLayout {
static final int[] ORIENTATION = new int[] {
HORIZONTAL, VERTICAL };
public...
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 ma...
If you support both orientations, save the instance
state while orientation changes for more
responsiveness
Especially fo...
Developer Hints
• You can start an activity for result from a
fragment, so the response can be handled in the
fragment.
• ...
If you get a BadParcelableException with the cause
ClassNotFound-Exception, the source can be a
NullPointerException durin...
If you want to use “match_parent” or “wrap_content”
in a dimension alias, you should use “-1px” or “-2px”
project-folder/r...
Listener Hell
If you have to many listeners or you think the
programming model is old school like the “goto
statements”. G...
Custom Theme & Style
Android Ui Utils
ActionBar Style Generator
Holo Color Generator
Mission Accomplished?
Image source:
http://www.flickr.com/photos/ianaberle/5729561934/
Mission Accomplished
Image source:
http://www.flickr.com/photos/ianaberle/5729561934/
Q & A
Image source:
http://www.flickr.com/photos/21496790@N06/5065834411/
www.immobilienscout24.dewww.immobilienscout24.de
Thanks for your attention!
Contact:
+HasanHosgel
@alosdev
alosdev
Best Pr...
Mtc spring 2014 best practices to develop for different android device classifications
Mtc spring 2014 best practices to develop for different android device classifications
Mtc spring 2014 best practices to develop for different android device classifications
Upcoming SlideShare
Loading in …5
×

Mtc spring 2014 best practices to develop for different android device classifications

432 views

Published on

Here you can experience the learnings, which the presenter got during development of the ImmobilienScout24 Android application. The presentation doesn't cover Design, UX or Fragments, but it gives an introduction and samples of using different resources, in special layouts. These folders can be used for filtering specific configurations, referencing other resources and using layout aliases. This session aims at people with knowledge of coding for Android.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mtc spring 2014 best practices to develop for different android device classifications

  1. 1. Hasan Hosgel | ImmobilienScout24 Best Practices to develop for different Android Device Classifications
  2. 2. About me • +HasanHosgel @alosdev alosdev hosgel CO-Organizer Developer
  3. 3. 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
  4. 4. Fragmentation
  5. 5. Fragmentation > 5000 Android Devices
  6. 6. Here comes the Nightmare Image source: http://www.flickr.com/photos/boogeyman13/4553188509/
  7. 7. Image source: http://www.flickr.com/photos/boogeyman13/4553188509/ Here comes the Nightmare For developers
  8. 8. Let’s build the fundament Image source: http://www.flickr.com/photos/hertenberger/1434191066/
  9. 9. Device Classification Image source: https://play.google.com/store/devices
  10. 10. Image source: https://play.google.com/store/devices http://www.htc.com
  11. 11. Image source: http://www.sony.de/hub/google-tv
  12. 12. Image source: https://developer.ford.com/
  13. 13. Open Automotive Alliance Starting 2014 several companies plan to bring Android platform to the cars. • Audi • GM • Google • Honda • Hyundai • Nvidia http://www.openautoalliance.net/
  14. 14. Wearables
  15. 15. Android Wear SDK
  16. 16. Google Glass
  17. 17. Hard Work Ahead Image source: http://www.flickr.com/photos/16210667@N02/9172895225
  18. 18. Resource Folders You can use several qualifiers in the resource folders name for serving the best matching resource.
  19. 19. Qualifiers • Language (-en) • Language & Region (-en-rUS) • Smallest Width (–sw600dp) • Screensize (-small, -normal, -large) • Screen Orientation (-port, -land) • Screen Pixel Densitiy (-hdpi, -xxhdpi,…) • Platform Version (-v11, -v13)
  20. 20. Best Matching Resource Wins 1. res/values/strings.xml 2. res/values-en-rUS/strings.xml 3. res/values-large/strings.xml 4. res/values-sw600dp/strings.xml
  21. 21. Best Matching Resource Wins 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.
  22. 22. Image 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)
  23. 23. Classifications for Layouts Platform version at least v13 (Honeycomb MR2)
  24. 24. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/
  25. 25. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/  small phones
  26. 26. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/  small phones layout-sw320dp/  other phones
  27. 27. Classifications for Layouts Platform version at least v13 (Honeycomb MR2) project-folder/res/ layout/  small phones layout-sw320dp/  other phones layout-sw600dp/  tablets 7”
  28. 28. Classifications for Layouts Platform version at least v13 (Honeycomb 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
  29. 29. Platform version lower v11 project-folder/res/ layout/ layout-sw320dp/  other phones layout-sw600dp/  tablets 7” layout-sw720dp/  tablets 10”
  30. 30. Platform version lower v11 project-folder/res/ layout/  phones layout-sw320dp/  other phones layout-sw600dp/  tablets 7” layout-sw720dp/  tablets 10”
  31. 31. Platform version lower v11 project-folder/res/ layout/  phones layout-v11/  tablets 10” layout-sw320dp/  other phones layout-sw600dp/  tablets 7” layout-sw720dp/  tablets 10”
  32. 32. Platform version lower v11 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”
  33. 33. Hint The smallest width qualifier gets automatically platform version ”-v13” through the packager, for avoiding problems with the number of matching qualifiers.
  34. 34. How to Classify In Code • Read configuration from the device
  35. 35. How to Classify In Code • Read configuration from the device • Smarter approach is to use boolean resources
  36. 36. project-folder/res/values/layouts.xml <resources> </resources>
  37. 37. project-folder/res/values/layouts.xml <resources> <bool > </bool> </resources>
  38. 38. project-folder/res/values/layouts.xml <resources> <bool name="is_phone_small"> </bool> </resources>
  39. 39. project-folder/res/values/layouts.xml <resources> <bool name="is_phone_small">true</bool> </resources>
  40. 40. 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>
  41. 41. 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)
  42. 42. Current Layout File Structure project-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
  43. 43. Current Layout File Structure project-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.
  44. 44. Current Layout File Structure project-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
  45. 45. 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
  46. 46. Create an item with the needed classification in the previously defined values folder. project-folder/res/values-sw720dp/layouts.xml <resources> </resources>
  47. 47. 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>
  48. 48. 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>
  49. 49. 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>
  50. 50. Scenario
  51. 51. Use <includes>
  52. 52. Usage include <LinearLayout … > … < /> … </LinearLayout>
  53. 53. Usage include <LinearLayout … > … <include /> … </LinearLayout>
  54. 54. Usage include <LinearLayout … > … <include layout="@layout/footer"/> … </LinearLayout>
  55. 55. Use <includes>
  56. 56. Use <includes>
  57. 57. 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); } } … }
  58. 58. Usage In Layout Files <LinearLayout … > … <de.alosdev.CustomView android:layout_width="wrap_content" android:layout_height="wrap_content"/> … </LinearLayout>
  59. 59. Use <includes> Create custom view
  60. 60. Custom XML Attribute <resources> <resources>
  61. 61. Custom XML Attribute <resources> <declare-styleable > </declare-styleable> <resources>
  62. 62. Custom XML Attribute <resources> <declare-styleable name=”CustomView"> </declare-styleable> <resources>
  63. 63. Custom XML Attribute <resources> <declare-styleable name=”CustomView"> <attr /> </declare-styleable> <resources>
  64. 64. Custom XML Attribute <resources> <declare-styleable name=”CustomView"> <attr name="label" /> </declare-styleable> <resources>
  65. 65. Custom XML Attribute <resources> <declare-styleable name=”CustomView"> <attr name="label" format="reference|string"/> </declare-styleable> <resources>
  66. 66. Custom XML Attribute <resources> <declare-styleable name=”CustomView"> <attr name="label" format="reference|string"/> <attr name="value" format="reference|string"/> </declare-styleable> <resources>
  67. 67. Custom XML Attribute <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>
  68. 68. Usage In Layout Files 1. Add to root XML node xmlns:app="http://schemas.android.com/apk/res- auto"
  69. 69. Usage In Layout Files 1. Add to root XML node xmlns: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" />
  70. 70. 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(); } } … }
  71. 71. If custom view has much more business logic and need lifecycles  Create a Fragment
  72. 72. Code
  73. 73. 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
  74. 74. 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
  75. 75. 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)
  76. 76. 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.
  77. 77. If you want to use “match_parent” or “wrap_content” in a dimension alias, you should use “-1px” or “-2px” project-folder/res/values/dimen.xml <resources> <dimen name="my_dimen>@dimen/match_parent</dimen> <dimen name="match_parent">-1px</dimen> <dimen name="wrap_content">-2px</dimen> </resources> project-folder/res/values-sw600dp/layout.xml <resources> <dimen name="my_dimen>300dp</dimen> </resources>
  78. 78. 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
  79. 79. Custom Theme & Style Android Ui Utils
  80. 80. ActionBar Style Generator
  81. 81. Holo Color Generator
  82. 82. Mission Accomplished? Image source: http://www.flickr.com/photos/ianaberle/5729561934/
  83. 83. Mission Accomplished Image source: http://www.flickr.com/photos/ianaberle/5729561934/
  84. 84. Q & A Image source: http://www.flickr.com/photos/21496790@N06/5065834411/
  85. 85. www.immobilienscout24.dewww.immobilienscout24.de Thanks for your attention! Contact: +HasanHosgel @alosdev alosdev Best Practices to develop for different Android Device Classifications https://github.com/alosdev/multidevice-nightmare-demo http://www.slideshare.net/hosgel/mtc-spring-2014-best-practices-to-develop-for-different- android-device-classifications

×