Changing height and width of view in keyframes

Question

I need animation which expands a view from height and width of wrap_contents to match constraints, in my case it is to expand as much as parent allows in width but in 50% animation I want that view to first move to center without modifying its height or width.

In first constraint set i have:

<ConstraintSet android:id="@+id/base">
    <Constraint android:id="@+id/backgroundView">
        <Layout
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginEnd="12dp"
            android:layout_marginBottom="12dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <CustomAttribute
            app:attributeName="radius"
            app:customDimension="30dp" />
    </Constraint>
</ConstraintSet>

And the final one is:

<ConstraintSet
    android:id="@+id/final"
    app:deriveConstraintsFrom="@id/base">
    <Constraint android:id="@+id/backgroundView">
        <Layout
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginEnd="0dp"
            android:layout_marginBottom="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <CustomAttribute
            app:attributeName="radius"
            app:customDimension="12dp" />
    </Constraint>
</ConstraintSet>

My transition is:

<Transition
    app:constraintSetEnd="@id/final"
    app:constraintSetStart="@id/base"
    app:duration="300"
    app:motionInterpolator="easeInOut">

    <KeyFrameSet>
        <KeyPosition
            app:framePosition="50"
            app:keyPositionType="parentRelative"
            app:motionTarget="@id/backgroundView"
            app:pathMotionArc="startHorizontal"
            app:percentX="0.5"
            app:percentY="0.5" />

        <KeyAttribute
            app:framePosition="50"
            app:motionTarget="@id/backgroundView">
            <CustomAttribute
                app:attributeName="radius"
                app:customDimension="30dp" />
        </KeyAttribute>
    </KeyFrameSet>
</Transition>

With this transition I managed to move the view to center but at the same time view is expanding to match new constraints. How can I keep the view to have width and height of 60dp until frame position goes past 50?

Answer 1

Just add this key position to your keyframe set:

<KeyPosition
    app:keyPositionType="deltaRelative"
    app:framePosition="50"
    app:motionTarget="@id/backgroundView"
    app:sizePercent="0" />

By combining keyPositionType="deltaRelative" and sizePercent="0" you define that start size should remain unchanged until this key frame.