Introduction to MotionLayout

Slide 1

Slide 1 text

1 Introduction to MotionLayout Balakrishna Sangem /BALUSANGEM @sbkurs Android developer at Avantari

Slide 2

Slide 2 text

2 @sbkurs Introduction to MotionLayout ConstraintLayout Flat view hierarchy Great Layout Editor Complex animations using Transition Manager From Android developers blog

Slide 3

Slide 3 text

3 @sbkurs Introduction to MotionLayout ANIMATIONS

Slide 4

Slide 4 text

4 @sbkurs Introduction to MotionLayout Animated Vector Drawable Property Animation framework LayoutTransition animations LayoutTransitions with TransitionManager CoordinatorLayout ANIMATIONS

Slide 5

Slide 5 text

5 @sbkurs Introduction to MotionLayout Still something Missing?

Slide 6

Slide 6 text

6 @sbkurs Introduction to MotionLayout Mixing LayoutTransitions and Motion Handling Still something Missing?

Slide 7

Slide 7 text

7 @sbkurs Introduction to MotionLayout Solution MotionLayout

Slide 8

Slide 8 text

8 @sbkurs Introduction to MotionLayout MotionLayout • Subclass of ConstraintLayout • Support from API 18 • How it solves problem?

Slide 9

Slide 9 text

9 @sbkurs Introduction to MotionLayout • A mix between the property animation framework, layout transitions with TransitionManager, and CoordinatorLayout MotionLayout • Let’s you describe the transition between two layouts (like TransitionManager) • Supports seek-able transitions (like CoordinatorLayout) • Can animate any property (like Property Animations)

Slide 10

Slide 10 text

10 @sbkurs Introduction to MotionLayout Fully Declarative No need of code, you can declare everything in xml

Slide 11

Slide 11 text

11 @sbkurs Introduction to MotionLayout !!!

Slide 12

Slide 12 text

12 @sbkurs Introduction to MotionLayout !!!

Slide 13

Slide 13 text

13 @sbkurs Introduction to MotionLayout MotionScene

Slide 14

Slide 14 text

14 @sbkurs Introduction to MotionLayout create xml file under xml directory Creating MotionScene ! MotionScene contains ConstraintSets and Transition

Slide 15

Slide 15 text

15 @sbkurs Introduction to MotionLayout ConstraintSet • Resting state • Has Constraints as children • Contains an id will be used by Transition • Encapsulate all the positioning rules for your layout • Constraint element should contain all constraints you want to apply to a view.

Slide 16

Slide 16 text

16 @sbkurs Introduction to MotionLayout ! ! !

Slide 17

Slide 17 text

17 @sbkurs Introduction to MotionLayout scene_start scene_end

Slide 18

Slide 18 text

18 @sbkurs Introduction to MotionLayout Transition • Defines a transition between two ConstraintSets • Contains Interactions • Contains KeyFrameSet

Slide 19

Slide 19 text

19 @sbkurs Introduction to MotionLayout

Slide 20

Slide 20 text

20 @sbkurs Introduction to MotionLayout ! ! !

Slide 21

Slide 21 text

21 @sbkurs Introduction to MotionLayout onSwipeHandler (Interaction)

Slide 22

Slide 22 text

22 @sbkurs Introduction to MotionLayout OnSwipe • This will drive the transition , by matching the motion of your finger • Parameters ★ touchAnchorId : id of the Object we should track ★ touchAnchorSide : the side of the Object that should track your finger ★ dragDirection: the direction of the motion you are tracking

Slide 23

Slide 23 text

23 @sbkurs Introduction to MotionLayout scene_start scene_end

Slide 24

Slide 24 text

24 @sbkurs Introduction to MotionLayout MotionLayout MotionScene

Slide 25

Slide 25 text

25 @sbkurs Introduction to MotionLayout MotionLayout attributes for Development • app:layoutDescription=”reference” • app:showPaths=”boolean” • app:progress=”float”

Slide 26

Slide 26 text

26 @sbkurs Introduction to MotionLayout CustomAttributes

Slide 27

Slide 27 text

27 @sbkurs Introduction to MotionLayout CustomAttributes • MotionLayout supports these attributes out of the box • alpha • visibility • elevation • rotation, rotation[X/Y] • translation[X/Y/Z] • scaleX/Y • Need of CustomAttributes?

Slide 28

Slide 28 text

@sbkurs Introduction to MotionLayout ! • We specify attributeName, which matches the setter/getter of Object • Value Type also need to be specified • customColorValue • customIntegerValue • customFloatValue • customStringValue • customDimension • customBoolean • We can declare in both ConstarintSets and KeyAttribute elements

Slide 29

Slide 29 text

29 @sbkurs Introduction to MotionLayout CustomAttribute background is changing ! ! ! !

Slide 30

Slide 30 text

30 @sbkurs Introduction to MotionLayout KeyFrames

Slide 31

Slide 31 text

31 @sbkurs Introduction to MotionLayout • These are Intermediate states - a state to go through but not to stay in KeyFrames • KeyFrames lets you specify a change at a point in time during the transition • Different type of KeyFrames ✦ KeyPosition ✦ KeyAttribute ✦ KeyCycle ✦ KeyTimeCycle • Important attributes for every KeyFrame ★ motion:framePosition ★ motion:target

Slide 32

Slide 32 text

32 @sbkurs Introduction to MotionLayout KeyPosition • Specify an intermediary position at a particular time in transition • Allows to manipulate the motion path of widget • KeyPosition need to contain following attributes ★ target ★ framePosition ★ keyPositionType ★ percentX / percentY

Slide 33

Slide 33 text

33 @sbkurs Introduction to MotionLayout Image is going through intermediary position !

Slide 34

Slide 34 text

34 @sbkurs Introduction to MotionLayout KeyAttribute • Specify widget attribute changes at a particular time in transition • Depending on which SDK level you target for your application, some attributes may will not work • Can contain CustomAttributes

Slide 35

Slide 35 text

35 @sbkurs Introduction to MotionLayout Image is going through intermediary attribute change !

Slide 36

Slide 36 text

36 @sbkurs Introduction to MotionLayout TODO • KeyCycle • KeyTimeCycle • MotionHelper • StateSet • ImageFilterView • ArcMotion using KeyPosition Frame

Slide 37

Slide 37 text

37 @sbkurs Introduction to MotionLayout FUTURE - MOTION EDITOR

Slide 38

Slide 38 text

38 @sbkurs Introduction to MotionLayout Lets do some Coding Dev101 App - Introduction of a developer References: http://tiny.cc/motionlayout MotionLayout Series by Nicolas Road Code lab at : balusangem.github.io/motionlayoutintro