Multiple Motion layout animating dynamically

Question

I have Two motion layouts in an XML. One is a parent, one is its child.

While animating the start animation from XML , it works . But when the same motion layout is dynamically started with code the view does not get display but the animation in the log shows it is completed. What might be the issue?

   @Override
            public void onTransitionCompleted(MotionLayout motionLayout, int currentId) {
                switch (currentId) {
                    case R.id.endHomeLaunch:
                        motionLayout.setTransition(R.id.expanded, R.id.collapsed);
                        motionLayout.setProgress(0);
                        motionLayoutFloatButton.setTransition(R.id.startFloat,R.id.endFloat);
                        motionLayoutFloatButton.setTransitionDuration(1000);
                        motionLayoutFloatButton.transitionToEnd();

                        break;

As my parent layout has swipe animation I cant add an on-click animation as this adds bug in layout animation . The only option was to create two separate motion layout scene.

score 0 · Answer 1 · answered Jan 22 '21 at 14:34

0

This is usually caused by motion layouts inability to queue properly on the main thread. I've just resolved an issue like that and the solution seems to be coroutines i.e in a fragment, you would do:

 lifecycleScope.launchWhenStarted {
   delay(50) //pause to allow other views to initialize
   motionLayout.setTransition(R.id.myTransition)
   motionLayout.transitionToEnd()
 }

answered Jan 22 '21 at 14:34

D Lad

146
8

You can nest MotionLayouts. eg ` ` – D Lad Jun 20 '21 at 14:01

score 0 · Answer 2 · answered Aug 31 '21 at 10:15

You can do something like this :

 Handler(Looper.getMainLooper()).postDelayed({
            motion_splash_parent.setTransition(R.id.transition_splash_first)
            motion_splash_parent.transitionToEnd()
        }, 1000)

        motion_splash_parent.setTransitionListener(object : MotionLayout.TransitionListener {
            override fun onTransitionCompleted(p0: MotionLayout?, p1: Int) {

                when (motion_splash_parent.currentState) {
                    R.id.middle -> {
                        motion_splash_parent.setTransition(R.id.transition_splash_second)
                        motion_splash_parent.transitionToEnd()
                    }
                    R.id.end -> {
                      // Do whatever you want 
                    }
                }

            }

            override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {}
            override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {}
            override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) {}
        })

And xml scene for this is:

   <!-- START TO MIDDLE -->
    <Transition
        android:id="@+id/transition_splash_first"
        motion:constraintSetEnd="@+id/middle"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000"/>


    <!-- MIDDLE TO END -->
    <Transition
        android:id="@+id/transition_splash_second"
        motion:constraintSetStart="@+id/middle"
        motion:constraintSetEnd="@+id/end"
        motion:duration="2000"/>

Multiple Motion layout animating dynamically

2 Answers2