56

I have a motion layout with this layoutDescription: app:layoutDescription="@xml/scene"

scene.xml

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

    <Transition
        motion:constraintSetStart="@layout/view_home_card_start"
        motion:constraintSetEnd="@layout/view_home_card_end"
        motion:duration="1000">
        <OnSwipe
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="left"
            motion:dragDirection="dragLeft" />
    </Transition>

</MotionScene>

I think that the xml of view_home_card_start and view_home_card_end is irrelevant.

How can I call this animation programatically?

8 Answers 8

73

Finally Im doing this:

((MotionLayout)findViewById(R.id.motionLayout)).transitionToEnd();
((MotionLayout)findViewById(R.id.motionLayout)).transitionToStart();
4
19

You can also do this in your xml with

motion:autoTransition="animateToEnd"

and

motion:autoTransition="animateToStart"
2
  • this is the right answer. Worked perfectly. Thanks for the answer Apr 2, 2021 at 11:25
  • Do this in your Transition xml tag in your MotionScene, something like <Transition app:autoTransition="animateToEnd" /> NB: you can use app instead of motion or vice versa Aug 1, 2021 at 14:25
8

If anyone's doing this from a fragment:

  1. Import:

    import androidx.constraintlayout.motion.widget.MotionLayout;
    
  2. Instantiate MotionLayout:

    MotionLayout motionLayout = view.findViewById(R.id.your_motion_layout);
    
  3. Transition to the end/start of motion:

    motionLayout.transitionToStart();
    

or

    motionLayout.transitionToEnd();
1
  • 1
    you may get a null pointer exception in a fragment. I suggest to use a view model fro that. declare a view state object (a sealed class) in view model and observe it from activity so you can call transitionToStart() and transitionToEnd() there safe. and instead of getting motion layout from findViewById in fragment which is dangerous for getting null pointer exeption you can change view state value of view model from fragment instead
    – Reza
    Aug 7, 2020 at 10:14
8

We can simply do like this motion_layout.transitionToEnd()

But on Activity resumed, It'll start our animation so fast that we may miss the few or the whole animation. so I would suggest to add some delay like.

GlobalScope.launch (Dispatchers.IO){
        delay(1000)
        withContext(Dispatchers.Main){
            motion_layout.transitionToEnd()
        }
    }

Also you'll need to add Coroutines dependency if not added.

implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.9'

0
2
In Latest Update of Constraint **2.0.0-beta1** Layout There are Public methods add in motion layout 
        you can get these methods with the help of motionlayout id 
    **motionLayout** 

     1. public void setProgress (float pos) 
     2. public void setTransition (int
           beginId,int endId)  
     3. public void setTransitionDuration (int
               milliseconds)  public void setTransitionListener
               (MotionLayout.TransitionListener listener)

     4. public void setState (int
               id,int screenWidth, 
                             int screenHeight)

     5. if(wantShowUi)
            {
                newUserActivityBinding.coordinatorLayout.transitionToStart();
            }
            else
            {
                newUserActivityBinding.coordinatorLayout.transitionToEnd();
            }

      <android.support.constraint.motion.MotionLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:id="@+id/motionLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layoutDescription="@xml/motion_scene_01"
                tools:showPaths="true">

            <View
                    android:id="@+id/button"
                    android:background="@color/colorAccent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:soundEffectsEnabled="false"
                    tools:layout_editor_absoluteY="361dp"
                    tools:layout_editor_absoluteX="61dp"/>


        </android.support.constraint.motion.MotionLayout>
1

If anyone has more than 2 states (start and end), then you can programatically call the transitionToState() method wich recieves the state's id

Example:

binding.yourMotionLayoutId.transitionToState(R.id.yourStatusId)
0

I am making use of transitionToState() method to transition between states on some action.

fun navigateToPayment() {
    binding?.motionLayoutContainer?.transitionToState(R.id.statePayment)
}

fun navigateToShipping() {
    binding?.motionLayoutContainer?.transitionToState(R.id.stateShipping)
}

Also using the same method to handle back press in Activity.

override fun onBackPressed() {
    binding?.motionLayoutContainer?.currentState?.let{
        when(it) {
            R.id.paymentState -> {
                //go back to shipping
                binding?.layoutSheet?.transitionToState(R.id.shippingState)
            }
            R.id.shippingState -> {
                //go back to cart
                binding?.layoutSheet?.transitionToState(R.id.cartState)
            }
            else -> {
                Toast.makeText(this, "Invalid Transition State", Toast.LENGTH_SHORT).show()
            }
        }
    } ?: run{
        //finish activity
        super.onBackPressed()
    }
}
0

If you use kotlin and binding system you don't even need create motion object just write so: binding.root.transitionToEnd()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.