ConstraintLayout has hit beta1! 🎉 And with this new update we have a new onTouchUp for the OnSwipe handler in a Transition that we can use in a MotionLayout.

So, I've decided to write this "MotionLayout Quickie" and show the different effects that each one has. If you don't know what a quickie is then go ask your parents, if you do then why are you reading this post?

I assume you have some knowledge of MotionLayout already. If you don't then checkout these posts from Nicolas Roard.

onTouchUp allows us to set how we want our MotionLayout transition to play out after we've finished swiping. There are 6 types. In our example we'll be swiping up and down, so that's what I'll be using as we go along. Apply it whatever direction you like in your MotionLayout. All we need to do is add the onTouchUp attribute to the OnSwipe handler in our MotionScene

<Transition
    android:id="@+id/startToEnd"
    app:constraintSetEnd="@+id/end"
    app:constraintSetStart="@+id/start">
    <OnSwipe
        app:dragDirection="dragDown"
        app:onTouchUp="stop"
        app:touchAnchorId="@id/bookCover"
        app:touchAnchorSide="bottom"
        app:touchRegionId="@id/bookCover" />
</Transition>

Let's take a look at what they look like.

autoComplete

autoComplete is likely going to be the default that you use. If we swipe with enough velocity our Transition from start to end will finish automatically. The same happens going in reverse, if we swipe back with enough velocity it will automatically go from end to start. Let's see an example:

Example of using autoComplete

autoCompleteToEnd

autoCompleteToEnd will automatically transition to the end if swipe down even a little. It will not automatically go back to the start though if we swipe back up, unless we swipe it all the way back to the start.

Example of using autoCompleteToEnd

autoCompleteToStart

autoCompleteToStart is exactly the opposite of autoCompleteToEnd. It will not automatically transition to the end if swipe down unless we swipe all the way down. It will however automatically go back to the start though if we swipe back up even a little.

Example of using autoCompleteToStart

stop

stop is exactly what you'd think. The transition will stop depending on how much you swipe and won't automatically finish.

Example of using stop

decelerate

Right now decelerate seems to have an issue. When close enough to the start or end of the Transition it will snap into position. If you don't swipe too hard though the Transition does seem behave correctly and decelerate. This applies when transitioning to both you start AND end state. I've created an issue here if you want to track it.

Example of using stop

decelerateAndComplete

Exactly the same as decelerate except the Transition should complete as well. It too seems to be suffering some issues with snapping to either the start or end state. If you manage to get your swipe just right you can see the real intention though. This applies when transitioning to both you start AND end state.

Example of using stop

And that's it for onTouchUp! If decelerate gets fixed I'll be sure to update this post with new examples and clarifications.

I've created a demo activity so you can easily play around with these modes yourself here: https://github.com/mikescamell/Loco-MotionLayout

Is there another feature you like to see in a MotionLayout Quickie? Think I've screwed up? Let me know on Twitter!

Last but not least, check out androiddev.io for the latest blog posts from Android developers around the world!