Mehdi Haghgoo
Mehdi Haghgoo

Reputation: 3484

How to Animate A Gradient using AnimatedVectorDrawables?

At 4:40 of Draw Me A Rainbow talk by Nick Butcher at Android Dev Summit 2018, he mentions animating a gradient. He talks about using repeat tileMode for a gradient and creating a rainbow like effect as below:

gradient_one.xml:

    <gradient xmlns:android="http://schemas.android.com/apk/res/android" android:type="radial"
          android:startY="0"
          android:startX="0"
          android:centerX="5"
          android:centerY="5"
          android:gradientRadius="1"
          android:tileMode="repeat"
>
    <item android:color="#E91E63" android:offset="0.1"/>
    <item android:color="#E91E63" android:offset="0.3"/>
    <item android:color="#3F51B5" android:offset="0.3"/>
    <item android:color="#3F51B5" android:offset="0.6"/>
    <item android:color="#03A9F4" android:offset="0.6"/>
    <item android:color="#03A9F4" android:offset="0.9"/>
    <item android:color="#8BC34A" android:offset="0.1"/>
    </gradient>

I am having a hard time how he animates the vector drawable using gradients. I already tried creating AnimatedVectorDrawables using animators that move from one of the above colors to another, but it did not work.

enter image description here

Vector:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:height="300dp"
        android:width="200dp"
        android:viewportHeight="24"
        android:viewportWidth="24" >
    <group
            android:name="rotationGroup"
            android:pivotX="5"
            android:pivotY="5"
             >
        <path
                android:name="v"
                android:strokeColor="@color/colorPrimary"
                android:fillColor="@color/gradient_one"
                android:pathData="M0,10 L0,0 10,0 10,10" />
    </group>
</vector>

avd_gradient.xml:

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/my_vector">

    <target android:animation="@animator/color_animator" android:name="rotationGroup"/>

</animated-vector>

color_animator.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator android:propertyName="fillColor"
                    android:repeatCount="infinite"
                    android:duration="@android:integer/config_longAnimTime"
                    android:valueType="colorType"
                    android:valueFrom="#C62828"
                    android:valueTo="#6A1B9A"
    />
</set>

Kotlin code to start animating AVD background of a view:

 val rootVG = findViewById<ViewGroup>(R.id.root)

val animatedGradient = rootVG.background as AnimatedVectorDrawable

animatedGradient.start()

Upvotes: 3

Views: 942

Answers (0)

Related Questions