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

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