Introduction to MotionLayout

Transcript

1. 1 Introduction to MotionLayout Balakrishna Sangem /BALUSANGEM @sbkurs Android developer at Avantari
2. 2 @sbkurs Introduction to MotionLayout ConstraintLayout Flat view hierarchy Great Layout Editor Complex animations using Transition Manager From Android developers blog
3. 3 @sbkurs Introduction to MotionLayout ANIMATIONS
4. 4 @sbkurs Introduction to MotionLayout Animated Vector Drawable Property Animation framework LayoutTransition animations LayoutTransitions with TransitionManager CoordinatorLayout ANIMATIONS
5. 5 @sbkurs Introduction to MotionLayout Still something Missing?
6. 6 @sbkurs Introduction to MotionLayout Mixing LayoutTransitions and Motion Handling Still something Missing?
7. 7 @sbkurs Introduction to MotionLayout Solution MotionLayout
8. 8 @sbkurs Introduction to MotionLayout MotionLayout • Subclass of ConstraintLayout • Support from API 18 • How it solves problem?
9. 9 @sbkurs Introduction to MotionLayout • A mix between the property animation framework, layout transitions with TransitionManager, and CoordinatorLayout MotionLayout • Let’s you describe the transition between two layouts (like TransitionManager) • Supports seek-able transitions (like CoordinatorLayout) • Can animate any property (like Property Animations)
10. 10 @sbkurs Introduction to MotionLayout Fully Declarative No need of code, you can declare everything in xml
11. 11 @sbkurs Introduction to MotionLayout <androidx.constraintlayout.motion.widget.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/mainMotionLayout" android:layout_width="match_parent" android:layout_height=“match_parent" app:layoutDescription="@xml/main_view_scene" > !!!<!--Views Goes here——> !</androidx.constraintlayout.motion.widget.MotionLayout
12. 12 @sbkurs Introduction to MotionLayout <androidx.constraintlayout.motion.widget.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/mainMotionLayout" android:layout_width="match_parent" android:layout_height=“match_parent" app:layoutDescription="@xml/main_view_scene" > !!!<!--Views Goes here——> !</androidx.constraintlayout.motion.widget.MotionLayout app:layoutDescription="@xml/main_view_scene"
13. 13 @sbkurs Introduction to MotionLayout MotionScene
14. 14 @sbkurs Introduction to MotionLayout create xml file under xml directory Creating MotionScene <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http:!//schemas.android.com/apk/res/android" xmlns:motion="http:!//schemas.android.com/apk/res-auto"> !</MotionScene> MotionScene contains ConstraintSets and Transition
15. 15 @sbkurs Introduction to MotionLayout ConstraintSet • Resting state • Has Constraints as children • Contains an id will be used by Transition • Encapsulate all the positioning rules for your layout • Constraint element should contain all constraints you want to apply to a view.
16. 16 @sbkurs Introduction to MotionLayout <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:motion=“http:!//schemas.android.com/apk/res-auto”> <ConstraintSet android:id="@+id/scene_start"> <Constraint!/> !</ConstraintSet> <ConstraintSet android:id="@+id/scene_end"> <Constraint!/> !</ConstraintSet> !</MotionScene>
17. 17 @sbkurs Introduction to MotionLayout scene_start scene_end
18. 18 @sbkurs Introduction to MotionLayout Transition • Defines a transition between two ConstraintSets • Contains Interactions • Contains KeyFrameSet
19. 19 @sbkurs Introduction to MotionLayout <Transition motion:constraintSetEnd="@id/scene_end" motion:constraintSetStart=“@id/scene_start"!/>
20. 20 @sbkurs Introduction to MotionLayout <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:motion=“http:!//schemas.android.com/apk/res-auto”> <Transition motion:constraintSetEnd="@id/scene_end" motion:constraintSetStart=“@id/scene_start"!/> <ConstraintSet android:id=“@+id/scene_start"> <Constraint!/> <Constraint!/> <Constraint!/> !</ConstraintSet> <ConstraintSet android:id="@+id/scene_end"> <Constraint!/> <Constraint!/> <Constraint!/> !</ConstraintSet> !</MotionScene>
21. 21 @sbkurs Introduction to MotionLayout onSwipeHandler (Interaction)
22. 22 @sbkurs Introduction to MotionLayout OnSwipe • This will drive the transition , by matching the motion of your finger • Parameters ★ touchAnchorId : id of the Object we should track ★ touchAnchorSide : the side of the Object that should track your finger ★ dragDirection: the direction of the motion you are tracking
23. 23 @sbkurs Introduction to MotionLayout scene_start scene_end
24. 24 @sbkurs Introduction to MotionLayout MotionLayout MotionScene </Transition> </ConstraintSet> </onSwipe> </Constraint>
25. 25 @sbkurs Introduction to MotionLayout MotionLayout attributes for Development • app:layoutDescription=”reference” • app:showPaths=”boolean” • app:progress=”float”
26. 26 @sbkurs Introduction to MotionLayout CustomAttributes
27. 27 @sbkurs Introduction to MotionLayout CustomAttributes • MotionLayout supports these attributes out of the box • alpha • visibility • elevation • rotation, rotation[X/Y] • translation[X/Y/Z] • scaleX/Y • Need of CustomAttributes?
28. @sbkurs Introduction to MotionLayout <Constraint> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" !/> !</Constraint> • We specify attributeName, which matches the setter/getter of Object • Value Type also need to be specified • customColorValue • customIntegerValue • customFloatValue • customStringValue • customDimension • customBoolean • We can declare in both ConstarintSets and KeyAttribute elements
29. 29 @sbkurs Introduction to MotionLayout CustomAttribute background is changing <ConstraintSet android:id=“@+id/scene_end"> <Constraint> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorAccent" !/> !</Constraint> !</ConstraintSet> <ConstraintSet android:id=“@+id/scene_end"> <Constraint> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorPrimary"!/> !</Constraint> !</ConstraintSet>
30. 30 @sbkurs Introduction to MotionLayout KeyFrames
31. 31 @sbkurs Introduction to MotionLayout • These are Intermediate states - a state to go through but not to stay in KeyFrames • KeyFrames lets you specify a change at a point in time during the transition • Different type of KeyFrames ✦ KeyPosition ✦ KeyAttribute ✦ KeyCycle ✦ KeyTimeCycle • Important attributes for every KeyFrame ★ motion:framePosition ★ motion:target
32. 32 @sbkurs Introduction to MotionLayout KeyPosition • Specify an intermediary position at a particular time in transition • Allows to manipulate the motion path of widget • KeyPosition need to contain following attributes ★ target ★ framePosition ★ keyPositionType ★ percentX / percentY
33. 33 @sbkurs Introduction to MotionLayout Image is going through intermediary position <KeyFrameSet> <KeyPosition motion:framePosition="50" motion:keyPositionType="pathRelative" motion:percentX="0.5" motion:percentY="0.3" motion:target="@id/imageViewFour" motion:transitionEasing="decelerate" !/> !</KeyFrameSet>
34. 34 @sbkurs Introduction to MotionLayout KeyAttribute • Specify widget attribute changes at a particular time in transition • Depending on which SDK level you target for your application, some attributes may will not work • Can contain CustomAttributes
35. 35 @sbkurs Introduction to MotionLayout Image is going through intermediary attribute change <KeyFrameSet> <KeyAttribute android:rotation="-45" android:scaleX="2" android:scaleY="2" motion:framePosition="50" motion:target="@id/imageViewSeven" !/> !</KeyFrameSet>
36. 36 @sbkurs Introduction to MotionLayout TODO • KeyCycle • KeyTimeCycle • MotionHelper • StateSet • ImageFilterView • ArcMotion using KeyPosition Frame
37. 37 @sbkurs Introduction to MotionLayout FUTURE - MOTION EDITOR
38. 38 @sbkurs Introduction to MotionLayout Lets do some Coding Dev101 App - Introduction of a developer References: http://tiny.cc/motionlayout MotionLayout Series by Nicolas Road Code lab at : balusangem.github.io/motionlayoutintro