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

Android Design Support Library

34a7272669c68806ab1f5055a3ec444d?s=47 Vasya
November 08, 2015

Android Design Support Library

Android Design Support Library.
Overview of current state and usage recommendations.

You can find project here: https://github.com/krossovochkin/AndroidDesignSupportLibrarySample

34a7272669c68806ab1f5055a3ec444d?s=128

Vasya

November 08, 2015
Tweet

Transcript

  1. ANDROID DESIGN SUPPORT LIBRARY Overview of current state and usage

    recommendataions October 28, 2015 Vasya Drobushkov
  2. HISTORY • Google I/O 2014 – Material design concept was

    introduced • AppCompat-v7 library (with AppCompat theme and Toolbar widget) was released (also recycler-view, card-view, pallete support libraries were released) • Google I/O 2015 – Android Design Support library was released
  3. ANDROID DESIGN SUPPORT LIBRARY • Components to easier build Material

    applications • Compatible to API 7 (but actually 15 and even 16 is recommended) • To be used with appcompat library
  4. INSTALLATION Add to your project build.gradle file

  5. NAVIGATION VIEW

  6. NAVIGATION VIEW Represents a standard navigation menu for application. Features:

    • Selectable/clickable items • Icons • Paddings • Fonts • Header layout • Subtitles Design Specs: http://goo.gl/5wFoPO
  7. NAVIGATION VIEW The menu contents can be populated by a

    menu resource file. R.menu.drawer_menu drawer_menu.xml To create Divider one should have two groups with different ids.
  8. NAVIGATION VIEW Add to activity/fragment layout file:

  9. NAVIGATION VIEW Add listeners:

  10. NAVIGATION VIEW How to customize Create action_layout.xml

  11. NAVIGATION VIEW Add layout to menu item as app:actionLayout

  12. NAVIGATION VIEW Set listeners, change texts etc. MenuItemCompat#getActionView

  13. TEXT INPUT LAYOUT

  14. TEXT INPUT LAYOUT Layout which wraps an EditText to show

    floating label when the hint is hidden due to user inputting text. TextInputLayout extends LinearLayout. Design Specs: http://goo.gl/Ltv8JQ
  15. TEXT INPUT LAYOUT • Code Example

  16. TEXT INPUT LAYOUT Errors textInputLayout#setError (NOT editText#setError !!)

  17. TEXT INPUT LAYOUT Char Counters

  18. FLOATING ACTION BUTTON

  19. FLOATING ACTION BUTTON • Floating action buttons are used for

    a promoted action. • FAB extends ImageView. • Default background color is colorAccent. • Two sizes: (Default 56dp, Small 40dp) • Button-like interface Design Specs: http://goo.gl/NFCJ35
  20. FLOATING ACTION BUTTON • Code Example

  21. SNACKBAR

  22. SNACKBAR • Use instead of Toast (has toast- like interface)

    • View is used instead of Context • Can have action (retry, undo etc.) • Can be dismissed by swipe • Show time: LENGTH_SHORT, LENGTH_LONG, LENGTH_INDEFINITE • Might be difficult to use in nested fragments Design Specs: http://goo.gl/oQjwgO
  23. SNACKBAR • Code Example

  24. TAB LAYOUT

  25. TAB LAYOUT Horizontal layout to display tabs. • Binding to

    ViewPager • Manually created tabs • Scrollable/Fixed tabs Design Specs: http://goo.gl/dIHEf6
  26. TAB LAYOUT • Integration with ViewPager, Fixed tabs

  27. TAB LAYOUT • Integration with ViewPager, Scrollable tabs

  28. TAB LAYOUT • Manually created tabs

  29. TAB LAYOUT Listeners Before: tabStrip#setOnPageChangeListener viewPager#addOnPageChangeListener

  30. TAB LAYOUT Listeners Now: viewPager#addOnPageChangeListener Use tabLayout#setOnTabSelectedListener carefully. It has

    its own implementation when using with ViewPager
  31. APP BAR LAYOUT

  32. APP BAR LAYOUT AppBarLayout extends LinearLayout Style for TabLayout is

    applied automatically
  33. COORDINATOR LAYOUT

  34. COORDINATOR LAYOUT • CoordinatorLayout is super-powered FrameLayout © • Container

    for specific interaction with one or more child views (BEHAVIOR) • Anchor Views to other Coordinator layout’s children
  35. COORDINATOR LAYOUT AND FAB • No extra code required!

  36. COORDINATOR LAYOUT AND FAB • Code Example

  37. COORDINATOR LAYOUT AND APP BAR CoordinatorLayout app:layout_behavior @string/appbar_scrolling_view_behavior Design Specs:

    http://goo.gl/AYvtRI
  38. COORDINATOR LAYOUT AND APP BAR

  39. COORDINATOR LAYOUT AND APP BAR AppBarLayout app:layout_scrollFlags scroll

  40. COORDINATOR LAYOUT AND APP BAR AppBarLayout app:layout_scrollFlags scroll|enterAlways

  41. COORDINATOR LAYOUT AND APP BAR AppBarLayout app:layout_scrollFlags scroll|enterAlways|snap

  42. COORDINATOR LAYOUT Scrolling behavior is available when using: • Recycler

    View • NestedScrollView (extends FrameLayout) • ViewPager with RecyclerView or NestedScrollView • View (API 21+) view#setNestedScrollingEnabled(Boolean) Otherwise you have to implement required callbacks by yourself!
  43. COORDINATOR LAYOUT • Anchoring

  44. COORDINATOR LAYOUT • Custom Behavior

  45. COORDINATOR LAYOUT • Custom Behavior

  46. COORDINATOR LAYOUT • Custom Behavior

  47. COORDINATOR LAYOUT • Custom Behavior. Result

  48. COORDINATOR LAYOUT Scroll Aware FAB Behavior More difficult example by

    Ian Lake https://goo.gl/GJUnfM (show/hide FAB on list scroll)
  49. COLLAPSING TOOLBAR LAYOUT

  50. COLLAPSING TOOLBAR LAYOUT Collapsing Toolbar Layout is a wrapper for

    Toolbar. Features • Collapsing title • Content/Status bar scrim • Parallax scrolling
  51. COLLAPSING TOOLBAR LAYOUT • Code Example

  52. COLLAPSING TOOLBAR LAYOUT AppBarLayout app:layout_scrollFlags scroll

  53. COLLAPSING TOOLBAR LAYOUT AppBarLayout app:layout_scrollFlags scroll|exitUntilCollapsed

  54. COLLAPSING TOOLBAR LAYOUT AppBarLayout app:layout_scrollFlags scroll|enterAlways|enterAlwaysCollapsed

  55. COLLAPSING TOOLBAR LAYOUT AppBarLayout app:layout_scrollFlags ISSUE scroll|enterAlways|enterAlwaysCollapsed Look at the

    arrow
  56. COLLAPSING TOOLBAR LAYOUT • Attributes Overview

  57. COLLAPSING TOOLBAR LAYOUT Limitation Has no subtitle, only title Feature

    Tricky title setting
  58. COLLAPSING TOOLBAR LAYOUT Collapsing Toolbar Layout • extends FrameLayout •

    contains Toolbar • contains ImageView Overdraw?
  59. COLLAPSING TOOLBAR LAYOUT White text on white image Problem with

    font on white image in toolbar layout Look here when text goes through it
  60. COLLAPSING TOOLBAR LAYOUT • Text protection (scrims) Design Specs: https://goo.gl/d3c71N

    Implementation: http:// stackoverflow.com/a/318 38291/1533933
  61. COLLAPSING TOOLBAR LAYOUT Think about overdraw. Use transparency carefully!

  62. COLLAPSING TOOLBAR LAYOUT Issues Scrolling to top from collapsed, doesn’t

    expand toolbar, overflow is shown Not responsive scrolling on fling (http:// stackoverflow.com/a/32454407/1533933, https://goo.gl/oEYnKj)
  63. CONCLUSION

  64. CONCLUSION

  65. CONCLUSION What to do • Use “AS IS”. Wait for

    update and fixes. • Do not use. Wait for update and fixes. • Use third party libraries https://android-arsenal.com/ • Fix bugs by yourself https://android.googlesource.com/platform/frameworks/support/ https://android.googlesource.com/platform/frameworks/support/+/master/design/ • Create everything by yourself
  66. THANK YOU!

  67. REFERENCES • Sample app: https://github.com/chrisbanes/cheesesquare • CodeLabs Tutorial http://www.code-labs.io/codelabs/material-design-style/index.html#0 •

    Blog post: http:// android-developers.blogspot.com.by/2015/05/android-design-support-library.html • Blog post about 23.1.0: http:// android-developers.blogspot.com.by/2015/10/android-support-library-231.html?linkId=17977963 • Docs, package summary: http:// developer.android.com/reference/android/support/design/widget/package-summary.html • Release Notes: https://developer.android.com/tools/support-library/index.html • Issue tracker: https:// code.google.com/p/android/issues/list?can=2&q=android+design+support+library&colspec=ID +Type+Status+Owner+Summary+Stars&cells=tiles • Material Design Specs: https://www.google.com/design/spec/material-design/introduction.html • Text Protection: https:// www.google.com/design/spec/style/imagery.html#imagery-ui-integration • ListView scrolling behavior: http://stackoverflow.com/q/30612453/1533933 • CollapsingToolbarLayout bug on fling: http://stackoverflow.com/a/32454407/1533933