Getting Started with MotionLayout - Async Android 2020

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.

2a37bf1e025cc1523124774c760df91a?s=128

Rebecca Franks

April 24, 2020
Tweet

Transcript

  1. 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
  2. 6.

    Change to use MotionLayout Change usage of ConstraintLayout to MotionLayout

    <!-- before: ConstraintLayout --> <androidx.constraintlayout.widget.ConstraintLayout .../> <!-- after: MotionLayout --> <androidx.constraintlayout.motion.widget.MotionLayout .../>
  3. 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>
  4. 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>
  5. 10.

    Motion Scene • XML file that defines all animations for

    the scene • Can be defined programmatically • Contains: ConstraintSets, Transitions + KeyFrames
  6. 11.
  7. 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>
  8. 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>
  9. 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>
  10. 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" />
  11. 16.