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
   

   View Slide

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
   

   View Slide

3. Example usage
   https://github.com/nikhilpanju/FabFilter
   

   View Slide

4. Get Started
   

   View Slide

5. Get Started
   Include gradle dependency
   dependencies {
   implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta4'
   }
   

   View Slide

6. Change to use MotionLayout
   Change usage of ConstraintLayout to MotionLayout
   
   
   
   
   

   View Slide

7. Create motion_scene.xml
   Create empty motion_scene.xml file inside app/res/xml/ folder
   
   xmlns:motion="http://schemas.android.com/apk/res-auto">
   
   

   View Slide

8. Link scene.xml to layout
   Link the newly created motion_scene.xml to 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">
   
   

   View Slide

9. Motion Scene
   

   View Slide

10. Motion Scene
    • XML file that defines all animations for the scene
    • Can be defined programmatically
    • Contains: ConstraintSets, Transitions + KeyFrames
    

    View Slide

11. Components of Motion Scene
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

12. Constraint Sets / States
    Different “resting” state that the Motion Scene will take
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    
    
    
    
    
    

    View Slide

13. Transition
    Defines the way in which two states will be transformed between.
    - start / end state
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@+id/start"
    motion:duration="1000"
    motion:motionInterpolator="linear" />
    
    
    
    
    
    

    View Slide

14. Transition - OnClick
    Add automatic onClick transition
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@+id/start"
    motion:duration="1000"
    motion:motionInterpolator="linear" >
    motion:target="@id/button"/>
    
    
    
    
    
    
    

    View Slide

15. KeyFrameSets
    - Define key points of a transition
    - A timeline of events
    0 100
    60
    android:alpha="0"
    motion:framePosition="60"
    motion:motionTarget=“@id/button" />
    

    View Slide

16. Motion Editor
    Android Studio 4.0 Beta
    UI tool for editing & previewing MotionScene Files.
    

    View Slide

17. Let’s dive in…
    

    View Slide

18. Thank you! Rebecca Franks
    @riggaroo
    

    View Slide