How to set pivot point for scale animation in MotionLayout

Question

I'm trying to set pivotX and pivotY in the motion.

<Constraint android:id="@id/favChatRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:alpha="1"
        android:pivotY="0.0"
        android:pivotX="0.0"
        android:scaleY="1"
        android:scaleX="1"/>

And in the end scene:

<Constraint android:id="@id/favChatRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:alpha="1"
        android:pivotY="0.0"
        android:pivotX="0.0"
        android:scaleY="0"
        android:scaleX="0"/>

But it looks like pivot point doesn't have any effect. I'm still getting scale animation with pivot in the center of view. Is there any way how to fix it?

Have you tried setting `android:transformPivotX` and `android:transformPivotY` properties on the view itself? — vitalnik, Jan 30 '20 at 16:00

score 4 · Answer 1 · answered Feb 09 '20 at 22:44

I found the solution to change the text size during swiping, but I guess you can apply the same for general motion layout transitions. Here is my scene description:

<Transition
    motion:constraintSetStart="@+id/start"
    motion:constraintSetEnd="@+id/end"
    motion:duration="1000">
    <OnSwipe
        motion:touchAnchorId="@+id/wv_file_content"
        motion:touchRegionId="@+id/v_web_view_touch_region"
        motion:touchAnchorSide="bottom"
        motion:dragDirection="dragUp" />

    <KeyFrameSet>
        <KeyAttribute
            android:scaleX="1.5"
            android:scaleY="1.5"
            motion:framePosition="100"
            motion:motionTarget="@+id/TEXTVIEW"
            />
    </KeyFrameSet>
</Transition>

This is so far what you already came up with. You cannot set the pivot point directly in the scene description like you asked, but you can set it indirectly in the original layout.xml like @vitalnik described.

The following has to be set directly in the layout.xml! Not in the scene description xml.

 <TextView
    android:id="@+id/TEXTVIEW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:transformPivotX="0sp"
    android:transformPivotY="9sp" />

This will set the pivot point in a way that scaling keeps the text left aligned. How did I came up with 9sp? I got this calculation from here

Equal to 1/2 of the size of the text view in scaled mode (in sp)

So my TextView 12sp originally. Scaled by factor 1.5 means that it is 18sp in scaled mode. Half of that is 9sp which is the value I use for android:transformPivotY

Using this calculation method you can also keep it right aligned or whatever you want.

How to set pivot point for scale animation in MotionLayout

1 Answers1