Exploring MotionLayout: Touch Regions

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.

Conclusion

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!