Android Studio – MotionLayout OnSwipe spring physics stop working after transitionToStart/End()

After a lot of messing around with it, I have found the solution.

To restate what my goal is:

• I want to be able use the OnSwipe feature of my MotionLayout's transition, such that it perfectly tracks my finger and uses spring physics when I release to snap to a starting/ending state.
• I also want to be able to trigger transitionToStart/End programmatically (which in my case happens to be hooked up to a setOnClickListener on the collapsed bar, see the GIF in the original question).

For OnSwipe to track my finger correctly, it needs the motionInterpolator to be linear, but I don't want to make the programmatic triggers to be linear as well, because it doesn't look very natural. I want them to be cubic instead, so this means I will need to switch between two transitions depending on whether it was triggered programmatically or by OnSwipe.

So let's create two Transitions for this:

<MotionScene
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        android:id="@+id/programmatic_transition"
        motion:constraintSetStart="@id/collapsed"
        motion:constraintSetEnd="@id/expanded"
        motion:duration="500"
        motion:motionInterpolator="cubic(0.2,0,0,1)">
        <KeyFrameSet>
            ...
        </KeyFrameSet>
    </Transition>

    <Transition
        android:id="@+id/onswipe_transition"
        motion:constraintSetStart="@id/collapsed"
        motion:constraintSetEnd="@id/expanded"
        motion:duration="500"
        motion:motionInterpolator="linear">
        <OnSwipe
            motion:springDamping="60"
            motion:autoCompleteMode="spring"
            motion:onTouchUp="autoComplete"
            motion:dragDirection="dragUp"
            motion:touchAnchorId="@id/now_playing_anchor"
            motion:touchAnchorSide="top"
            motion:springStopThreshold="0"
            motion:springMass="2.6"
            motion:springStiffness="389.76" />
        <KeyFrameSet>
            ...
        </KeyFrameSet>
    </Transition>
...
</MotionScene>

Notice that both of them are identical transitions, both transitioning from the "collapsed" state to the "expanded" state, both with the same KeyFrameSet. The only differences are that one of them has a cubic motionInterpolator (I called this one "programmatic_transition"), and the other has a linear motionInterpolator paired with an OnSwipe tag with my desired spring physics (called "onswipe_transition").

Now that we have our two transitions, we need to programmatically switch between them, depending on whether we're currently swiping, or just using transitionToStart/End().

The latter is easy: just set the transition right before calling transitionToStart/End().

fun collapse() {
    motionLayout.setTransition(R.id.programmatic_transition)
    motionLayout.transitionToStart()
}
fun expand() {
    motionLayout.setTransition(R.id.programmatic_transition)
    motionLayout.transitionToEnd()
}

For the swipes, we'll use a transition listener to detect when a swipe is started, so that we can set the "onswipe_transition" instead.

motionLayout.setTransitionListener(object : TransitionListener {
    override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) {}
    override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
        if (dragging) {
            motionLayout.setTransition(R.id.onswipe_transition)
        }
    }
    override fun onTransitionChange(p0: MotionLayout, p1: Int, p2: Int, p3: Float) {}
    override fun onTransitionCompleted(p0: MotionLayout, p1: Int) {}
})

Notice how we only set the transition when our finger is dragging across the screen (this magical variable dragging). The last step now is to make sure dragging is true when our finger is dragging across the screen, and false when our finger has released the screen.

For that, we'll override onInterceptTouchEvent on our MotionLayout so we can keep track of this.

override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
    val isInTarget = // check if the position of the event is within the view that we want to allow to be dragged from

    return if (isInTarget || dragging) {
        when (ev.action) {
            MotionEvent.ACTION_DOWN -> {
                dragging = true
            }
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                dragging = false
            }
        }
        super.onInterceptTouchEvent(ev)
    } else {
        true
    }
}

This isInTarget value will depend on your own design.

So there we have it. I have gone nearly crazy by figuring all of this out over the past two days, but I'm pleased to say that this solution has fixed the problem flawlessly. Hopefully I'll have helped someone else out there trying to something similar!