androidandroid-studioandroid-animationanimatedvectordrawable

Can gradient color in animated drawable XML?


I used gradient color in vectors. It's working. I want to use gradient color on animated vectors but it is cannot be working. I can't see a problem in my XML code. I don't know if this possible or should I use another method. If it's not possible, I want to know why.

Animated drawable file.

<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
    <vector
        android:name="vector"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24"
        android:viewportHeight="24">
        <path
            android:name="path"
            android:pathData="M 1.218 7.957 L 1.218 15.783 L 22.779 15.783 L 22.779 7.957">
            <aapt:attr name="android:fillColor">
                <gradient
                    android:endX="0.0"
                    android:endY="50.0"
                    android:startX="24.0"
                    android:startY="50.0"
                    android:type="linear">
                    <item android:color="#FF70C8BB" android:offset="0.0"/>
                    <item android:color="#FF0964AE" android:offset="1.0"/>
                </gradient>
            </aapt:attr>
        </path>
    </vector>
</aapt:attr>
<target android:name="path">
    <aapt:attr name="android:animation">
        <set>
            <objectAnimator
                android:propertyName="pathData"
                android:duration="500"
                android:valueFrom="M 1.043 0.783 L 1.043 22.957 L 22.957 22.957 L 22.957 0.783"
                android:valueTo="M 7.957 0.783 L 7.957 22.957 L 15.913 22.957 L 15.913 0.783"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="500"
                android:duration="500"
                android:valueFrom="M 7.957 0.783 L 7.957 22.957 L 15.913 22.957 L 15.913 0.783"
                android:valueTo="M 7.957 7.957 L 7.957 15.783 L 15.913 15.783 L 15.913 7.957"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="1000"
                android:duration="500"
                android:valueFrom="M 7.957 7.957 L 7.957 15.783 L 15.913 15.783 L 15.913 7.957"
                android:valueTo="M 1.043 7.957 L 1.043 15.783 L 22.957 15.783 L 22.957 7.957"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="1500"
                android:duration="500"
                android:valueFrom="M 1.043 7.957 L 1.043 15.783 L 22.957 15.783 L 22.957 7.957"
                android:valueTo="M 1.043 0.783 L 1.043 22.957 L 22.957 22.957 L 22.957 0.783"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </set>
    </aapt:attr>
</target>


Solution

  • You could fake it. Fade out your path while fading in another path with the other gradient you want, like so:

    1. make a copy of path: path2
    2. set the other gradient in path2
    3. set path2 fillAlpha to 0
    4. make a duplicate of the path animations where you target path2
    5. add a fillAlpha objectAnimation to both animations sets where fillAlpha goes from 1 to 0 and path2 fillAlpha goes from 0 to 1 instead

    Ex:

    <objectAnimator
        android:propertyName="fillAlpha"
        android:duration="2000"
        android:valueFrom="1"
        android:valueTo="0"
        android:valueType="floatType"
        android:interpolator="@android:interpolator/fast_out_slow_in"/>
    

    Your full code would look something like this:

    <animated-vector
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:aapt="http://schemas.android.com/aapt">
        <aapt:attr name="android:drawable">
            <vector
                android:name="vector"
                android:width="24dp"
                android:height="24dp"
                android:viewportWidth="24"
                android:viewportHeight="24">
                <path
                    android:name="path"
                    android:pathData="M 1.218 7.957 L 1.218 15.783 L 22.779 15.783 L 22.779 7.957">
                    <aapt:attr name="android:fillColor">
                        <gradient
                            android:endX="0.0"
                            android:endY="50.0"
                            android:startX="24.0"
                            android:startY="50.0"
                            android:type="linear">
                            <item android:color="#FF70C8BB" android:offset="0.0"/>
                            <item android:color="#FF0964AE" android:offset="1.0"/>
                        </gradient>
                    </aapt:attr>
                </path>
                <path
                    android:name="path2"
                    android:fillAlpha="0"
                    android:pathData="M 1.218 7.957 L 1.218 15.783 L 22.779 15.783 L 22.779 7.957">
                    <aapt:attr name="android:fillColor">
                        <gradient
                            android:endX="0.0"
                            android:endY="50.0"
                            android:startX="24.0"
                            android:startY="50.0"
                            android:type="linear">
                            <item android:color="#FFFFC8BB" android:offset="0.0"/>
                            <item android:color="#FF0964FF" android:offset="1.0"/>
                        </gradient>
                    </aapt:attr>
                </path>
            </vector>
        </aapt:attr>
        <target android:name="path">
            <aapt:attr name="android:animation">
                <set>
                    <objectAnimator
                        android:propertyName="pathData"
                        android:duration="500"
                        android:valueFrom="M 1.043 0.783 L 1.043 22.957 L 22.957 22.957 L 22.957 0.783"
                        android:valueTo="M 7.957 0.783 L 7.957 22.957 L 15.913 22.957 L 15.913 0.783"
                        android:valueType="pathType"
                        android:interpolator="@android:interpolator/fast_out_slow_in"/>
                    <objectAnimator
                        android:propertyName="pathData"
                        android:startOffset="500"
                        android:duration="500"
                        android:valueFrom="M 7.957 0.783 L 7.957 22.957 L 15.913 22.957 L 15.913 0.783"
                        android:valueTo="M 7.957 7.957 L 7.957 15.783 L 15.913 15.783 L 15.913 7.957"
                        android:valueType="pathType"
                        android:interpolator="@android:interpolator/fast_out_slow_in"/>
                    <objectAnimator
                        android:propertyName="pathData"
                        android:startOffset="1000"
                        android:duration="500"
                        android:valueFrom="M 7.957 7.957 L 7.957 15.783 L 15.913 15.783 L 15.913 7.957"
                        android:valueTo="M 1.043 7.957 L 1.043 15.783 L 22.957 15.783 L 22.957 7.957"
                        android:valueType="pathType"
                        android:interpolator="@android:interpolator/fast_out_slow_in"/>
                    <objectAnimator
                        android:propertyName="pathData"
                        android:startOffset="1500"
                        android:duration="500"
                        android:valueFrom="M 1.043 7.957 L 1.043 15.783 L 22.957 15.783 L 22.957 7.957"
                        android:valueTo="M 1.043 0.783 L 1.043 22.957 L 22.957 22.957 L 22.957 0.783"
                        android:valueType="pathType"
                        android:interpolator="@android:interpolator/fast_out_slow_in"/>
                    <objectAnimator
                        android:propertyName="fillAlpha"
                        android:duration="2000"
                        android:valueFrom="1"
                        android:valueTo="0"
                        android:valueType="floatType"
                        android:interpolator="@android:interpolator/fast_out_slow_in"/>
                </set>
            </aapt:attr>
        </target>
        <target android:name="path2">
            <aapt:attr name="android:animation">
                <set>
                    <objectAnimator
                        android:propertyName="pathData"
                        android:duration="500"
                        android:valueFrom="M 1.043 0.783 L 1.043 22.957 L 22.957 22.957 L 22.957 0.783"
                        android:valueTo="M 7.957 0.783 L 7.957 22.957 L 15.913 22.957 L 15.913 0.783"
                        android:valueType="pathType"
                        android:interpolator="@android:interpolator/fast_out_slow_in"/>
                    <objectAnimator
                        android:propertyName="pathData"
                        android:startOffset="500"
                        android:duration="500"
                        android:valueFrom="M 7.957 0.783 L 7.957 22.957 L 15.913 22.957 L 15.913 0.783"
                        android:valueTo="M 7.957 7.957 L 7.957 15.783 L 15.913 15.783 L 15.913 7.957"
                        android:valueType="pathType"
                        android:interpolator="@android:interpolator/fast_out_slow_in"/>
                    <objectAnimator
                        android:propertyName="pathData"
                        android:startOffset="1000"
                        android:duration="500"
                        android:valueFrom="M 7.957 7.957 L 7.957 15.783 L 15.913 15.783 L 15.913 7.957"
                        android:valueTo="M 1.043 7.957 L 1.043 15.783 L 22.957 15.783 L 22.957 7.957"
                        android:valueType="pathType"
                        android:interpolator="@android:interpolator/fast_out_slow_in"/>
                    <objectAnimator
                        android:propertyName="pathData"
                        android:startOffset="1500"
                        android:duration="500"
                        android:valueFrom="M 1.043 7.957 L 1.043 15.783 L 22.957 15.783 L 22.957 7.957"
                        android:valueTo="M 1.043 0.783 L 1.043 22.957 L 22.957 22.957 L 22.957 0.783"
                        android:valueType="pathType"
                        android:interpolator="@android:interpolator/fast_out_slow_in"/>
                    <objectAnimator
                        android:propertyName="fillAlpha"
                        android:duration="2000"
                        android:valueFrom="0"
                        android:valueTo="1"
                        android:valueType="floatType"
                        android:interpolator="@android:interpolator/fast_out_slow_in"/>
                </set>
            </aapt:attr>
        </target>
    </animated-vector>