MotionLayout: MotionScene OnClick overrides setOnClickListener

Question

I'm just starting to play with MotionLayout. I have defined an activity layout using MotionLayout that uses a MotionScene to hide and show a view.

The MotionScene transition looks like this:

<Transition
    app:constraintSetStart="@id/collapsed"
    app:constraintSetEnd="@id/expanded">

    <OnClick app:target="@id/nextButton"  />

</Transition>

Troublie is, nothing happens when I programmatically add a ClickListener to the button:

nextButton.setOnClickListener {
        //do some stuff
    }

This listener is completely ignored but the transition (view expanding/collapsing) is triggered with every click. I have seen where someone extends MotionLayout to handle click events but it seems like there might be an easier way to add another click listener for the button.

Question 1: Is there a way to add a ClickListener to the target of an OnClick in a MotionLayout transition?

Question 2: Is there a way to make the transition a one time only event? The desired result is that if the view is collapsed when the button is clicked, then the view expands, but if it's already expanded then it stays expanded.

Lastly, I'm using the namespace "http://schemas.android.com/apk/res-auto" and the docs clearly state that target and mode are attributes for OnClick. But the project won't compile when I use mode because it can't be found in that namespace.

Question 3: Am I using the correct namespace?

Answer 1

1. Not that I can find.
2. I found success using the clickAction attribute with the "transitionToEnd" value. This will make it so that the motionlayout cannot go back to the startConstraintSet.

<OnClick
      motion:targetId="@+id/rateUsButton"
      motion:clickAction="transitionToEnd"/>

3. That is the namespace I am using, as well as the namespaced used in examples I've seen.

Just ran into the same issue today. I was able to intercept the click by using setOnTouchListener instead of setOnClickListener in my code.

rateUsButton.setOnTouchListener { _, event ->
    if (event.action == MotionEvent.ACTION_UP) {
        // handle the click
    }
    false
}

I know this solution isn't the best but I didn't find another option. Returning false means the touch was not handled here and thus will be handled by the motion layout.

Answer 2

You can also just handle the click programmatically from the beginning by removing

 <OnClick app:target="@id/nextButton"  />

altogether. Also it is easy to see whether or not your view is expanded by checking the progress of your transition. So you can programmatically handle it in your java/kotlin file with

yourButton.setOnClickListener {
    if (yourMotionLayoutId.progress == 0.0)
        yourMotionLayoutId.transitionToEnd
}

This way, it will check if the transition is in the state where it has not occurred (progress will be 0.0) and transition, otherwise, it will do nothing.

Answer 3

I found a cleaner and more correct way to do it, you can do this .... OnClick directly from view ..

Note: It does not work with: <OnSwipe/> only <OnClick/>

PD. I'm sorry, I'm from Mexico and I'm using the translator

<androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/play_pause_button_collapsed"
        android:layout_width="30dp"
        android:layout_height="50dp"
        app:srcCompat="@drawable/ic_play_arrow_black_48dp"
        android:layout_marginTop="25dp"
        android:elevation="2dp"
        android:alpha="0"

        android:onClick="handleAction"

        tools:ignore="ContentDescription" />



fun handleAction(view: View) { 
   //handle click
}