Practical Animations with MotionLayout

MotionLayout is a new animation tool built into ConstraintLayout 2.0 that lets you easily create animations on Android. In this session, Layale will cover the basics of MotionLayout and how to get started with it using the Motion Editor in Android Studio to quickly add motion to your application!

Transcript

1. Layale Matta Android Engineer, Neo Technologies Practical Animations with MotionLayout TECH(K)NOW DAY
2. yalematta.dev TECH(K)NOW DAY Layale Matta [LAYÄL]
3. Why Animations? TECH(K)NOW DAY
4. We can use animations to: • Show changes • Draw attention • Build beautiful designs TECH(K)NOW DAY
5. Get Started TECH(K)NOW DAY
6. Get Started • MotionLayout • Motion Scene • Motion Editor • Demo TECH(K)NOW DAY
7. So, what is MotionLayout? TECH(K)NOW DAY
8. MotionLayout • Subclass of ConstraintLayout • Easily coordinate animations of multiple views • Complex animations driven by interactions • Seekable and reversible animations • Compatible back to API 14 TECH(K)NOW DAY
9. What is Motion Editor? TECH(K)NOW DAY
10. Motion Editor • New animation tool • Built into Android Studio 4.0 • Helps build, edit and preview animations TECH(K)NOW DAY
11. d.android.com/training/constraint-layout/motionlayout TECH(K)NOW DAY AndroidStudio 4.1 ConstraintLayout-2.0.4
12. dependencies { implementation "androidx.constraintlayout:constraintlayout:2.0.4" } Add gradle dependency
13. <androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp" android:src="@drawable/ic_droid" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
14. <androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp" android:src="@drawable/ic_droid" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
16. <androidx.constraintlayout.motion.widget.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/activity_main_scene"> <ImageView android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp" android:src="@drawable/ic_droid" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.motion.widget.MotionLayout>
17. <androidx.constraintlayout.motion.widget.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/activity_main_scene"> <ImageView android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp" android:src="@drawable/ic_droid" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.motion.widget.MotionLayout>
18. Motion Scene • XML file • Contains multiple states and transitions between them • Defines all animations for the scene • Can be defined programmatically TECH(K)NOW DAY
19. <MotionScene> <Transition> <KeyFrameSet> <OnClick> <OnSwipe> <ConstraintSet> <Constraint> <Transform> <PropertySet> <Layout> <CustomAttribute> Components of a Motion Scene
20. ConstraintSet TECH(K)NOW DAY
21. ConstraintSet / State <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
22. ... <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> ... ConstraintSet / State
23. ConstraintSet / State ... <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp" motion:layout_constraintRight_toRightOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> ...
24. ConstraintSet / State ... <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp" motion:layout_constraintRight_toRightOf="parent" motion:layout_constraintTop_toTopOf="parent"> <Transform android:rotation="45" android:translationZ="20dp" android:rotationY="10"/> </Constraint> </ConstraintSet> ...
25. Transition TECH(K)NOW DAY
26. Transition <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"/> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
27. Transition ... <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"/> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/iv_droid" android:layout_width="180dp" android:layout_height="180dp" motion:layout_constraintRight_toRightOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> ...
28. Transition Attributes TECH(K)NOW DAY android:id Name your transition transitionDisable Disable/Enable your transition pathMotionArc All layout movement in arcs autoTransition Automatically transition motionInterpolator Configure easing duration Time to go from start to end in ms staggered Sequentially execute individual transitions
29. <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000" motion:autoTransition="animateToEnd"/> ... </MotionScene> autoTransition
30. <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000" motion:autoTransition="animateToEnd" motion:motionInterpolator="bounce"> ... </MotionScene> motionInterpolator
31. OnClick TECH(K)NOW DAY
32. Launching a Transition TECH(K)NOW DAY Automatically autoTransition=”animateToEnd” Programatically ml.transitionTo(R.id.end) <OnClick/> <OnSwipe>
33. <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <OnClick/> </Transition> ... </MotionScene> OnClick
34. OnClick <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <OnClick motion:targetId="@+id/iv_droid" motion:clickAction="toggle"/> </Transition> ... </MotionScene>
35. KeyFrameSet TECH(K)NOW DAY
36. ... <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <KeyFrameSet> <KeyAttribute motion:motionTarget="@+id/iv_heart" motion:framePosition="60" android:alpha="0"/> </KeyFrameSet> </Transition> ... KeyFrameSet
37. ... <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <KeyFrameSet> <KeyAttribute motion:motionTarget="@+id/iv_droid" motion:framePosition="60" android:alpha="0"/> </KeyFrameSet> </Transition> ... KeyFrameSet
38. Motion Editor TECH(K)NOW DAY
39. Learn More TECH(K)NOW DAY Documentation d.android.com/training/constraint-layout/motionlayout Codelab d.android.com/codelabs/motion-layout GitHub Samples github.com/android/views-widgets-samples/tree/master/ConstraintLayoutExamples