ContraintLayout 2.0 - Introduction to MotionLayout

Slides from my Mobile Era 2018 talk.

Transcript

1. ConstraintLayout 2.0 Introduction to MotionLayout Andrew Kelly - Google Developer Expert for Android @andrew_ke11y
2. Constraint Layout 1.0 • Uses Cassowary algorithm, to place children relative to anchor points on other views or the parent layout so that constraints are satisfied. • API 9+ • Current version 1.1.3 • Included in the Support Library. • Android Studio 3.x - visual layout editor • Maintains a flat hierarchy which allows constraints to be easily modified • Constraints are embedded within the layout file.
3. 2.0 Overview • ConstraintLayout 2.0 allows ConstraintSets to be externalised into a separate file from the layouts themselves. • ConstrainLayout 2.0 now includes a new tool for adding motion - MotionLayout. • API 14+ • MotionLayout extends ConstraintLayout so can be a drop in replacement if you want to get started slowly. • MotionLayout uses MotionScenes to manage the animation between different ConstraintSets. • MotionScenes also let you animate custom attributes. • MotionScenes allow you to interpolate the animations between states based on user input e.g. dragging.
4. – Anon “Motion should be meaningful, don’t go crazy!”
5. • The app:layoutDescription attribute of a MotionLayout links it with the xml file that describes the MotionScene
6. <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_keyframe" app:showPaths="true"> ... </android.support.constraint.motion.MotionLayout> If you’re using androidx the package names will be slightly different. <android.support.constraint.motion.MotionLayout app:layoutDescription="@xml/scene_keyframe" app:showPaths="true"> </android.support.constraint.motion.MotionLayout> layout/layout_keyframe.xml
7. <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:interpolator="linear" motion:duration="1000"> <OnSwipe ... /> <OnClick ... /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint ... /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint ... /> </ConstraintSet> </MotionScene> xml/scene_keyframe.xml <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:interpolator="linear" motion:duration="1000"> <OnSwipe ... /> <OnClick ... /> </Transition> </MotionScene>
8. <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:interpolator="linear" motion:duration="1000"> <OnSwipe ... /> <OnClick ... /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint ... /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint ... /> </ConstraintSet> </MotionScene> xml/scene_keyframe.xml <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <ConstraintSet android:id="@+id/start"> <Constraint ... /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint ... /> </ConstraintSet> </MotionScene>
9. <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/text" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/text" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" /> </ConstraintSet>
10. Transitions • MotionScene allows you to define handlers in xml for OnSwipe and OnClick • OnSwipe interacts with user touches. • OnClick responds to clicks • You can have OnSwipe and OnClick both defined in the MotionScene, but OnClick will no longer work if OnSwipe is defined.* • You can also trigger transitions programatically. * more news on this later.
11. DragDirection • dragUp, dragDown, dragLeft, dragRight TouchAnchorSide • top, left, right, bottom Mode • toggle, transitionToEnd, transitionToStart, jumpToEnd, jumpToStart <OnSwipe motion:dragDirection="dragUp" motion:touchAnchorId="@+id/text" motion:touchAnchorSide="top" /> <OnClick motion:mode="toggle" motion:target="@+id/text" />
12. jumpToEnd transitionToEnd toggle * animations are looped for demo purposes
13. Keyframes “a rendezvous in time”
14. <KeyPosition> • Keyframes allow you to define a transient state for a widget, whereas a ConstraintSet defines a “resting” state. • Keyframes are very lightweight compared to ConstraintSets • KeyPositions allow you to modify the path a widget will take during a transition.
15. <KeyPosition motion:framePosition="50" motion:percentY="-0.25" motion:keyPositionType="pathRelative" motion:target="@+id/text" /> Keyframe
16. Coordinate Systems • You may have noticed in the previous examples that <KeyPosition> motion:percentY moves the path in what looks like the x axis. • The reason for this is because of the coordinate system being used - pathRelative • Keyframes can use different coordinate systems for different widgets.
17. Coordinate Systems https://medium.com/google-developers/defining-motion-paths-in-motionlayout-6095b874d37
18. ParentRelative <KeyPosition motion:framePosition="25" motion:percentX="0" motion:keyPositionType="parentRelative" motion:target="@+id/text" /> <KeyPosition motion:framePosition="75" motion:percentX="1" motion:keyPositionType="parentRelative" motion:target="@+id/text" /> Key 2 Key 1 x y View touches parent edge ->
19. ParentRelative
20. DeltaRelative - X <KeyPosition motion:framePosition="25" motion:percentX="0.75" motion:keyPositionType="deltaRelative" motion:target="@+id/text" /> <KeyPosition motion:framePosition="75" motion:percentX="0.25" motion:keyPositionType="deltaRelative" motion:target="@+id/text" /> x y Key 1 Key 2
21. DeltaRelative - Y <KeyPosition motion:framePosition="25" motion:percentY="0.75" motion:keyPositionType="deltaRelative" motion:target="@+id/text" /> <KeyPosition motion:framePosition="75" motion:percentY="0.25" motion:keyPositionType="deltaRelative" motion:target="@+id/text" /> x y Key 1 Key 2
22. DeltaRelative - X <KeyPosition motion:framePosition="25" motion:percentX="0.75" motion:keyPositionType="deltaRelative" motion:target="@+id/text" /> <KeyPosition motion:framePosition="75" motion:percentX="0.25" motion:keyPositionType="deltaRelative" motion:target="@+id/text" /> y Key 2 Key 1 x
23. DeltaRelative - X <KeyPosition motion:framePosition="25" motion:percentX="0.75" motion:keyPositionType="deltaRelative" motion:target="@+id/text" /> <KeyPosition motion:framePosition="75" motion:percentX="0.25" motion:keyPositionType="deltaRelative" motion:target="@+id/text" /> y Key 2 Key 1 x
24. PathRelative <KeyPosition motion:framePosition="25" motion:percentY="-0.15" motion:keyPositionType="pathRelative” motion:target="@+id/text" /> <KeyPosition motion:framePosition="75" motion:percentY="0.15" motion:keyPositionType="pathRelative" motion:target="@+id/text" /> x y Key 1 Key 2 * note the change in axis
25. <KeyAttribute> • Similar to KeyPosition, except rather than allowing you to add a keyframe for a position, it allows you to add a keyframe for an attribute. • visibility • alpha • elevation • rotation • rotationX/Y • scaleX/Y • translationX/Y/Z <KeyAttribute android:rotation="45" motion:framePosition="50" motion:target="@id/text" />
27. <KeyAttribute> • Custom attributes are also supported, the attribute you want to modify needs to have a get/set method in the form get<AttributeName> e.g. getBackgroundColor • Values that can be altered • Color • Integer • Float • String • Dimension • Boolean <KeyAttribute motion:framePosition="50" motion:target="@id/text"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#0000FF"/> </KeyAttribute>
28. KeyAttribute CustomAttribute #00FF00 ConstraintSet CustomAttribute #FF0000 ConstraintSet CustomAttribute #0000FF
29. Time to Dazzle! I take no credit for the following work
30. TIVI https://github.com/chrisbanes/tivi Chris Banes
31. @+id/details_poster @+id/details_subtitle @+id/details_appbar_background
32. No key positions or attributes
33. <KeyPosition app:framePosition="20" app:keyPositionType="deltaRelative" app:percentY="0.51" app:target="@id/details_poster" />
34. <KeyAttribute android:elevation="4dp" android:rotation="45" android:rotationY="15" app:framePosition="20" app:target="@id/details_poster" /> <KeyAttribute android:elevation="0dp" app:framePosition="25" app:target="@id/details_poster" />
35. <KeyAttribute android:elevation="0dp" app:framePosition="75" app:target="@id/details_appbar_background"/> <KeyAttribute android:alpha="0" app:framePosition="75" app:target="@id/details_subtitle" />
36. YouTube Demo https://github.com/armcha/MotionLayout_youtube_animation Arman Chatikyan
37. @+id/videoViewContainer @+id/videoRecyclerView @+id/videoView Fragment 1 - Video Fragment
38. @+id/backgroundDim @+id/bottomNavigationView Previous Fragment (collapsed) Fragment 2 - Main Fragment
39. No key positions or attributes
40. <KeyAttribute app:framePosition="0" app:target="@id/videoView"> <CustomAttribute app:attributeName="EndPadding" app:customDimension="250dp" /> </KeyAttribute> <KeyAttribute app:framePosition="20" app:target="@id/videoView"> <CustomAttribute app:attributeName="EndPadding" app:customDimension="0dp" /> </KeyAttribute>
41. <KeyAttribute android:alpha="0" app:framePosition="0" app:target="@id/videoRecyclerView" /> <KeyAttribute android:alpha="1" app:framePosition="100" app:target="@id/videoRecyclerView" /> * deeply nested components don’t work
42. <KeyAttribute app:framePosition="0" app:target="@id/videoViewContainer"> <CustomAttribute app:attributeName="cardElevation" app:customDimension="5dp" /> </KeyAttribute> <KeyAttribute app:framePosition="3" app:target="@id/videoViewContainer"> <CustomAttribute app:attributeName="cardElevation" app:customDimension="0dp" /> </KeyAttribute>
43. <KeyAttribute app:framePosition="0" app:target="@id/bottomNavigationView"> <CustomAttribute app:attributeName="translationY" app:customDimension="0dp" /> </KeyAttribute> <KeyAttribute app:framePosition="75" app:target="@id/bottomNavigationView"> <CustomAttribute app:attributeName="translationY" app:customDimension="55dp" /> </KeyAttribute>
44. <KeyAttribute app:framePosition="100" app:target="@id/backgroundDim"> <CustomAttribute app:attributeName="BackgroundColor" app:customColorValue="#424242" /> </KeyAttribute> <KeyAttribute app:framePosition="0" app:target="@id/backgroundDim"> <CustomAttribute app:attributeName="BackgroundColor" app:customColorValue="#00000000" /> </KeyAttribute>
45. To synchronise the 2 MotionLayouts in the different fragments Arman uses a MotionLayout.TransitionListener videoMotionLayout.addTransitionListener(object : MotionLayout.TransitionListener { override fun onTransitionChange(motionLayout: MotionLayout?, startId: Int, endId: Int, progress: Float) { val mainActivity = activity as MainActivity mainActivity.mainMotionLayout.progress = Math.abs(progress) } override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) { } })
46. In Closing • ConstraintLayout v2.0 is still in alpha….don’t be scared! It builds upon the stable v1.1 • Alpha 2 contains breaking changes from Alpha 1, to avoid namespace clash with Navigation components. 
 Android Studio 3.4 should contain the new Keyframe editor demoed at Google I/O 2018 <KeyPosition motion:type=“pathRelative"/> <KeyPosition motion:keyPositionType="pathRelative"/>
47. In Closing Transitions • The OnSwipe/OnClick issue mentioned earlier should be resolved in alpha3 • Alpha3 should arrive sometime soon after the 5th Nov.
48. Resources ConstraintLayout 2.0 video from I/O 18 • https://www.youtube.com/watch?v=ytZteMo4ETk ConstraintLayout 2.0 samples • https://github.com/googlesamples/android-ConstraintLayoutExamples Introduction to MotionLayout • https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d TIVI • https://github.com/chrisbanes/tivi YouTube Demo • https://github.com/armcha/MotionLayout_youtube_animation
49. Who to follow Nicolas Roard - https://twitter.com/camaelon John Hoford - https://twitter.com/johnhoford Mark Allison - https://blog.stylingandroid.com Chris Banes - https://twitter.com/chrisbanes Britt Barak - https://twitter.com/BrittBarak Huyen Tue Dao - https://twitter.com/queencodemonkey Rebecca Franks - https://twitter.com/riggaroo
50. Thank You Questions ? @andrew_ke11y