Responsive mobile design in practice
34 likes13,461 views
The document discusses responsive mobile design and minimizing the pain of developing for multiple form factors. It advocates building reusable UI components as "blocks" that can be combined and arranged differently depending on context. These blocks would contain a subset of data and handle their own layout and interactions independently of where they are used. This allows the same blocks to be reused on different screens or rearranged on a screen for different device sizes while keeping the underlying code unaware of layout context.
Responsive mobile design in practice
- 1. Responsive mobile design in practice Kirill Grouchnikov Android, Google Inc.
- 2. this talk is about minimizing the pain of developing for multiple form factors
- 3. device variety Experia Pro 3.7” Flyer 7” Sony Tablet S 9.4” Archos 2.8” Galaxy Note 5.2” Galaxy Tab 8.9” Toshiba Excite 13”
- 4. device orientation 1024*600 600*1024
- 5. adapting to the context
- 6. maps “show more” of the infinite canvas
- 7. settings combine two (or more) screens in a multi-pane layout
- 8. youtube (view) promote two tabs into the side panel
- 9. play store (details) rearrange content in two columns
- 11. same content, same hierarchy adapting to context
- 13. same content, same hierarchy adapting to context
- 14. minimizing the pain of developing for multiple form factors
- 15. same content, same hierarchy differently stacked “blocks”
- 17. summary screenshots description reviews more by developer links cross-sell flag content rate & review auto-update (apps) trailer (movies) song list (albums)
- 18. same blocks rearranged in two columns
- 20. same building block on the same screen on different form factors
- 21. same building block in different screens
- 23. res/layout/youtube_trailer_section.xml <com.my.package.YoutubeTrailerSection> <ImageView android:id=”@+id/thumbnail” android:background=”black” /> <ImageView android:id=”@+id/play_icon” android:src=”@drawable/ic_video_play” /> <TextView android:id=”@+id/duration” android:textColor=”#CCCCCC” android:background=”#4C000000” android:textSize=”@dimen/content_primary” /> </com.my.package.YoutubeTrailerSection>
- 24. public class YoutubeTrailerSection extends TheMostSuitableBaseLayout @Override onFinishInflate() bind(YoutubeTrailerData) @Override onMeasure() - if needed @Override onLayout() - if needed
- 25. <com.my.package.YoutubeTrailerSection> <ImageView android:id=”@+id/thumbnail” android:background=”black” /> <ImageView android:id=”@+id/play_icon” // ID not necessary if not used in code android:src=”@drawable/ic_video_play” /> <TextView android:id=”@+id/duration” android:textColor=”#CCCCCC” android:background=”#4C000000” android:textSize=”@dimen/content_primary” /> </com.my.package.YoutubeTrailerSection> private ImageView mThumbnail; private TextView mDuration; @Override protected void onFinishInflate() { super.onFinishInflate(); mThumbnail = (ImageView) findViewById(R.id.thumbnail); mDuration = (TextView) findViewById(R.id.duration); }
- 26. private ImageView mThumbnail; private TextView mDuration; @Override protected void onFinishInflate() { super.onFinishInflate(); mThumbnail = (ImageView) findViewById(R.id.thumbnail); mDuration = (TextView) findViewById(R.id.duration); } public void bind(YoutubeTrailerData data) { mDuration.setText(data.getFormattedLength()); String thumbnailUrl = data.getThumbnailUrl(); ImageUtils.load(mThumbnail, thumbnailUrl); // cache / network app code setOnClickListener(new View.OnClickListener() { public void onClick(View view) { Intent youtubeIntent = IntentUtils.createYoutubeIntent( data.getVideoUrl()); getContext().startActivity(youtubeIntent); } }); }
- 27. why so much trouble with a custom class?
- 28. encapsulation
- 29. <include layout=”@layout/youtube_trailer_section” /> YoutubeTrailerSection trailer = (YoutubeTrailerSection) findViewById (R.id.youtube_trailer_section); trailer.bind(model.getYoutubeTrailerData());
- 30. each block is binding a subset of the data no matter what the context is
- 31. <include android:id=”@+id/summary_section” layout=”@layout/details_summary” /> <include android:id=”@+id/screenshots_section” layout=”@layout/details_screenshots” /> <include android:id=”@+id/byline_section” layout=”@layout/details_byline” /> <include android:id=”@+id/plusone_section” layout=”@layout/details_plusone” /> <include android:id=”@+id/description_section” layout=”@layout/details_text” /> ...
- 32. ScreenshotsSection screenshots = (ScreenshotsSection) findViewById (R.id.screenshots_section); screenshots.bind(model.getScreenshotsData()); TextSection description = (TextSection) findViewById (R.id.description_section); description.bind(model.getDescriptionData()); * I can swear that some PMs seem to think that it’s really that simple
- 33. the main flow looks up a section and passes the relevant data subset
- 34. and each section handles its own data binding, events and layout tweaks
- 35. <include layout=”@layout/screenshots_section” /> ScreenshotsSection trailer = (ScreenshotsSection) findViewById (R.id.screenshots_section); trailer.bind(model.getScreenshotsData());
- 36. no knowledge of context, internal IDs or event handling
- 37. each block is a separate reusable layout
- 38. include include include include include include include include include include include include include include
- 39. it’s like combining Lego blocks* * except for the part where you’re stuck maintaining the code base
- 40. all I see is <include>s * he was kind of a douche, fell in love with the wrong girl and after that steak it really went downhill for him. YMMV.
- 41. the code doesn’t have to be aware what is the context
- 42. <include layout=”@layout/screenshots_section” /> ScreenshotsSection trailer = (ScreenshotsSection) findViewById (R.id.screenshots_section); trailer.bind(model.getScreenshotsData());
- 43. welcome to the real world
- 44. font size, column count, location of rating bar in cells
- 45. font size res/values/font-dimens.xml <dimen name="content_primary_size">16sp</dimen> res/values-sw800dp/font-dimens.xml <dimen name="content_primary_size">18sp</dimen> res/values/styles.xml <style name="DetailsPage_Header"> ... <item name=”android:textSize”>@dimen/content_primary_size</item> </style> res/layout/pack_header.xml <TextView android:id=”+id/header” style=”@style/DetailsPage_Header” ...
- 46. column count res/values/ints.xml <integer name="moreby_items_per_row">2</integer> res/values-sw800dp/ints.xml <integer name="moreby_items_per_row">1</integer> public class MoreBySection private int mColumnCount; public MoreBySection(Context ctx) { ... mColumnCount = ctx.getResources().getInteger( R.integer.moreby_items_per_row); }
- 47. cell layouts res/layout/item_cell.xml res/layout-sw800dp/item_cell.xml public class PackAdapter @Override public View getView(int pos, View convertView, ViewGroup parent) { if (convertView == null) { convertView = mLayoutInflater.inflate( R.layout.item_cell, parent, false); } CellViewHolder holder = (CellViewHolder) convertView.getTag(); ... return convertView; }
- 48. the code doesn’t have to be aware what is the context* * if you managed to confine the differences to resource files
- 49. not exactly the same blocks
- 50. context awareness “leaking” into the code
- 51. res/values/bools.xml <bool name="use_two_column_layout">false</bool> res/values-sw800dp/bools.xml <bool name="use_two_column_layout">true</bool>
- 52. public class BylineSection private boolean mIsTwoColumnMode; public BylineSection(Context ctx) { ... mIsTwoColumnMode = ctx.getResources().getBoolean( R.bool.use_two_column_layout); } public void bind() { if (mIsTwoColumnMode) { // add update date, download size and download count } else { // add rating count, update date, download size // and download count } }
- 53. reuse blocks on the same screen on different form factors
- 54. <include layout=”@layout/screenshots_section” /> ScreenshotsSection trailer = (ScreenshotsSection) findViewById (R.id.screenshots_section); trailer.bind(model.getScreenshotsData());
- 55. reuse blocks in different screens
- 60. <include layout=”@layout/youtube_trailer_section” /> YoutubeTrailerSection trailer = (YoutubeTrailerSection) findViewById (R.id.youtube_trailer_section); trailer.bind(model.getYoutubeTrailerData());
- 61. “my apps” screen
- 62. combine and share blocks
- 63. this talk was about minimizing the pain of developing for multiple form factors
- 64. building blocks •identify • encapsulate • reuse * almost made it through with no bullet points
- 65. Q&A • slideshare.net/kirillcool • pushing-pixels.org • +Kirill Grouchnikov • kirillcool@yahoo.com