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

ConstraintLayout 2.0

ConstraintLayout 2.0

Talk about the already released and upcoming features of ConstraintLayout 2.0 held at the GDG Nuremberg Meetup (https://www.meetup.com/GDG-Nuremberg-Android/events/xsfbcpyxkbgb/).

The talk actually included some live coding and another demonstration in the emulator and in Android Studio. Alas, for obvious reasons, those cannot be uploaded :-)

An abbreviated version of the talk has also been given in Utrecht at the Dutch Android User Group's IO Extended Extended (https://www.meetup.com/dutch-aug/events/251987429/) on July, 19th 2018


Wolfram Rittmeyer

July 24, 2018


  1. ConstraintLayout 2.0

  2. ConstraintLayout 1.x

  3. ConstraintLayout 1.0 • Flat layout hierarchies were overarching aim •

    Allows you to design views by putting them into relation • match_constraint instead of match_parent • Support for aspect ratio constraints • Guidelines to helps you design screens @RittmeyerW
  4. ConstraintLayout 1.1 • Two helpers: – Barriers – Groups •

    Chains for grouping views • Introduction of ConstraintSet • Addition of percentage for width / height @RittmeyerW
  5. CL 1.x demo

  6. Google IO 2018 • Many announcements • Currently available: –

    Alpha version of CL 2.0 available – Some layout editor changes in AS https://www.youtube.com/watch?v=ytZteMo4ETk https://www.youtube.com/watch?v=WxAZk7A7OkM @RittmeyerW
  7. API

  8. Alpha version • Build.xml: • For now ties you to

    support lib 27.0.2 implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha1' @RittmeyerW
  9. ConstraintHelpers to manipulate views

  10. ConstraintHelpers to manipulate views • Get access to the list

    of views the manage • They are no ViewGroups – Views are referenced but not proper children • Help you to manipulate multiple views easily – e.g. animations • The ConstraintHelper class itself is not new – Was used in Barrier and Group before @RittmeyerW
  11. ConstraintHelper subclasses • Layer • Linear • Flow • CircularReveal

  12. Use Layer to animate all children @RittmeyerW

  13. Use Layer to animate all children @RittmeyerW

  14. Decorators • Lava • Bottom Panel @RittmeyerW

  15. None
  16. Fluent API for ConstraintSets • Idea is to make handling

    of ConstraintSets easier – Easily create ConstraintSet – Easily manipulate all attributes @RittmeyerW
  17. Fluent API for ConstraintSets @RittmeyerW

  18. Switch easily between diferent states • Define states with ConstraintLayoutStates

    • Use subelement State to refer to layouts • In your code set the state to use @RittmeyerW
  19. State handling

  20. State handling

  21. MotionLayout

  22. Other animation types still relevant • Property animations • Physics

    based animations • Animated Vector Drawables • CoordinatorLayout • Transitions @RittmeyerW
  23. MotionLayout is about transitions • Define diferent states • Use

    handlers to transitions between those states • Use key frames to help guide the animation @RittmeyerW
  24. Old way was tedious @RittmeyerW

  25. No matter which style you used @RittmeyerW

  26. None
  27. Use MotionLayout to define elements • MotionLayout replaces ConstraintLayout •

    MotionLayout points to scene • All layout children must be present @RittmeyerW
  28. Use MotionLayout to define elements

  29. Use MotionScene for ConstraintSets • MotionScene contains ConstraintSets • Only

    add elements you want to animate @RittmeyerW
  30. Use MotionScene for ConstraintSets

  31. Specify the transition • Add a Transition element to your

    MotionScene • If necessary add a touch handler – OnClick – OnSwipe @RittmeyerW
  32. Specify the transition @RittmeyerW

  33. None
  34. Specify the trigger for the transition • If necessary add

    a touch handler – OnClick – OnSwipe @RittmeyerW
  35. Specify the trigger for the transition @RittmeyerW

  36. Animate custom attributes • Animate not only layout attributes but

    also others • Types: – Boolean – Color – Dimension – Int / Float – String @RittmeyerW
  37. Animate custom attributes @RittmeyerW

  38. Add keyframes for special efects • If you want to

    move your layout along specified paths • You can specify when the frame should be applied @RittmeyerW
  39. Add keyframes for special efects @RittmeyerW

  40. Not everything is possible (yet?) • Currently only one transition

    • Touch handler reacts too generous • Image handling requires special subview • „left“ and „right“ instead of „start“ and „end“ • No drawables for custom attributes • Auto complete in XML not working (properly?) • Errors in XML are ignored @RittmeyerW
  41. Android Studio

  42. Nice helpers • Convert View (for Views and ViewGroups) •

    Navigation to included layout @RittmeyerW
  43. Use design time attributes for previews @RittmeyerW

  44. Create nicer list previews • List item layout (you were

    already able to do that) • No of items • Sample data – For images and text – Define your own in xml or as json – Use predefined ones @RittmeyerW
  45. Create nice previews with custom data @RittmeyerW

  46. None
  47. None
  48. Sample

  49. Links https://medium.com/google-developers/introduction-to-motionlayout-part-iii- 47cd64d51a5 http://androidkt.com/new-features-in-constraintlayout-2-0/ https://novemberfive.co/blog/what-to-expect-from-constraint-layout-2 https://github.com/googlesamples/android-ConstraintLayoutExamples @RittmeyerW

  50. None