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
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.
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!