Slide 1

Slide 1 text

@ValentineRutto, Android Engineer Complex UI/Animations with Motion layout.

Slide 2

Slide 2 text

ValentineRutto Android Engineer-@Dlight Twitter | Linkedin | Medium | Github | Instagram @valentinerutto

Slide 3

Slide 3 text

● A layout type that helps you manage motion and widget animation in your app. ● Subclass of ConstraintLayout and builds upon its rich layout capabilities. ● Available as a support library and is backwards-compatible to API level 14. What is Motion Layout?

Slide 4

Slide 4 text

● Fully declarative; you can describe your animations in xml ● Lets you describe the transition between layouts & can animate properties Why Motion Layout?

Slide 5

Slide 5 text

● When moving, resizing and animating UI components the user will interact with Limitation Motion Layout ● Capabilities available for direct children views When Motion Layout?

Slide 6

Slide 6 text

● Add Constraint layout gradle dependency implementation 'androidx.constraintlayout:constraintlayout:2.0.4' ● Convert xml layout to motion layout ● Link layout to motion scene file Getting started:

Slide 7

Slide 7 text

MotionScene An XML resource file that contains all of the motion descriptions for the corresponding layout.

Slide 8

Slide 8 text

Motion Scene File

Slide 9

Slide 9 text

Motion Tags 1. ConstraintSet 2. Transition 3. KeyFrameSet

Slide 10

Slide 10 text

Motion Tags : Constraint Set ● Defines the ‘resting’ state that the motion scene will take. ● Define the constraints that define your motion.

Slide 11

Slide 11 text

Motion Tags : Transition ● Defines how 2 constraint sets will be transformed

Slide 12

Slide 12 text

Motion Tags : KeyFrames ● Specifies key points in the transition where we can change any attribute. ● Helps one modify the path the view takes during animations

Slide 13

Slide 13 text

Resources 1. Motion Layout examples by developer.android.com 2. Motion Layout #MADSkills 3. Motion Layout Codelab

Slide 14

Slide 14 text

Demo Github Code https://github.com/valentineRutto/IWD2021MotionLayout

Slide 15

Slide 15 text

Thank You Twitter | Linkedin | Medium | Github @valentinerutto