Exploring MotionLayout: Touch Regions

Jossi Wolf
Apr 27, 2019 · 2 min read
A cute samoyed, Photo by Javier Esteban on Unsplash

MotionLayout Alpha 5 introduces touch regions for triggering transitions. This article explores the how and why.

Defining an OnSwipe or OnClick event which triggers the transition is fairly straightforward with just a few attributes being needed:

  • touchAnchorId : The touch anchor to be used for tracking touches
  • touchAnchorSide : The side on the touch anchor for touches to be tracked from
  • dragDirection : The direction to be swiped in
Touch Tracking without Touch Regions

Before Alpha 5, MotionLayout tracked touches on the whole MotionLayout and then used the provided touchAnchorId to calculate the progress of the transition, based on the touchAnchorSide . This didn’t cover use cases where you would want to track only swipes in a specific region or on specific views. To solve this, MotionLayout Alpha 5 introduces a new feature called Touch Regions.

Touch Regions

Using touch regions is as simple as specifying the dragDirection attribute on the OnSwipe transition like in the code sample above.

You can even go crazy and have multiple transitions with different touch regions like in the video above.

Using groups and referencing a groups’ ID should also work as they are just another view.

Touch Regions are a very welcome and useful addition to MotionLayout — and they’re so easy to use! You can find the complete example in this gist.

If you have any questions, please don’t hesitate to reach out!

Thanks to Juhani Lehtimäki and Sean McQuillan for reviewing!

Snapp Mobile

Snapp Mobile Engineering and Design Blog

Thanks to Juhani Lehtimäki

Jossi Wolf

Written by

Freelance Android Developer from Hamburg, Germany. I like Kotlin, Animations and Rabbits! github.com/jossiwolf | speakerdeck.com/jossiwolf

Snapp Mobile

Snapp Mobile Engineering and Design Blog

More From Medium

More from Snapp Mobile

More from Snapp Mobile

More from Snapp Mobile

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade