CODEWITHSUNDEEP
androidandroid-drawable
Surya Heatz
Surya Heatz

Reputation: 1

How to develop a radial gradient like this in android as shown in the image here

I am trying to create a gradient which will look similar to the one in the left, but I couldn't in this code using XML. Please help me to achieve this

I have tried using alpha, but I don't know how to control the color distribution XML Code:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <gradient
                android:gradientRadius="70dp"
                android:centerX="50%"
                android:centerY="50%"
                android:centerColor="#73F76394"
                android:startColor="#00F76394"
                android:endColor="#F92965"
                android:type="radial" />

            <size android:height="120dp" android:width="120dp">
            </size>
        </shape>
    </item>
</selector>

I expect a different output

output obtained:

output obtained

expected output:

expected output

Please help

Upvotes: 0

Views: 357

Answers (2)

Niranj Patel
Niranj Patel

Reputation: 33248

Please try below code. 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <gradient
                android:gradientRadius="90dp"
                android:centerX="50%"
                android:centerY="50%"
                android:centerColor="#202E53"
                android:startColor="#00F76394"
                android:endColor="#F92965"
                android:type="radial" />

            <size android:height="120dp" android:width="120dp">
            </size>
        </shape>
    </item>
    <item android:top="30dp" android:bottom="30dp" android:left="30dp" android:right="@dimen/dimen_30">
        <shape android:shape="oval">
            <solid android:color="#202E53" />

            <size android:height="90dp" android:width="90dp">
            </size>
        </shape>
    </item>
</layer-list>

Output :

enter image description here

Upvotes: 2

Rishabh Sagar
Rishabh Sagar

Reputation: 4117

Use this,

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <gradient
                android:gradientRadius="70dp"
                android:centerX="50%"
                android:centerY="50%"
                android:centerColor="#00F76394"
                android:startColor="#00F76394"
                android:endColor="#F92965"
                android:type="radial" />

            <size android:height="120dp" android:width="120dp">
            </size>
        </shape>
    </item>
</selector>

you will have to keep the centerColor and startColor same to achieve this

Upvotes: 0

Related Questions