Start motion scene programmatically

Viewed 25393

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

Finally Im doing this:

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

You can also do this in your xml with

motion:autoTransition="animateToEnd"

and

motion:autoTransition="animateToStart"

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();

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'

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>

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)

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()
    }
}

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

Related