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
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 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:
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.
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.
stop is exactly what you'd think. The transition will stop depending on how much you swipe and won't automatically finish.
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.
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.
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!