Take the 2-minute tour ×

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.

       android:shape="oval" >
        android:type="radial" />

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?

share|improve this question
add comment

3 Answers

up vote 2 down vote accepted

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.

share|improve this answer
Marking correct for "if you must do this in code". I found it is much easier and much higher quality as an image, and this reminded me of this. –  coneybeare Aug 25 '10 at 15:01
add comment

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


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) +
    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: alt text

good luck

share|improve this answer
This perhaps could be ok, but it seems expensive. –  coneybeare Aug 29 '10 at 22:32
It depends how per-pixel calculation would be performed. If it is performed on GPU side (as gradient calculation Pixel Shader) - then it is as fast as lightning :) –  Agnius Vasiliauskas Aug 30 '10 at 7:06
add comment

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 !

share|improve this answer
add comment

Your Answer


