Moving "Cloud" - Radial Gradient moving with finger

Question

First Q. I have working code to make this move elsewhere in the file -- that's not the question. The question is how do I create a Radial Gradient that can be moved (below API 16).

Preempting snark, I've spent a lot of time here:

http://developer.android.com/reference/android/graphics/drawable/GradientDrawable.html

With GradientDrawable (below), there doesn't seem to be a way to set the colors without also setting a non-radial orientation.

public class CustomView extends View {
    int width = (sWidth/8); // sWidth defined elsewhere as width of screen
    int height = (sWidth/8);
    GradientDrawable gradient;
    int[] colors = {0x60ffffff,0x000000};

    public CustomView(Context context) {
        super(context);
        gradient = new GradientDrawable(GradientDrawable.Orientation.BL_TR,colors);
    }

    protected void onDraw(Canvas canvas) {
        if(x != 0 && y != 0){ // OnTouch calls invalidate on this view for movement
            gradient.mutate();
            gradient.setShape(GradientDrawable.RADIAL_GRADIENT);
         // This just makes it disappear:
         // setGradientType (GradientDrawable.RADIAL_GRADIENT);
            gradient.setBounds(x-width/2, y-height/2, x + width, y + height);
            gradient.draw(canvas);
        }
    }
}

There is also this:

http://developer.android.com/reference/android/graphics/RadialGradient.html

But there seems to be no way to move that gradient. Can you maybe put the radial gradient on a transparent circle of some kind that can then be moved? I'm at a loss. My thanks in advance.

Answer 1

Edit:

Step 1, define an oval shape in your drawable folder. This one is "cloud.xml":

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >

<gradient
    android:centerX="0.5"
    android:centerY="0.5"
    android:endColor="#00000000"
    android:gradientRadius="30"
    android:startColor="#f0ffffff"
    android:type="radial" />
<size
    android:width="60dp"
    android:height="60dp" />
 </shape>

The radius, width and height will likely need to be changed dynamically. So put whatever. The color scheme above will give a slightly transparent color to fully transparent. Cloud effect.

Step 2, the constructor of your custom view:

// actually before the constructor this, of course:
GradientDrawable circle;

// now the constructor:

circle = (GradientDrawable) context.getResources().getDrawable(R.drawable.cloud);

Step 3, the onDraw method:

            // x & y being coordinates updated from onTouch method,
            // circleRad being some constant dependent on screen dp
            if(x != 0 && y != 0){
            circle.setGradientRadius(circleRad);
            circle.setBounds(x-circleRad, y-circleRad,
                    x+circleRad, y+circleRad);
            circle.draw(canvas);
        }

------------- Original, Less Process Efficient Solution Preserved Below -----------

Wait a couple weeks and you can answer your own questions. Turns out it was RadialGradient the whole time.

public class CustomView extends View implements OnTouchListener {
    Shader radialGradientShader;
    Paint paint;
    private int circleDiam;
    private int x = 0;
    private int y = 0;
    private int lastScreenColor;

    public CustomView(Context context, int circleDiam) {
        super(context);
        this.circleDiam = circleDiam;
        paint = new Paint();
    }

    protected void onDraw(Canvas canvas) {
        if(x != 0 && y != 0){       
            paint.setStyle(Paint.Style.FILL);
            paint.setAntiAlias(true);
            radialGradientShader = new
    RadialGradient(x, y, circleDiam,
    0xf0ffffff,0x00000000,Shader.TileMode.MIRROR);
            paint.setShader(radialGradientShader);
            canvas.drawCircle(x, y, circleDiam, paint);
        }
    }

    public boolean onTouch(View v, MotionEvent event) {
        x = (int)event.getX();
        y = (int)event.getY();

        if(event.getAction() == MotionEvent.ACTION_DOWN 
     && event.getAction() == MotionEvent.ACTION_MOVE){
            invalidate();
            return true;
        }
        else{ 
            x = 0;
            y = 0;
            invalidate();
            return false;
        }
    }
}

A fluffy cloud!

The only problem with this solution is that Eclipse gets mad when you instantiate an object in the onDraw method. However, if you try to instantiate it in the constructor things get ugly fast.

Extra points for a solution that avoids said problem.