Start motion scene programmatically

Question

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?

Pablo Cegarra · Accepted Answer · 2018-09-24T07:35:21.673

74

Finally Im doing this:

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

edited Sep 24 '18 at 07:35

answered Sep 24 '18 at 07:29

Pablo Cegarra

20,955
12
92
110

how does one add constraint attributes to the transition?? – Pemba Tamang Jan 02 '19 at 11:11
1

and could you look at this https://stackoverflow.com/questions/54002303/motion-layout-reset-on-navigating-between-activities – Pemba Tamang Jan 02 '19 at 11:12
How can I achieve reverse animation in MotionScene? – drjansari Jun 16 '20 at 20:08
6

what if the motionLayout have many transitions how to choose one ? – merwan ezio Mar 24 '21 at 01:01
@merwanezio Java: `((MotionLayout)findViewById(R.id.motionLayout)).transitionToState(R.id.end);` Kotlin `binding.motionLayout.transitionToState(R.id.end)` Where `R.id.end` is our constraintSetId. That's why that id cannot be duplicated. – Marfin. F Jul 17 '23 at 10:31

score 20 · Answer 2 · edited May 31 '20 at 10:00

20

You can also do this in your xml with

motion:autoTransition="animateToEnd"

and

motion:autoTransition="animateToStart"

edited May 31 '20 at 10:00

Muhammad Dyas Yaskur

6,914
10
48
73

answered May 30 '20 at 22:49

Nathany Attipoe

203
3
6

this is the right answer. Worked perfectly. Thanks for the answer – Bilal Bangash Apr 02 '21 at 11:25
1

Do this in your Transition xml tag in your MotionScene, something like `` NB: you can use `app` instead of `motion` or vice versa – Nathany Attipoe Aug 01 '21 at 14:25

score 8 · Answer 3 · answered Jun 10 '20 at 06:13

8

If anyone's doing this from a fragment:

Import:

import androidx.constraintlayout.motion.widget.MotionLayout;

Instantiate MotionLayout:

MotionLayout motionLayout = view.findViewById(R.id.your_motion_layout);

Transition to the end/start of motion:
```
motionLayout.transitionToStart();
```

or

    motionLayout.transitionToEnd();

answered Jun 10 '20 at 06:13

Cerulean.Source

133
1
4

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 07 '20 at 10:14

score 8 · Answer 4 · answered Oct 04 '20 at 12:25

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'

Dishant Kawatra · Answer 5 · 2019-05-15T11:55:10.467

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>

score 2 · Answer 6 · answered Jul 29 '22 at 16:21

2

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)

answered Jul 29 '22 at 16:21

Migue-GR

21
2

Ramakrishna Joshi · Answer 7 · 2021-11-15T13:11:57.900

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

score 0 · Answer 8 · answered Sep 11 '22 at 17:13

0

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

answered Sep 11 '22 at 17:13

Stanislav

191
1
5

Start motion scene programmatically

8 Answers8

Linked