Android- how to achieve a central scale animation on a vector image

Question

I have recently started dabbling in vector images and animations. However, I wanted to be able to scale my image uniformly in all directions once the path morph animation has completed.

I have tried applying pivotX and Y wherever I can but it doesnt seem to make a difference.

How can I achieve a central scale rather than it just expanding from left to right?

test_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/test_image"
        android:layout_gravity="center"
        android:src="@drawable/animated_logo"
        android:layout_width="200dp"
        android:layout_height="200dp" />

</FrameLayout>

animated_logo.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/closed_logo" >
    <target
        android:animation="@anim/scale"
        android:name="logo"/>
</animated-vector>

scale.anim

<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
    android:duration="1500"
    android:propertyName="scaleX"
    android:valueFrom="1.0"
    android:valueTo="10"
    android:valueType="floatType"/>
<objectAnimator
    android:duration="1500"
    android:propertyName="scaleY"
    android:valueFrom="1.0"
    android:valueTo="10"
    android:valueType="floatType"/>

closed_logo.xml

    <?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="75"
    android:viewportHeight="75"
    android:width="1000dp"
    android:height="1000dp">
    <group android:name="logo">
        <path
            android:name="box"
            android:fillColor="#DADADA"
            android:pathData="M65.5,54.4L11.1,65.5L0,11.1L54.4,0L65.5,54.4z"/>


    <path
            android:name="bottom_left"
            android:fillColor="#47A89C"
            android:pathData="M 7.1,22.2 l 15.2,36.0 l 10.4,-25.6 L 32.699997,32.6 L 7.1,22.2 L 7.1,22.2z" />

        <path
            android:name="top_left"
            android:fillColor="#564B74"
            android:pathData="M43.1,7.1L7.1,22.2l25.6,10.4L43.1,7.1z" />

        <path
            android:name="top_right"
            android:fillColor="#D2A219"
            android:pathData="M 22.3,58.2 L 58.3,43.0 l 0.0,0.0 L 32.7,32.6 L 22.3,58.2z" />

        <path
            android:name="bottom_right"
            android:fillColor="#BD6474"
            android:pathData="M 32.7,32.6 L 58.3,43.0 l 0.0,0.0 L 43.0,7.1 L 32.7,32.6z" />
    </group>
</vector>

Answer 1

I know the question is old but just in case it helps anyone.

Add pivotX and pivotY to the group you want to animate.. So for your case, change

  <group android:name="logo">

to

  <group android:name="logo" android:pivotX="37.5" android:pivotY="37.5">