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

A "dumb but working" way to do this would be to draw your ellipse contour, then a multitude of nested ellipses with the same "center", whose sizes and colors change as the ellipses grow smaller, all the way to a one-pixel ellipse. If you custom code your gradient, interpolate the colors in HSV, not in RVB !

Answer 2

This is difficult since drawables defined in this fashion draw themselves at runtime, adapting to the space you put them in. Your best solution, if you must do this in code, would be to take the shape drawable you have defined in XML and draw it onto a Canvas or into a Bitmap as a perfect circle. At this point, the gradient pattern will follow the shape outline. Once the shape has been drawn into a static context you can add the shape to a view (as a background, let's say), which will distort it into an oval when it tries to fit the view bounds. Since you have an image, the whole thing will distort proportionately.

Hopefully, it won't pixel too bad with this method.

Answer 3

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