Convert RadialGradient to Drawable? (CSS RadialGradient to Android)

Question

I am attempting to convert CSS radial-gradient to Android and have found that I have needed RadialGradient because the CSS has multiple colors and stops. An example of the CSS is below.

background-image: radial-gradient(circle at 24% 50%, #ffffff, #c0e3e0 20%, #a4c4d7 61%, #000000);

I tried to use

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>

<gradient
    android:centerX="36%"
    android:centerY="50%"
    android:endColor="#000000"
    android:gradientRadius="300"
    android:startColor="#ffffff"
    android:type="radial"
    />
 </shape>

but you cannot include all of the colors and no stops.

I went for RadialGradient

 RadialGradient radialGradient = new RadialGradient(0.25f, 0.45f, 140.f, new int[]{
            ContextCompat.getColor(context, R.color.background_gradient_start_color),
            ContextCompat.getColor(context, R.color.background_gradient_second_color),
            ContextCompat.getColor(context, R.color.background_gradient_third_color),
            ContextCompat.getColor(context, R.color.background_gradient_end_color)}, new float[]{1.0f, 0.2f, .61f, 1.0f},
            Shader.TileMode.CLAMP);

but I cannot set the RadialGradient as the background of my RelativeLayout since it is not android.graphics.Drawable or don't know how. Can someone provide a solution?

Hopefully you have already found a solution to this, but if not, you can refer to https://stackoverflow.com/a/2762454/2220318 I am trying to do something similar and can't find a solution yet. The format I am looking at is radial-gradient(100% 100% at center 125%, color1 20%, color2 25%) Any help is really appreciated :) — Rahul Shukla, Dec 22 '21 at 04:56

score 0 · Answer 1 · answered Apr 03 '18 at 18:35

You can use layer-list, like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list>
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:centerX="36%"
                android:centerY="50%"
                android:endColor="#33c0e3e0"
                android:gradientRadius="300"
                android:startColor="#ffffff"
                android:type="radial"
                />
        </shape>
    </item>
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:centerX="36%"
                android:centerY="50%"
                android:endColor="#000000"
                android:centerColor="@color/colorAccent"
                android:gradientRadius="600"
                android:startColor="#9ca4c4d7"
                android:type="radial"
                />
        </shape>
    </item>
</layer-list>

How does this incorporate the stops? – John61590 Apr 03 '18 at 19:20 — John61590, Apr 03 '18 at 19:20

Convert RadialGradient to Drawable? (CSS RadialGradient to Android)

1 Answers1