$30 off During Our Annual Pro Sale. View Details »

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.

Rebecca Franks

April 24, 2020
Tweet

More Decks by Rebecca Franks

Other Decks in Programming

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