Facing the challenges of responsiveness aka Customize your View

Tired of writing multiple layout.xmls for different screen densities? There are alternatives.

You’ll learn how customizing Views can help easing development of responsive apps. Gain knowledge on when and how to write custom views. Learn how to get rid of includes, merges, code duplication and other nasty things.

Transcript

1. Facing the challenges of responsiveness aka Customize your Views Benjamin Weiss
2. Benjamin Weiss http://gplus.to/keyboardsurfer Twitter: @keyboardsurfer Senior Software Developer at ImmobilienScout24 Organizer: GDG Android in Berlin Author of Crouton Co-Organizer of many Android events
3. Agenda •  The challenge •  Basic approach •  Facing the issues •  Advancing o  values o  aliases o  entry points o  customization Benjamin Weiss
4. The challenge Benjamin Weiss
5. The challenge Create a state of the art interface for an existing Android app. Benjamin Weiss
6. The challenge Create a state of the art interface for an existing Android app. Oh, and it should also be look and feel good on different device categories. Benjamin Weiss
7. Used devices Benjamin Weiss
8. Used devices Benjamin Weiss
9. Used devices Benjamin Weiss
10. Used devices Benjamin Weiss
11. Used devices Benjamin Weiss
12. Used devices Benjamin Weiss
13. Benjamin Weiss
14. Benjamin Weiss
15. Benjamin Weiss
16. Benjamin Weiss
17. Devices are growing Benjamin Weiss
18. General classification Benjamin Weiss 2012
19. General classification Benjamin Weiss
20. The documented way res/ layout/my_layout.xml layout-sw600dp/my_layout.xml layout-sw800dp/my_layout.xml Benjamin Weiss
21. The documented way res/ layout/my_layout.xml layout-sw600dp/my_layout.xml layout-sw800dp/my_layout.xml Benjamin Weiss
22. The documented way res/layout-sw600dp/somelayout.xml <LinearLayout ...> ... <include layout="@layout/my_layout" ... /> ... </LinearLayout> Benjamin Weiss
23. Benjamin Weiss
24. The issues • Redundant code • Decreased maintainability Benjamin Weiss
25. Benjamin Weiss
26. Use values res/ values/config.xml values-sw600dp/config.xml values-sw800dp/config.xml layout/my_layout.xml Benjamin Weiss
27. Use values res/values/config.xml <resources> <item name=”is_phone” type=”bool”>true</item> <item name=”is_sw600dp” type=”bool”>false</item> <item name=”is_sw800dp” type=”bool”>false</item> </resources> Benjamin Weiss
28. Use values res/values-sw600dp/config.xml <resources> <item name=”is_phone” type=”bool”>false</item> <item name=”is_sw600dp” type=”bool”>true</item> </resources> Benjamin Weiss
29. Use values res/values-sw600dp/config.xml FILE NOT FOUND! Benjamin Weiss
30. Use values res/values-sw800dp/config.xml <resources> <item name=”is_phone” type=”bool”>false</item> <item name=”is_sw800dp” type=”bool”>true</item> </resources> Benjamin Weiss
31. Use values getResources(). getBoolean(R.bool.is_phone); Benjamin Weiss
32. Use values getResources(). getBoolean(R.bool.is_sw600dp); Benjamin Weiss
33. Use values getResources(). getBoolean(R.bool.is_sw800dp); Benjamin Weiss
34. Benjamin Weiss
35. Entry point based on device config final boolean isPhone = context.getResources() .getBoolean(R.bool.is_phone); final Class startClass; if (isPhone) { startClass = mypackage.phone.MyActivity.class; } else { startClass = mypackage.tablet.MyActivity.class; } Benjamin Weiss
36. Layouts based on device config Benjamin Weiss
37. Change menus from code @Override public void onCreateOptionsMenu(Menu menu) { ... MenuItem myItem = menu.findItem(R.id.my_item); if (!isPhone) { myItem.setShowAsActionFlags(SHOW_AS_ACTION_WITH_TEXT); } else { myItem.setShowAsActionFlags(SHOW_AS_ACTION_IF_ROOM); } ... } Benjamin Weiss
38. Adjusting orientation public class AttributeView extends LinearLayout { public AttributeView(...) { ... setOrientation(isPhone ? HORIZONTAL : VERTICAL); ... } } Benjamin Weiss
39. GridView columns @Override public void onViewCreated(...) { ... gridView.setNumColumns(isSmartphone ? 1 : 2); ... } Benjamin Weiss
40. my_layout_phone aka my_layout Benjamin Weiss
41. Use aliases res/values/config.xml <resources> <item name=”my_layout” type=”layout”> @layout/my_layout_phone </item> </resources> Benjamin Weiss
42. Use aliases res/values-sw800dp/config.xml <resources> <item name=”my_layout” type=”layout”> @layout/my_layout_sw800 </item> </resources> Benjamin Weiss
43. And reference them public class MyFragment extends Fragment { ... @Override public View onCreateView(...) { return inflater.inflate(R.layout.my_layout, null); } Benjamin Weiss
44. And reference them public class MyFragment extends Fragment { ... @Override public View onCreateView(...) { return inflater.inflate(R.layout.my_layout, null); } Benjamin Weiss
45. Did you do something like this? <View style="@style/separator_horizontal"/> <View style="@style/separator_vertical"/> Benjamin Weiss
46. Roll your own public final class Separator extends View { ... } Benjamin Weiss
47. Roll your own public final class Separator extends View { ... } Single point of concern Benjamin Weiss
48. Roll your own public final class Separator extends View { ... } Can also be instantiated from code Benjamin Weiss
49. Reuse existing attributes <declare-styleable name="Separator"> <attr name="android:orientation" /> </declare-styleable> Benjamin Weiss
50. Reuse existing attributes <declare-styleable name="Separator"> <attr name="android:orientation" /> </declare-styleable> Benjamin Weiss
51. Some food for thought Benjamin Weiss
52. Don’t be mindless Benjamin Weiss
53. Don’t be mindless Keep the complexity low Create base layouts Reuse layouts if possible Use common names Think of future generations Benjamin Weiss
54. Keep these in mind Benjamin Weiss
55. Keep these in mind Benjamin Weiss
56. Think carefully Benjamin Weiss
57. Links & Image Sources London from Space (http://goo.gl/E7BDHp) Tablet optimization (http://goo.gl/eMnoNb) Device art (http://goo.gl/jXjwrX) Device metrics(http://goo.gl/W7CDK9) First bug (http://goo.gl/NxuJKa) Underground (http://goo.gl/w7l6fb) Way out (http://goo.gl/g8kQsZ) This background (http://goo.gl/Q24R8a) Mind the Gap (http://goo.gl/dUpHbD) Benjamin Weiss
58. Questions Benjamin Weiss http://gplus.to/keyboardsurfer @keyboardsurfer
59. Benjamin Weiss