Deep Dive into Constraint Layout 2.0

Covered best practices of using ConstraintLayout on Android, particularly on Constraint layout 2.0 library.

Included topics
Getting started: What is Constraint layout?
Components such as Barriers, Chains, Guidelines, Constraint set, Groups
What is MotionLayout
Highlights of the key usages
Where to use MotionLayout
App examples

Transcript

1. Deep Dive into Anamika Tripathi @geekanamika
2. About session • Constraint Layout 1.x • Motion Editor • Motion Layout • Hands on : Motion Layout
3. Anamika Tripathi @geekanamika Android Developer @Zomato
5. Before Constraint Layout
6. Before Constraint Layout Building UI is Hard
7. The solution • Nested view hierarchy • Performance issues • Not flexible
10. Constraint Layout 1.x • Easy positioning view • Guidelines • Barriers • Chains • Bias • Image ratio
11. Constraint Layout 1.x • Easy positioning view • Guidelines • Barriers • Chains • Bias • Image ratio
12. Constraint Layout 1.x • Easy positioning view • Guidelines • Barriers • Chains • Bias • Image ratio
13. Constraint Layout 1.x • Easy positioning view • Guidelines • Barriers • Chains • Bias • Image ratio
14. Constraint Layout 1.x • Easy positioning view • Guidelines • Barriers • Chains • Bias • Image ratio
15. Constraint Layout 1.x • Easy positioning view • Guidelines • Barriers • Chains • Bias • Image ratio
16. Constraint Layout 1.x • Easy positioning view • Guidelines • Barriers • Chains • Bias • Image ratio
17. Constraint Layout 1.x • Easy positioning view • Guidelines • Barriers • Chains • Bias • Image ratio
18. Constraint Layout 1.x • Easy positioning view • Guidelines • Barriers • Chains • Bias • Image ratio
19. Constraint Layout 1.x • Easy positioning view • Guidelines • Barriers • Chains • Bias • Image ratio
20. Constraint Layout 1.x • Easy positioning view • Guidelines • Barriers • Chains • Bias • Image ratio
21. Motion Layout
24. How animation works?
25. Start End
26. What do we need?
27. What do we need? • Start Position • End position • Transition from start to end • Anything else?
28. What do we need?
31. How to use it?
32. Drawer Layout From Github
33. Drawer Layout From Github
34. Collapsible toolbar Coordinator layout From Github
35. Collapsible toolbar Coordinator layout From Github
36. Drawer Layout From Github
37. Drawer Layout From Github
38. View Pager From Github
39. View Pager From Github
40. Deep Dive into Motion Layout
41. layout/activity_main.xml
42. layout/activity_main.xml
43. Constraint Set
44. Constraint Set
45. Constraint Set
46. Constraint Set
47. Transition
48. Transition
49. Motion Editor
55. Creating icons
58. Motion concepts
59. Motion Concepts • Constraint sets • Transition • onSwipe/onClick • Keyframes • Coordinate system
60. Motion Concepts • Constraint sets • Transition • onSwipe/onClick • Keyframes • Coordinate system
61. Motion Concepts • Constraint sets • Transition • onSwipe/onClick • Keyframes • Coordinate system
62. Motion Concepts • Constraint sets • Transition • onSwipe/onClick • Keyframes • Coordinate system
63. Motion Concepts • Constraint sets • Transition • onSwipe/onClick • Keyframes • Coordinate system
64. KeyFrame
65. Key Frames • Key position • Key attribute • Key Cycle • Key TimeCycle
66. Key Frames • Key position • Key attribute • Key Cycle • Key TimeCycle
67. Key Frames • Key position • Key attribute • Key Cycle • Key TimeCycle
68. Key Position Type
69. Key Position Type
70. Key Position Type
72. Things to explore •Key Cycle •KeyTime cycle •Multi state transition •Key Trigger
73. Learning Resources Introduction to MotionLayout series https://medium.com/google-developers/introduction-to-motionlayout-part- i-29208674b10d Official Docs https://developer.android.com/reference/android/support/constraint/motion/ MotionLayout What’s new in ConstraintLayout https://www.youtube.com/watch?v=29gLA90m6Gk Official Samples on Github https://github.com/googlesamples/android-ConstraintLayoutExamples
74. Questions?