Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Facing the challenges of responsiveness aka Customize your View

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.

D2a06312762581d504ba0a25e5a90def?s=128

Benjamin Weiss

October 24, 2013
Tweet

More Decks by Benjamin Weiss

Other Decks in Technology

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