Exploring MotionLayout: Touch Regions
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 touchestouchAnchorSide: The side on the touch anchor for touches to be tracked fromdragDirection: The direction to be swiped in
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!
