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

Transcript

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 @RittmeyerW
12. Use Layer to animate all children @RittmeyerW
13. Use Layer to animate all children @RittmeyerW
14. Decorators • Lava • Bottom Panel @RittmeyerW
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
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
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
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