Programmatically change ConstraintSet attribute in motion scene of MotionLayout

Question

I have a use case where I want to create Youtube like animation using MotionLayout. There is a sample for this animation in this repo. But the problem is that in this example they use static height for starting constraint like this which is 320dp:

<MotionScene...>

    <Transition..>

        <OnSwipe... />

        <ConstraintSet android:id="@id/start">

            <Constraint
                android:id="@id/top_image_container"
                android:layout_width="0dp"
                android:layout_height="320dp"
                motion:layout_constraintTop_toTopOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"  />

      </ConstraintSet>
  </Transition>
</MotionScene>

But my requirement to set constraint using aspect ratio. For static aspect ratio, I can set using app:layout_constraintDimensionRatio="w,16:9" in Constraint like this.

<Constraint
    android:id="@id/top_image_container"
    android:layout_width="0dp"
    android:layout_height="0dp"
    motion:layout_constraintTop_toTopOf="w,16:9"
    motion:layout_constraintTop_toTopOf="parent"
    motion:layout_constraintStart_toStartOf="parent"
    motion:layout_constraintEnd_toEndOf="parent"  />

But every video has a different aspect ratio which I am getting from API.So I want to set different aspect ratio depending upon the video. I am not able to find a way to set this programmatically in the ConstraintSet

I tried a workaround to set android:layout_height="wrap_content" and change the view aspect ratio programmatically. But it did not work and the animation was not working properly.

Any solution or suggestion would be appreciated.

score 17 · Accepted Answer · answered Feb 26 '19 at 11:17

17

What you can do is access the ConstraintSet and then set the ratio:

motionLayout.getConstraintSet(R.id.start)?.let { startConstraintSet ->
    val ratio = imageView.calculateRatio()
    startConstraintSet.setDimensionRatio(R.id.top_image_container, ratio)
    // You can set the width and height here as well
}

answered Feb 26 '19 at 11:17

jossiwolf

1,865
14
22

Hello, Will this work automatically or do I have to trigger it somewhere? Because I have changed height of the view using constraintHeight() before startPostponedEnterTransition(). But the new height it still not applied. I am trying to set height to give a parallax effect during scroll. – Sasi Kanth Apr 28 '19 at 11:45
This gets you a mutable ConstraintSet which AFAIK you will still have to set programmatically. – jossiwolf Dec 25 '19 at 20:52
how to change height for example ?! – AHmedRef Jun 12 '21 at 21:32
3

example for those looking to constrainHeight (or width): ``with(motionLayout) { getConstraintSet(R.id.start).constrainHeight(R.id.view_id, viewHeight) getConstraintSet(R.id.end).constrainHeight(R.id.view_id, viewHeight) }`` – hmac Nov 17 '21 at 14:47

Programmatically change ConstraintSet attribute in motion scene of MotionLayout

1 Answers1