$30 off During Our Annual Pro Sale. View Details »

Android Design Support Library

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

Vasya

November 08, 2015
Tweet

More Decks by Vasya

Other Decks in Programming

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. 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
  5. 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.
  6. 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
  7. 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
  8. 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
  9. TAB LAYOUT Horizontal layout to display tabs. • Binding to

    ViewPager • Manually created tabs • Scrollable/Fixed tabs Design Specs: http://goo.gl/dIHEf6
  10. 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
  11. 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!
  12. COORDINATOR LAYOUT Scroll Aware FAB Behavior More difficult example by

    Ian Lake https://goo.gl/GJUnfM (show/hide FAB on list scroll)
  13. COLLAPSING TOOLBAR LAYOUT Collapsing Toolbar Layout is a wrapper for

    Toolbar. Features • Collapsing title • Content/Status bar scrim • Parallax scrolling
  14. COLLAPSING TOOLBAR LAYOUT White text on white image Problem with

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

    Implementation: http:// stackoverflow.com/a/318 38291/1533933
  16. 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)
  17. 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
  18. 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