1

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?

1 Answer 1

2

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>
1
  • Thanks for your answer. But I used an image for that. Jul 30, 2020 at 5:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.