Getting Started with MotionLayout - Async Android 2020

Want to learn the basics of MotionLayout and how to get started with it on Android? In this session, Rebecca walks through the basic components of MotionLayout and how to go about using the Motion Editor in Android Studio Beta. She covers the different concepts: ConstraintSets, Transitions, KeyFrameSets and how to get up and running with a basic Motion Scene.

Transcript

1. Getting started with MotionLayout Rebecca Franks @riggaroo
2. 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
3. Example usage https://github.com/nikhilpanju/FabFilter
4. Get Started
5. Get Started Include gradle dependency dependencies { implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta4' }
6. Change to use MotionLayout Change usage of ConstraintLayout to MotionLayout <!-- before: ConstraintLayout --> <androidx.constraintlayout.widget.ConstraintLayout .../> <!-- after: MotionLayout --> <androidx.constraintlayout.motion.widget.MotionLayout .../>
7. Create motion_scene.xml Create empty motion_scene.xml file inside app/res/xml/ folder <?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>
8. Link scene.xml to layout Link the newly created motion_scene.xml to MotionLayout <?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> </androidx.constraintlayout.motion.widget.MotionLayout>
9. Motion Scene
10. Motion Scene • XML file that defines all animations for the scene • Can be defined programmatically • Contains: ConstraintSets, Transitions + KeyFrames
11. Components of Motion Scene <MotionScene> <Transition> <KeyFrameSet> <OnClick> <OnSwipe> <ConstraintSet> <Constraint> <Transform> <PropertySet> <Layout> <CustomAttribute>
12. Constraint Sets / States Different “resting” state that the Motion Scene will take <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
13. Transition Defines the way in which two states will be transformed between. - start / end state <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:motionInterpolator="linear" /> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
14. Transition - OnClick Add automatic onClick transition <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:motionInterpolator="linear" > <OnClick motion:clickAction="toggle" motion:target="@id/button"/> </Transition> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
15. KeyFrameSets - Define key points of a transition - A timeline of events 0 100 60 <KeyAttribute android:alpha="0" motion:framePosition="60" motion:motionTarget=“@id/button" />
16. Motion Editor Android Studio 4.0 Beta UI tool for editing & previewing MotionScene Files.
17. Let’s dive in…
18. Thank you! Rebecca Franks @riggaroo