Design Library

Slides of my presentation at the GDG Montreal Pos Google I/O Event about Design Library.

Transcript

1. Android Design Library +marcospaulosd @marcospaulosd
3. Why a design library? "Design is all about finding solutions within constraints; if there were no constraints, it's not design - it's art." Matias Duarte Design God @Google
4. Bring Material Design to Pre-Lollipop devices. Reference implementation of Material design. Encourage the adoption of Material. Simplify the implementation of motion coordination. Why a design library?
5. Components
6. Snackbar
7. Snackbar It inherits most of Toast methods.
8. Floating Action Button
9. Floating Action Button 56dp - Normal Size 40dp - Mini Size Customizable fabSize backgroundTint borderWidth rippleColor
10. EditText Floating Labels
11. EditText Floating Labels When an EditText has focus, the assigned hint will ‘float’ above the view to the top-left hand side
12. Navigation View
13. Navigation View Simpler and easier way to implement Navigation Drawer
14. Navigation View Simpler and easier way to implement Navigation Drawer Customizable itemBackground itemIconTint itemTextColor OnNavigationItemSelectedListener
15. TabLayout
16. TabLayout Provides a scrollable tab bar component for use in applications
17. TabLayout Provides a scrollable tab bar component for use in applications Attributes tabMode tabGravity setText setIcon
18. TabLayout Provides a scrollable tab bar component for use in applications Attributes tabMode tabGravity setText setIcon Listeners OnTabSelectedListener TabLayoutOnPageChangeListener
19. CoordinatorLayout
20. CoordinatorLayout
21. CoordinatorLayout The CoordinatorLayout builds on-top of the motion effects already provided by adding the ability to transition views based on the motion of others. Floating Action Button
22. CoordinatorLayout Floating Action Button
23. CoordinatorLayout Floating Action Button layoutAnchor layoutAnchorGravity
24. CoordinatorLayout Floating Action Button layoutAnchor layoutAnchorGravity
25. CoordinatorLayout Floating Action Button layoutAnchor layoutAnchorGravity
26. CoordinatorLayout
27. CoordinatorLayout App Bar Let us adapt our layouts based on different scroll events that may take place.
28. CoordinatorLayout layout_scrollFlags Used to declare wether views should scroll off screen or remain pinned at the top.
29. CoordinatorLayout enterAlways Collapses the toolbar, but keeps the tabs in view
30. CoordinatorLayout enterAlwaysCollapsed Collapses the toolbar completely, includes any ‘flexible space’ within the view
31. CoordinatorLayout exitUntilCollapsed Collapses the toolbars ‘flexible space’, but keeps the toolbar itself in view
32. CoordinatorLayout enterAlways
33. CoordinatorLayout enterAlways android.support.design.widget.AppBarLayout$ ScrollingViewBehavior
34. CoordinatorLayout enterAlways
35. CoordinatorLayout Toolbars CollapsingToolbarLayout allow us to collapse the toolbar as the user scrolls the screen content
36. CoordinatorLayout layout_collapseMode = Pin
37. CoordinatorLayout layout_collapseMode = Paralax
38. CoordinatorLayout Understanding Behavior CoordinatorLayout is important cause it looks for Views that have a behavior. You can set a behavior using app:layout_behavior or by using the annotation @DefaultBehavior in a Custom View
39. CoordinatorLayout Behavior methods public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) Verifies if it should dispatch the DependentViewChanged Called every time there is a change on the dependency
40. CoordinatorLayout Behavior methods - child View that will change based on another view. - dependency View that will trigger the behavior, it can be a NestedView, RecyclerView, ViewPager and some others.
41. CoordinatorLayout Floating Action Button Behavior The translate animation of the FAB when a snack bar appears and the shrink animation inside a AppBar when it collapses are part of FloatingActionButton Behavior
42. CoordinatorLayout Floating Action Button Behavior
43. CoordinatorLayout Floating Action Button Behavior
44. CoordinatorLayout Floating Action Button Behavior
45. CoordinatorLayout Creating a custom Behavior
46. CoordinatorLayout Creating a custom Behavior What if we want our FAB to hide when we scroll down and appear when we scroll up?
47. CoordinatorLayout Creating a custom Behavior
48. CoordinatorLayout Creating a custom Behavior
49. CoordinatorLayout Creating a custom Behavior
50. CoordinatorLayout Creating a custom Behavior
51. CoordinatorLayout Advantage over implementing it on a ScrollListener The code is unaware of who is scrolling. It can be a defaultBehavior for your app. Meaning every time you have a FAB inside a CoordinatorLayout, it will automatically hide. Cleaner code. Can be used for any view, not only for a FAB.
52. Android Design Library It’s time for Developers start caring more about UI and Design! https://plus.google.com/+IanLake/posts/haQL1mnTzaw tps://medium.com/ribot-labs/exploring-the-new-android-design-support-library-b7cda56d2c32 References:
53. Thank you!! +marcospaulosd @marcospaulosd