How to resize TextView using MotionLayout

Question

I'm trying to create a CollapsingToolbar animation using MotionLayout.

I've successfully animated everything to behave just like a CollapsingToolbar with a high level of flexibility, which means I can easily create awesome animations without writing a large amount of code.

My problem is no matter what I tried; I can't resize the title's TextView in a natural way.

I'm currently using ConstraintLayout version 2.0.0-beta3

Trial #1

CustomAttribute of textSize

<ConstraintSet android:id="@+id/dish_fragment_expanded_set">

    ...

    <Constraint
        android:id="@+id/dish_fragment_title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dish_fragment_cover_image">

        <CustomAttribute
            app:attributeName="textSize"
            app:customFloatValue="24" />

    </Constraint>

    ...

</ConstraintSet>

<ConstraintSet android:id="@+id/dish_fragment_collapsed_set">

    ...

    <Constraint
        android:id="@id/dish_fragment_title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        app:layout_constraintBottom_toBottomOf="@+id/dish_fragment_navigation_icon"
        app:layout_constraintStart_toEndOf="@+id/dish_fragment_navigation_icon"
        app:layout_constraintTop_toTopOf="@id/dish_fragment_navigation_icon">

        <CustomAttribute
            app:attributeName="textSize"
            app:customFloatValue="16" />

    </Constraint>

    ...

</ConstraintSet>

Result

The solution above works, but the text flickers on movement, which means the animation is not smooth.

---

Trial #2

scaleX & scaleY

<ConstraintSet android:id="@+id/dish_fragment_expanded_set">

    ...

    <Constraint
        android:id="@+id/dish_fragment_title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dish_fragment_cover_image"
        android:scaleX="1"
        android:scaleY="1"/>

    ...

</ConstraintSet>

<ConstraintSet android:id="@+id/dish_fragment_collapsed_set">

    ...

    <Constraint
        android:id="@id/dish_fragment_title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        app:layout_constraintBottom_toBottomOf="@+id/dish_fragment_navigation_icon"
        app:layout_constraintStart_toEndOf="@+id/dish_fragment_navigation_icon"
        app:layout_constraintTop_toTopOf="@id/dish_fragment_navigation_icon"       
        android:scaleX="0.70"
        android:scaleY="0.70"/>

    ...

</ConstraintSet>

Result

The solution above changes the size but not the layout params, which means it breaks the constraints in a way that I can't align it correctly with the navigation icon.

---

I prefer to keep using MotionLayout because creating a smooth and detailed animation using CollapsingToolbar is a nightmare.

Answer 1

I used Trial 2 - 'scale' method and set the following textview attributes in the actual XML layout (NOT on the MotionScene XML).

android:transformPivotX="0sp"
  android:transformPivotY= Equal to 1/2 of the size of the text view in expanded mode (in sp).

This changes the pivot point around which the text view will scale.