Getting Started with MotionLayout - Async Android 2020

by Rebecca Franks

Slide 1

Slide 1 text

Getting started with MotionLayout Rebecca Franks @riggaroo

Slide 2

Slide 2 text

What is MotionLayout? • Subclass of ConstraintLayout • With additional ways to animate views on screen • For complex view animations driven by interactions • Allows for midway seeking of animations • Back-ported to API 14

Slide 3

Slide 3 text

Example usage https://github.com/nikhilpanju/FabFilter

Slide 4

Slide 4 text

Get Started

Slide 5

Slide 5 text

Get Started Include gradle dependency dependencies { implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta4' }

Slide 6

Slide 6 text

Change to use MotionLayout Change usage of ConstraintLayout to MotionLayout

Slide 7

Slide 7 text

Create motion_scene.xml Create empty motion_scene.xml file inside app/res/xml/ folder

Slide 8

Slide 8 text

Link scene.xml to layout Link the newly created motion_scene.xml to MotionLayout

Slide 9

Slide 9 text

Motion Scene

Slide 10

Slide 10 text

Motion Scene • XML file that defines all animations for the scene • Can be defined programmatically • Contains: ConstraintSets, Transitions + KeyFrames

Slide 11

Slide 11 text

Components of Motion Scene

Slide 12

Slide 12 text

Constraint Sets / States Different “resting” state that the Motion Scene will take

Slide 13

Slide 13 text

Transition Defines the way in which two states will be transformed between. - start / end state

Slide 14

Slide 14 text

Transition - OnClick Add automatic onClick transition

Slide 15

Slide 15 text

KeyFrameSets - Define key points of a transition - A timeline of events 0 100 60

Slide 16

Slide 16 text

Motion Editor Android Studio 4.0 Beta UI tool for editing & previewing MotionScene Files.