Facing the challenges of responsiveness aka Customize your View

Slide 1

Slide 1 text

Facing the challenges of responsiveness aka Customize your Views Benjamin Weiss

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Agenda •  The challenge •  Basic approach •  Facing the issues •  Advancing o  values o  aliases o  entry points o  customization Benjamin Weiss

Slide 4

Slide 4 text

The challenge Benjamin Weiss

Slide 5

Slide 5 text

The challenge Create a state of the art interface for an existing Android app. Benjamin Weiss

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Used devices Benjamin Weiss

Slide 8

Slide 8 text

Used devices Benjamin Weiss

Slide 9

Slide 9 text

Used devices Benjamin Weiss

Slide 10

Slide 10 text

Used devices Benjamin Weiss

Slide 11

Slide 11 text

Used devices Benjamin Weiss

Slide 12

Slide 12 text

Used devices Benjamin Weiss

Slide 13

Slide 13 text

Benjamin Weiss

Slide 14

Slide 14 text

Benjamin Weiss

Slide 15

Slide 15 text

Benjamin Weiss

Slide 16

Slide 16 text

Benjamin Weiss

Slide 17

Slide 17 text

Devices are growing Benjamin Weiss

Slide 18

Slide 18 text

General classiﬁcation Benjamin Weiss 2012

Slide 19

Slide 19 text

General classiﬁcation Benjamin Weiss

Slide 20

Slide 20 text

The documented way res/ layout/my_layout.xml layout-sw600dp/my_layout.xml layout-sw800dp/my_layout.xml Benjamin Weiss

Slide 21

Slide 21 text

The documented way res/ layout/my_layout.xml layout-sw600dp/my_layout.xml layout-sw800dp/my_layout.xml Benjamin Weiss

Slide 22

Slide 22 text

The documented way res/layout-sw600dp/somelayout.xml ... ... Benjamin Weiss

Slide 23

Slide 23 text

Benjamin Weiss

Slide 24

Slide 24 text

The issues • Redundant code • Decreased maintainability Benjamin Weiss

Slide 25

Slide 25 text

Benjamin Weiss

Slide 26

Slide 26 text

Use values res/ values/config.xml values-sw600dp/config.xml values-sw800dp/config.xml layout/my_layout.xml Benjamin Weiss

Slide 27

Slide 27 text

Use values res/values/config.xml true false false Benjamin Weiss

Slide 28

Slide 28 text

Use values res/values-sw600dp/config.xml false true Benjamin Weiss

Slide 29

Slide 29 text

Use values res/values-sw600dp/config.xml FILE NOT FOUND! Benjamin Weiss

Slide 30

Slide 30 text

Use values res/values-sw800dp/config.xml false true Benjamin Weiss

Slide 31

Slide 31 text

Use values getResources(). getBoolean(R.bool.is_phone); Benjamin Weiss

Slide 32

Slide 32 text

Use values getResources(). getBoolean(R.bool.is_sw600dp); Benjamin Weiss

Slide 33

Slide 33 text

Use values getResources(). getBoolean(R.bool.is_sw800dp); Benjamin Weiss

Slide 34

Slide 34 text

Benjamin Weiss

Slide 35

Slide 35 text

Entry point based on device conﬁg 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

Slide 36

Slide 36 text

Layouts based on device conﬁg Benjamin Weiss

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Adjusting orientation public class AttributeView extends LinearLayout { public AttributeView(...) { ... setOrientation(isPhone ? HORIZONTAL : VERTICAL); ... } } Benjamin Weiss

Slide 39

Slide 39 text

GridView columns @Override public void onViewCreated(...) { ... gridView.setNumColumns(isSmartphone ? 1 : 2); ... } Benjamin Weiss

Slide 40

Slide 40 text

my_layout_phone aka my_layout Benjamin Weiss

Slide 41

Slide 41 text

Use aliases res/values/config.xml @layout/my_layout_phone Benjamin Weiss

Slide 42

Slide 42 text

Use aliases res/values-sw800dp/config.xml @layout/my_layout_sw800 Benjamin Weiss

Slide 43

Slide 43 text

And reference them public class MyFragment extends Fragment { ... @Override public View onCreateView(...) { return inflater.inflate(R.layout.my_layout, null); } Benjamin Weiss

Slide 44

Slide 44 text

And reference them public class MyFragment extends Fragment { ... @Override public View onCreateView(...) { return inflater.inflate(R.layout.my_layout, null); } Benjamin Weiss

Slide 45

Slide 45 text

Did you do something like this? Benjamin Weiss

Slide 46

Slide 46 text

Roll your own public final class Separator extends View { ... } Benjamin Weiss

Slide 47

Slide 47 text

Roll your own public final class Separator extends View { ... } Single point of concern Benjamin Weiss

Slide 48

Slide 48 text

Roll your own public final class Separator extends View { ... } Can also be instantiated from code Benjamin Weiss

Slide 49

Slide 49 text

Reuse existing attributes Benjamin Weiss

Slide 50

Slide 50 text

Reuse existing attributes Benjamin Weiss

Slide 51

Slide 51 text

Some food for thought Benjamin Weiss

Slide 52

Slide 52 text

Don’t be mindless Benjamin Weiss

Slide 53

Slide 53 text

Don’t be mindless Keep the complexity low Create base layouts Reuse layouts if possible Use common names Think of future generations Benjamin Weiss

Slide 54

Slide 54 text

Keep these in mind Benjamin Weiss

Slide 55

Slide 55 text

Keep these in mind Benjamin Weiss

Slide 56

Slide 56 text

Think carefully Benjamin Weiss

Slide 57

Slide 57 text

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