Search code examples
androidxmlsvgandroid-vectordrawable

Convert a multicolored SVG gradient drawable to Android xml vector drawable

enter image description here

This image is created on Adobe Illustrator, and I have exported it to a SVG drawable. Then I imported it on Android Studio. But the gradient is not showing, it has been imported like transparent rectangle. How can I import or create like this gradients?

Solution

  • You can make this pretty easily using radial gradients! You're essentially overlapping 4 "points" of light, one for red, yellow, blue, and green. These are then moved vertically (scaleY) and horizontally (scaleX) to be in the correct place.

    Here is a correctly put together proof of concept, you will of course need to adjust it to match your design / colours exactly: overlapping radial gradients

    And here's the XML for it. This needs to be put into a .xml file inside the /res/drawable/ folder:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:layout_height="wrap_content">
            <solid android:color="@android:color/black" />
        </shape></item>

    <item><shape>
        <gradient
            android:type="radial"
            android:gradientRadius="80%"
            android:startColor="@android:color/red"
            android:centerX="0.1"
            android:centerY="0.1"
            android:endColor="@android:color/transparent" />
    </shape></item>

    <item><shape>
        <gradient
            android:type="radial"
            android:gradientRadius="80%"
            android:startColor="#FFFF00"
            android:centerX="0.9"
            android:centerY="0.1"
            android:endColor="@android:color/transparent" />
    </shape></item>

    <item><shape>
        <gradient
            android:type="radial"
            android:gradientRadius="80%"
            android:startColor="#00008B"
            android:centerX="0.1"
            android:centerY="0.5"
            android:endColor="@android:color/transparent" />
    </shape></item>

    <item><shape>
        <gradient
            android:type="radial"
            android:gradientRadius="80%"
            android:startColor="#74ae5b"
            android:centerX="0.9"
            android:centerY="0.5"
            android:endColor="@android:color/transparent" />
    </shape></item>

</layer-list>