ConstraintLayout 2.0 & MotionLayout

1. Efeturi Money, Careem @efemoney_ Location ConstraintLayout 2.0 & MotionLayout
2. ConstraintLayout So far... Location
3. ConstraintLayout so far... Relative positioning <Button android:id="@+id/buttonA" ... /> <Button android:id="@+id/buttonB" app:layout_constraintLeft_toRightOf="@+id/buttonA" ... />
4. ConstraintLayout so far... Relative positioning <Button android:id="@+id/buttonA" ... /> <Button android:id="@+id/buttonB" app:layout_constraintLeft_toRightOf="@+id/buttonA" ... /> app:layout_constraintBaseline_toBaselineOf Baseline Constraints FTW!
5. ConstraintLayout so far... Margin & ‘GONE’ View handling <Button android:id="@+id/buttonA" ... /> <Button android:id="@+id/buttonB" app:layout_constraintLeft_toRightOf="@+id/buttonA" app:layout_marginLeft="@dimen/button_margin" ... />
6. ConstraintLayout so far... Percent, Aspect Ratio and Min/Max constraints <Button android:id="@+id/buttonA" app:layout_constraintWidth_percent="0.25" ... /> <Button android:id="@+id/buttonB" app:layout_width="match_parent" app:layout_constraintDimensionRatio="W,16:9" ... />
7. ConstraintLayout so far... Chains <Button android:id="@+id/buttonA" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/buttonB" app:layout_constraintHorizontalChain="packed|spread|spread_inside" ... /> <Button android:id="@+id/buttonB" app:layout_constraintLeft_toRightOf="@+id/buttonA" app:layout_constraintRight_toRightOf="parent" ... />
8. ConstraintLayout so far... Chains
9. ConstraintLayout so far... Constraint Sets override fun onCreate(savedInstanceState: Bundle?) { ... val constraintSet1 = ConstraintSet() constraintSet1.clone(constraintLayout) val constraintSet2 = ConstraintSet() constraintSet2.clone(this, R.layout.layout_state_2) var changed = false findViewById(R.id.button).setOnClickListener { (if (changed) { constraintSet1 } else { constraintSet2 }).applyTo(constraintLayout) changed = !changed } } Change Constraints dynamically
10. ConstraintLayout so far... Constraint Sets Switch between AB test variants of your app in a single (sort of) line of code (if (userIsPartOfABTest) ratingsConstraints else noRatingConstraints).applyTo(constraintLayout)
11. ConstraintLayout so far... Constraint Sets override fun onCreate(savedInstanceState: Bundle?) { ... val constraintSet1 = ConstraintSet() constraintSet1.clone(constraintLayout) val constraintSet2 = ConstraintSet() constraintSet2.clone(this, R.layout.layout_state_2) var changed = false findViewById(R.id.button).setOnClickListener { TransitionManager.beginDelayedTransition(constraintLayout) (if (changed) { constraintSet1 } else { constraintSet2 }).applyTo(constraintLayout) changed = !changed } } Change Constraints dynamically
12. ConstraintLayout 1.1 Location
13. Guideline
14. Group Provides an easy way to hide or show a set of views directly in XML <android.support.constraint.Group android:id="@+id/group" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="visible" app:constraint_referenced_ids="button4,button9"/>
15. Barrier Creates a virtual guideline based on the most extreme widget on the specified side
16. ConstraintLayout 1.1 Circle Constraints <Button android:id="@+id/buttonA" ... /> <Button android:id="@+id/buttonB" app:layout_constraintCircle="@+id/buttonA" app:layout_constraintCircleRadius="100dp" app:layout_constraintCircleAngle="45" ... />
17. ConstraintLayout 2.0 Location
18. ConstraintLayout 2.0 ConstraintHelper
19. ConstraintLayout 2.0 ConstraintHelper: Quick Facts • Keep reference to existing views
20. ConstraintLayout 2.0 ConstraintHelper: Quick Facts • Keep reference to existing views • Views can be referenced by multiple Helpers
21. ConstraintLayout 2.0 ConstraintHelper: Quick Facts • Keep reference to existing views • Views can be referenced by multiple Helpers • Not ViewGroups - UI layout remains FLAT :)
22. ConstraintLayout 2.0 ConstraintHelper: Quick Facts • Keep reference to existing views • Views can be referenced by multiple Helpers • Not ViewGroups - UI layout remains FLAT :) • They are divided into 3 broad categories
23. ConstraintLayout 2.0 ConstraintHelper: 3 main categories of helpers Layout Manipulation Post-Layout Manipulation Rendering / Decorating aka VirtualLayout
24. VirtualLayout Linear Kind of like LinearLayout but as a ConstraintHelper Creates horizontal or virtual chains Location
25. <androidx.constraintlayout.widget.helper.Linear android:id="@+id/linear_helper" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:constraint_referenced_ids="button,button1,button2,button3" />
26. VirtualLayout Flow Implements FlexboxLayout-like semantics Overflow Views will be pushed to the next row Layout is stil FLAT :) Able to position outside elements relatives to ones in Flow Location
27. Post-Layout Manipulations Are able to act after Views have been laid out. Very useful for visibility animations/transitions. Also useful for Eg. FadeInHelper Location
28. Decorators Can draw anything based on the location, visibility etc of referenced Views. Location
29. Layer Graphically manipulate a set of Views as one Apply transforms (setRotation, setTranslationY etc) on multiple Views Can be set as a bounding box for its referenced Views Location
30. ConstraintLayout 2.0 ConstraintLayoutStates XML
31. ConstraintLayout 2.0 Constraint Sets pre 2.0 override fun onCreate(savedInstanceState: Bundle?) { ... val constraintSet1 = ConstraintSet() constraintSet1.clone(constraintLayout) val constraintSet2 = ConstraintSet() constraintSet2.clone(this, R.layout.layout_state_2) var changed = false findViewById(R.id.button).setOnClickListener { (if (changed) { constraintSet1 } else { constraintSet2 }).applyTo(constraintLayout) changed = !changed } }
32. ConstraintLayout 2.0 Constraint Sets 2.0 override fun onCreate(savedInstanceState: Bundle?) { ... constraintLayout.loadLayoutDescription(R.xml.states) var changed = false findViewById(R.id.button).setOnClickListener { constraintLayout.setState( if (changed) R.id.start else R.id.end ) changed = !changed } }
33. ConstraintLayout 2.0 ConstraintLayoutStates XML <ConstraintLayoutStates> <State android:id="@+id/start" app:constraints="@layout/activity_start"/> <State android:id="@+id/end" app:constraints="@layout/activity_end"/> </ConstraintLayoutStates>
34. ConstraintLayout 2.0 Can I use? dependencies { … implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha2' }
35. MotionLayout Location
36. MotionLayout Why?
37. MotionLayout When?
38. MotionLayout Overview
39. MotionLayout Anatomy of MotionScene
40. MotionLayout
41. MotionLayout <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" android:text="Button" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
42. MotionLayout <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" android:text="Button" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
43. MotionLayout Defining MotionLayout <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </android.support.constraint.motion.MotionLayout> <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@layout/motion_01_cl_start" motion:constraintSetEnd="@layout/motion_01_cl_end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> </MotionScene> scene_01.xml
44. MotionLayout Self contained MotionLayout <?xml version="1.0" encoding="utf-8"?> <MotionScene> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
45. MotionLayout
46. MotionLayout Advanced MotionLayout • KeyFrames • Nested MotionLayout • Image Transitions • Integrating MotionLayout with existing Layouts • And lots more
47. Efeturi Money, Careem @efemoney_ Location Thank you!
48. Q&A Ask me your questions! Location
49. Further Info • GoogleDevs series on MotionLayout starting here (https://medium.com/google-developers/introduction-t o-motionlayout-part-i-29208674b10d) • ConstraintLayout github example repo (https://github.com/googlesamples/android-Constraint LayoutExamples) • Google IO 2018 talk on ConstraintLayout and MotionLayout (https://www.youtube.com/watch?v=ytZteMo4ETk)