MotionLayout : Animation Magic

Slide 1

Slide 1 text

MotionLayout @code_wizard https:/ /github/kioko https:/ /thomaskioko.com Thomas Kioko Android Engineer Constraint Layout 2.0

Slide 2

Slide 2 text

BUT FIRST …

Slide 3

Slide 3 text

AbsoluteLayout FrameLayout RelativeLayout CoordinatedLayout … LinearLayout Take me Back

Slide 4

Slide 4 text

Other Layouts R.I.P

Slide 5

Slide 5 text

Constraint 1.1

Slide 6

Slide 6 text

Chains Circular Constraints Helpers Barries ConstraintLayout 1.1

Slide 7

Slide 7 text

ConstraintLayout 2.0

Slide 8

Slide 8 text

There’s more …

Slide 9

Slide 9 text

ConstraintLayout 2.0

Slide 10

Slide 10 text

Will I be able to control robots? 2.0… Why?

Slide 11

Slide 11 text

Will it take me to the moon? 2.0… Why?

Slide 12

Slide 12 text

“ “ “ “ MotionLayout

Slide 13

Slide 13 text

Bring your UI back from the dead Animations

Slide 14

Slide 14 text

ConstraintSet Constraint MotionScene Events Transition KeyFrames Key Concepts

Slide 15

Slide 15 text

Let’s Cook Some Code

Slide 16

Slide 16 text

Gradle Dependency dependencies{ … implementation 'androidx.constraintlayout:constraintlayout: 2.0.0-alpha2' }

Slide 17

Slide 17 text

- Improvments on Support Library - Backward compatibility. Btw … AndroidX released with JetPack

Slide 18

Slide 18 text

The UI

Slide 19

Slide 19 text

A few minutes later…. …..

Slide 20

Slide 20 text

Movie UI -1- Deﬁne The Layouts

Slide 21

Slide 21 text

activity_movie_detail.xml

Slide 22

Slide 22 text

Let’s dance -2- Switch to MotionLayout

Slide 23

Slide 23 text

activity_movie_detail.xml

Slide 24

Slide 24 text

xml/ scene_movie.xml -3- Deﬁne TheScene

Slide 25

Slide 25 text

- Start: constraintSetStart - End: constraintSetEnd ConstraintSets 2 States Types

Slide 26

Slide 26 text

xml/ scene_movie.xml … … -4- Add ConstraintSet

Slide 27

Slide 27 text

xml/ scene_movie.xml

Slide 28

Slide 28 text

Reusing Constraints .Have the same Id as the widgets. . Rewrite Constraints Constraint

Slide 29

Slide 29 text

xml/ scene_movie.xml -6- Add Constraint Start

Slide 30

Slide 30 text

xml/ scene_movie.xml -7- Add Constraint End

Slide 31

Slide 31 text

xml/ scene_movie.xml -8- Add Other Constraints

Slide 32

Slide 32 text

.onClick The Trigger . onSwipe Transition Events

Slide 33

Slide 33 text

xml/scene_movie.xml -9- Add Event

Slide 34

Slide 34 text

Prepare for Landing

Slide 35

Slide 35 text

Let’s up MotionScene & the Layout -10- Last Line (I Think ..)

Slide 36

Slide 36 text

layout/movie_detail_activity.xml -11- Add Event …

Slide 37

Slide 37 text

…

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

The End

Slide 40

Slide 40 text

CustomAttributes . Position KeyFrames . KeyTimeCycle . What Next? MotionLayout Editor .

Slide 41

Slide 41 text

@code_wizard The End. https://github.com/kioko https://thomaskioko.com