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?
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:
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>