Draw a Circular Rainbow Vector Drawable Android

Question

Below piece of code draws a Rainbow in a rectangular fashion.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="360dp"
    android:height="208dp"
    android:viewportWidth="360"
    android:viewportHeight="208">
    <path android:pathData="M0,0 L360,0 L360,208 L0,208 Z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="360"
                android:endY="208"
                android:startX="0"
                android:startY="0"
                android:type="linear"
                android:tileMode="repeat">
                <item
                    android:color="#FF0064"
                    android:offset="0.0" />
                <item
                    android:color="#FF0064"
                    android:offset="0.111111" />
                <item
                    android:color="#FF7600"
                    android:offset="0.111111" />
                <item
                    android:color="#FF7600"
                    android:offset="0.222222" />
                <item
                    android:color="#FFD500"
                    android:offset="0.222222" />
                <item
                    android:color="#FFD500"
                    android:offset="0.3333333" />
                <item
                    android:color="#8CFE00"
                    android:offset="0.3333333" />
                <item
                    android:color="#8CFE00"
                    android:offset="0.444444" />
                <item
                    android:color="#00E86C"
                    android:offset="0.444444" />
                <item
                    android:color="#00E86C"
                    android:offset="0.555555" />
                <item
                    android:color="#00F4F2"
                    android:offset="0.555555" />
                <item
                    android:color="#00F4F2"
                    android:offset="0.666666" />
                <item
                    android:color="#00CCFF"
                    android:offset="0.666666" />
                <item
                    android:color="#00CCFF"
                    android:offset="0.777777" />
                <item
                    android:color="#70A2FF"
                    android:offset="0.777777" />
                <item
                    android:color="#70A2FF"
                    android:offset="0.888888" />
                <item
                    android:color="#A96CFF"
                    android:offset="0.888888" />
                <item
                    android:color="#A96CFF"
                    android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

Can anybody know how to make this to a circular fashion rainbow ? Any help would really be appreciated. Thanks in advance.

Answer 1

Might be a little late but I came across the exact same challenge and was able to pull off after watching this video (highly recommended btw). I came up with this solution was by putting searching for a vector pathData for a circular view of 21dp size, split the gradient into layers just like you did but the key was to slightly overlap the colours by repeating them back to back which creates the blurry effect from leaking the colours into the next. And lastly, I used gradient type sweep which makes them go around the given shape/path.

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="21dp"
android:height="21dp"
android:viewportWidth="21"
android:viewportHeight="21">
    <path
    android:pathData="M10.4212,10.5774m-10.4212,0a10.4212,10.4212 0,1 1,20.8424 0a10.4212,10.4212 0,1 1,-20.8424 0">
    <aapt:attr name="android:fillColor">
        <gradient
            android:centerX="10.5"
            android:centerY="10.5"
            android:type="sweep">
            <item
                android:color="#FFFFC42C"
                android:offset="0.0" />
            <item
                android:color="#FFFFC42C"
                android:offset="0.1" />
            <item
                android:color="#FFEF49DE"
                android:offset="0.2" />
            <item
                android:color="#FFEF49DE"
                android:offset="0.3" />
            <item
                android:color="#FFEF49DE"
                android:offset="0.4" />
            <item
                android:color="#FFB763DF"
                android:offset="0.5" />
            <item
                android:color="#FFB763DF"
                android:offset="0.5" />
            <item
                android:color="#FF6789DF"
                android:offset="0.6" />
            <item
                android:color="#FF6789DF"
                android:offset="0.7" />
            <item
                android:color="#FFB1E08C"
                android:offset="0.8" />
            <item
                android:color="#FFB1E08C"
                android:offset="0.9" />
            <item
                android:color="#FFFFC42C"
                android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
</vector>