A look at MotionLayout

A quick look at motion layout

Transcript

1. An Introduction to MotionLayout @M0dge Eoin Fogarty
2. # Introduction - Eoin Fogarty - Native Engineer at Cyberagent. - Android and Flutter developer @M0dge https://github.com/eoinfogarty
3. # Why Motion Layout? Existing animation frameworks: - AnimatedVectorDrawables - Property animations - Layout transitions Animations - Layout transitions with TransitionManager - CoordinatorLayout These can be complex to work with, and may have restrictions that stop creating animations as envisione them
4. # What is Motion Layout? - A subclass of ConstraintLayout, and builds upon its rich layout capabilities. - Similar to TransitionManager, MotionLayout lets you describe the transition between two layouts. - Unlike TransitionManager, MotionLayout isn’t restricted to layout attributes, so you have more flexibility to create highly-customized, unique animations.
6. - Stored in your res/xml directory - ConstraintSet is that they encapsulate all the positioning rules for your layout - You can use multiple ConstraintSets, - The transition between those ConstraintSets - Keyframes, OnClick, OnSwipe - Custom Attributes. # Motion Scene
7. # How to use Motion Layout
8. # Layout with MotionLayout <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_rising_sun"> <ImageView android:id="@+id/retrowave_sun" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/retrowave_sun" /> </android.support.constraint.motion.MotionLayout>
9. # MotionScene - Layout <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> </MotionScene>
10. # MotionScene - Constraint Set <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/retrowave_sun" android:layout_width="wrap_content" android:layout_height="wrap_content" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/retrowave_sun" android:layout_width="wrap_content" android:layout_height="wrap_content" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" motion:layout_constraintStart_toStartOf="parent"/> </ConstraintSet>
11. # MotionScene - Transition <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/retrowave_sun" motion:touchAnchorSide="top" motion:dragDirection="dragUp" /> </Transition>
13. # Custom Attributes - customColorValue <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout ... app:layoutDescription="@xml/scene_rising_sun"> <FrameLayout android:id="@+id/background" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <!-- other views--> </android.support.constraint.motion.MotionLayout>
14. # Custom Attributes - customColorValue <ConstraintSet android:id="@+id/start"> <!-- other constraints --> <Constraint android:id="@id/background" ...> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/backgroundStartBlack" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/background" ...> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/backgroundEndPink" /> </Constraint> </ConstraintSet>
16. # Custom Attributes - customIntegerValue <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout ... app:layoutDescription="@xml/scene_rising_sun"> <!-- other views--> <ImageView android:id="@+id/motion_layout_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="96dp" android:src="@drawable/img_motion_layout_text" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.motion.MotionLayout>
17. # Custom Attributes - customIntegerValue <ConstraintSet android:id="@+id/start"> <!-- other constraints --> <Constraint android:id="@id/motion_layout_text" ...> <CustomAttribute motion:attributeName="imageAlpha" motion:customIntegerValue="0" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <!-- other constraints --> <Constraint android:id="@id/motion_layout_text" ...> <CustomAttribute motion:attributeName="imageAlpha" motion:customIntegerValue="255" /> </Constraint> </ConstraintSet>
19. See the rest on github: https://github.com/eoinfogarty/MotionLayout-RetroWave
20. # Much Much More! Use with existing layouts: - CoordinatorLayout - DrawerLayout - ViewPager - Lottie KeyFrames! - Position keyframe - Attribute keyframe - Cycle keyframe - TimeCycle keyframe
21. # The Future - Motion Editor
22. # Further Reading # Material Design Spec https://material.io/design/motion/understanding-motion.html# # Introduction To MotionLayout https://medium.com/google-developers/introduction-to-motionlayout-p art-i-29208674b10d # Google I/O (from 29 mins) https://www.youtube.com/watch?v=ytZteMo4ETk