Oval Gradient in Android

Question

I know how to setup and display an oval shape. I know how to apply a gradient to this shape. What I cant figure out is how I can get an oval gradient to match the shape.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval" >
    <gradient
        android:startColor="#66FFFFFF"
        android:endColor="#00FFFFFF"
        android:gradientRadius="100"
        android:type="radial" />
</shape>

If you can imagine, this gradient has a semi transparent white glow in the middle, then fades to alpha zero at the edges. I need to get it to go out in an oval shape, not just a circular gradient. How can I achieve this?

Answer 1

I would suggest more 'direct' drawing approach. If you can draw gradient pixel-by-pixel, then you need just to remember that for

• circle gradient color is proportional to r
• ellipse (oval) gradient color is proportional to r1+r2

Here:

r - distance to circle center

r1,r2 - distances to two foci of ellipse

EDIT: Consider this Pixel Shader code:

uniform sampler2D tex;

void main()
{
    vec2 center = vec2(0.5,0.5);
    float len = 1.3*(distance(gl_TexCoord[0].xy,center));
    vec2 foc1 = vec2(len,0.);
    vec2 foc2 = vec2(-len,0.);
    float r = distance(center+foc1,gl_TexCoord[0].xy) +
             distance(center+foc2,gl_TexCoord[0].xy);
    float k = pow(r*0.9,1.3);
    vec4 color = vec4(k,k,k,1.);
    gl_FragColor = color;
}

You will get oval something like that:

good luck

Answer 2

<?xml version="1.0" encoding="utf-8"?>

<stroke android:width="1dp" android:color="#ffffffff" />

<size
    android:width="40dp"
    android:height="40dp"/>

<gradient
    android:type="radial"
    android:startColor="#ffff0000"
    android:endColor="#330000ff"
    android:gradientRadius="40dp"
    android:angle="270"
    android:centerX=".5"
    android:centerY=".5"/>