CODEWITHSUNDEEP
androidandroid-layoutgradientandroid-drawablexml-drawable
Travis Knight
Travis Knight

Reputation: 301

XML Circle with gradient fill Android

I am trying to make an XML Button, circle shape, which is filled with a gradient color. This color needs to be changed programatically.

Here is an example of what I am trying to achieve.

enter image description here

My attempts to build this have ended up with a gradient background and a solid colored circle. Instead of the gradient circle and transparent background.

I am hoping to be able to use more then 2 colors or a radial gradient for the circle as well. Any help is greatly appreciated.

Upvotes: 1

Views: 4201

Answers (3)

Md. Arif
Md. Arif

Reputation: 508

Late but someone might get helped. Thanks to @Faizan

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <gradient android:angle="270" android:endColor="#D10719" android:gradientRadius="120dp" android:startColor="#0A5A1B" android:type="linear" />
            <size android:width="100dp" android:height="100dp" />
        </shape>
    </item>
</selector>


Output:

enter image description here

Upvotes: 1

Faizan Haidar Khan
Faizan Haidar Khan

Reputation: 1215

Belated but can be helpful for someone else

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <gradient android:angle="0" android:endColor="#fff" android:gradientRadius="@dimen/_30sdp" android:startColor="@color/colorPrimaryDark" android:type="radial" />
        <size android:width="@dimen/_25sdp" android:height="@dimen/_25sdp" />
    </shape>
</item>

Output enter image description here

Upvotes: 1

Hradesh Kumar
Hradesh Kumar

Reputation: 1805

You can Try with making Drawable XML. Example

    <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="circle" >

    <gradient
        android:angle="90"
        android:centerColor="#555994"
        android:endColor="#b5b6d2"
        android:startColor="#555994"
        android:type="linear" />    

</shape>

Arrange angle based on your requirement.

If you wants to change Color progarmatically then read this:-

How do I programmatically set the background color gradient on a Custom Title Bar?

Upvotes: 2

Related Questions