Practical Animations with MotionLayout

Slide 1

Slide 1 text

Layale Matta Android Engineer, Neo Technologies Practical Animations with MotionLayout TECH(K)NOW DAY

Slide 2

Slide 2 text

yalematta.dev TECH(K)NOW DAY Layale Matta [LAYÄL]

Slide 3

Slide 3 text

Why Animations? TECH(K)NOW DAY

Slide 4

Slide 4 text

We can use animations to: ● Show changes ● Draw attention ● Build beautiful designs TECH(K)NOW DAY

Slide 5

Slide 5 text

Get Started TECH(K)NOW DAY

Slide 6

Slide 6 text

Get Started ● MotionLayout ● Motion Scene ● Motion Editor ● Demo TECH(K)NOW DAY

Slide 7

Slide 7 text

So, what is MotionLayout? TECH(K)NOW DAY

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

What is Motion Editor? TECH(K)NOW DAY

Slide 10

Slide 10 text

Motion Editor ● New animation tool ● Built into Android Studio 4.0 ● Helps build, edit and preview animations TECH(K)NOW DAY

Slide 11

Slide 11 text

d.android.com/training/constraint-layout/motionlayout TECH(K)NOW DAY AndroidStudio 4.1 ConstraintLayout-2.0.4

Slide 12

Slide 12 text

dependencies { implementation "androidx.constraintlayout:constraintlayout:2.0.4" } Add gradle dependency

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Components of a Motion Scene

Slide 20

Slide 20 text

ConstraintSet TECH(K)NOW DAY

Slide 21

Slide 21 text

ConstraintSet / State

Slide 22

Slide 22 text

... ... ConstraintSet / State

Slide 23

Slide 23 text

ConstraintSet / State ... ...

Slide 24

Slide 24 text

ConstraintSet / State ... ...

Slide 25

Slide 25 text

Transition TECH(K)NOW DAY

Slide 26

Slide 26 text

Transition

Slide 27

Slide 27 text

Transition ... ...

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

... autoTransition

Slide 30

Slide 30 text

... motionInterpolator

Slide 31

Slide 31 text

OnClick TECH(K)NOW DAY

Slide 32

Slide 32 text

Launching a Transition TECH(K)NOW DAY Automatically autoTransition=”animateToEnd” Programatically ml.transitionTo(R.id.end)

Slide 33

Slide 33 text

... OnClick

Slide 34

Slide 34 text

OnClick ...

Slide 35

Slide 35 text

KeyFrameSet TECH(K)NOW DAY

Slide 36

Slide 36 text

... ... KeyFrameSet

Slide 37

Slide 37 text

... ... KeyFrameSet

Slide 38

Slide 38 text

Motion Editor TECH(K)NOW DAY

Slide 39

Slide 39 text

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