Oval Gradient in Android

<?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"/>


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

good luck


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.