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

Design Library

Design Library

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

More Decks by Marcos Paulo Souza Damasceno

Other Decks in Programming

Transcript

  1. Android Design Library +marcospaulosd @marcospaulosd

  2. None
  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