Monday 7 December 2020

Android Gradient border?

Task:

Want to accomplish gradient BORDER...

Start color starts from blue circle edge and end color ends on red ring edge.

enter image description here

I tried with shape oval, and ring and radial gradient. I need gradient that starts from edge of the circle (not from the centre) and expand to the end color. I am interested is it even possible to do that with radial gradient. What am I missing?

So far I made it like this:

<!-- Added shadow -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:width="85dp"
        android:height="85dp">

        <shape
            android:shape="ring"
            android:thickness="10dp"
            android:useLevel="false">

            <gradient
                android:endColor="@android:color/transparent"
                android:gradientRadius="37.5dp"
                android:startColor="@color/colorBlack"
                android:type="radial"></gradient>
        </shape>
    </item>

    <item
        android:width="64dp"
        android:height="64dp"
        android:left="11dp"
        android:top="11dp">

        <shape android:shape="oval">
            <solid android:color="@color/colorPrimaryBlue" />
        </shape>
    </item>
</layer-list>

OUTPUT:

enter image description here

Original problem is not solved. The main problem is that radial gradient starts from the centre of the circle and not from the edge.

Any more ideas?



from Android Gradient border?

No comments:

Post a Comment