androidandroid-drawablelinear-gradientsandroid-vectordrawableradial-gradients

Is it possible to create a multi color radial gradient using xml vector drawables?


I've seen how this is done for linear gradients, like this answer: can we make multi color gradient in xml for android background?

Every time I try this for a radial gradient the viewport fails to render, so I thought maybe my syntax was wrong since using the aapt:attr tag does not give any autocomplete suggestions. I would deeply appreciate any help please.


Solution

  • Yes, it's possible to create a vector drawable with multi-color radial gradient.

    The easiest way is probably to import an existing vector asset (such as SVG) using the Vector Studio tool.

    Here's an example drawable:

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:aapt="http://schemas.android.com/aapt"
        android:width="100dp"
        android:height="100dp"
        android:viewportWidth="100"
        android:viewportHeight="100">
      <path android:pathData="M50,50m-50,0a50,50 0,1 1,100 0a50,50 0,1 1,-100 0">
        <aapt:attr name="android:fillColor">
          <gradient 
              android:centerX="50"
              android:centerY="50"
              android:gradientRadius="50"
              android:type="radial">
            <item android:offset="0" android:color="#FFFF0000"/>
            <item android:offset="0.33" android:color="#FF008000"/>
            <item android:offset="0.66" android:color="#FF0000FF"/>
            <item android:offset="1" android:color="#FFFF0000"/>
          </gradient>
        </aapt:attr>
      </path>
    </vector>