Save 37% off PRO during our Black Friday Sale! »

How to Motion Editor - Report from Android Dev Summit 2019

6eecc52120fba9d87d982684211182ec?s=47 mochico
November 15, 2019

How to Motion Editor - Report from Android Dev Summit 2019



November 15, 2019


  1. How to Motion Editor Report from Android Dev Summit 2019

  2. About me mochico(@_mochicon_) Android / Java / Kotlin Techbooster /

  3. Memory of Android Dev Summit 2019

  4. What's New in Android Studio Design Tools

  5. What is Motion Editor

  6. What is the MotionLayout Subclass of ConstraintLayout Define motions by

    XML Included in ConstraintLayout2.0
  7. How to use Motion Editor

  8. Prepare to use Motion Editor Android Studio 4.0+ implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta3'

    classpath ''
  9. None
  10. layout.xml <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="" xmlns:app="" xmlns:tools="" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/fragment_first_scene" tools:context=".FirstFragment">

  11. fragment_first_scene.xml <MotionScene xmlns:android="" xmlns:motion=""> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <KeyFrameSet> </KeyFrameSet>

    </Transition> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
  12. Motion Scene

  13. None
  14. start to end

  15. None
  16. Action Icons Create ConstraintSet Create Transition Create Handler

  17. Create from Action Icons

  18. Create Handler <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <OnClick motion:targetId="@+id/imageButton" /> </Transition>

  19. None
  20. KeyFrames KeyPosition KeyAttribute KeyTrigger KeyCycle KeyTimeCycle

  21. KeyCycle <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <KeyFrameSet> <KeyCycle motion:motionTarget="@+id/imageButton" motion:framePosition="0" motion:wavePeriod="1"

    android:scaleX="0.3" motion:waveOffset="1" />
  22. Selection Panel

  23. None
  24. Attributes Select Transition Select KeyFrame

  25. demo (if I can)

  26. Wrap up Motion Editor Cool visualization for KeyFrames Not for

    CoordinatorLayout, DrawerLayout etc Easy to add properties for animation as XML AS4.0 still canary, Motion Editor still beta
  27. References What's New in Android Studio Design Tools (Android Dev

    Summit '19) - YouTube : https:// Defining motion paths in MotionLayout - Google Developers - Medium : google-developers/defining-motion-paths-in-motionlayout-6095b874d37 Manage motion and widget animation with MotionLayout : training/constraint-layout/motionlayout googlearchive/android-ConstraintLayoutExamples: Migrated: : android-ConstraintLayoutExamples Animation with MotionLayout : layout/#0 DroidKaigi 2019 - Deep dive into MotionLayout / thagikura, John Hoford, Nicolas Roard - YouTube : Thank you!