Ontouch Apply Glow Effect To Center Of Image

I have a image and I need to apply glow effect to center of the image using OnTouchListener Something like this. How can I achieve this effect? I have looked into examples where w

Solution 1:

On the setOnTouchListener get the getDrawingCache() of the image, Create a gradient bitmap of what you want and then overlay the images on top of one another

Try this

finalImageViewimageView= (ImageView) findViewById(R.id.imageView1);
    imageView.setOnTouchListener(newOnTouchListener() {

        @OverridepublicbooleanonTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if(drawIt){
                    drawIt = false;
                    //Build the cache
                    imageView.buildDrawingCache();
                    Bitmaporiginal= imageView.getDrawingCache();
                    //Build the gradientBitmapgradient= getGradient();
                    //Overlay the imagesBitmapfinalImage= overlay(original,gradient,event.getX(),event.getY());
                    imageView.setImageBitmap(finalImage);
                }
                break;

            case MotionEvent.ACTION_UP:
                drawIt = true;
                break;
            }
            returnfalse;
        }
    });

private Bitmap getGradient() {
    RadialGradientgradient=newRadialGradient(200 , 200, 200, 0xFFFFFFFF,
            0x00000000, android.graphics.Shader.TileMode.CLAMP);
    Paintp=newPaint();
    p.setDither(true);
    p.setShader(gradient);

    Bitmapbitmap= Bitmap.createBitmap(400, 400, Config.ARGB_8888);
    Canvasc=newCanvas(bitmap);
    c.drawCircle(200, 200, 200, p);

    return Bitmap.createScaledBitmap(bitmap, 50, 50, false);
}

private Bitmap overlay(Bitmap bmp1, Bitmap bmp2,float x, float y) {
    BitmapbmOverlay= Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig());
    Canvascanvas=newCanvas(bmOverlay);
    canvas.drawBitmap(bmp1, newMatrix(), null);
    // Use your x and y cordinates here
    canvas.drawBitmap(bmp2, 100,100, null);
    return bmOverlay;
}

Here is what I got

You can do your modifications here i have uploaded the project for you

Best of Luck

EDIT

To draw it at center use this line in the overlay method

 canvas.drawBitmap(bmp2, bmp1.getWidth()/2 - bmp2.getWidth()/2,bmp1.getHeight()/2  - bmp2.getHeight()/2, null);

And for adding bitmap to button use this

Buttonbtn= (Button) findViewById(R.id.button1);
Drawabled=newBitmapDrawable(getResources(),finalImage);
btn.setBackgroundDrawable(d);

But note that when you set this bitmap to button the button will resize so better not use wrap_content but specify the height and width in hard code like 25dp or 100dp etc. That is the logic which you have to control

You can also use ImageButton and set it as

btn.setImageBitmap(finalImage);

For MotionEvent

switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        drawIt = true;
        break;

    case MotionEvent.ACTION_UP:
        if(drawIt){
            //Build the cache
            imageView.buildDrawingCache();
            Bitmaporiginal= imageView.getDrawingCache();
            //Build the gradientBitmapgradient= getGradient();
            //Overlay the imagesBitmapfinalImage= overlay(original,gradient,event.getX(),event.getY());
            imageView.setImageBitmap(finalImage);
            Buttonbtn= (Button) findViewById(R.id.button1);
            Drawabled=newBitmapDrawable(getResources(),finalImage);
            btn.setBackgroundDrawable(d);
            }
        break;

    case MotionEvent.ACTION_CANCEL:
        drawIt = false;
        break;
}

EDIT 2

Declare these instance variables

privatebooleandrawIt=true;
Button btn1,btn2;
int x_limit, y_limit;
Bitmap bmpOrignal, bmpGradient, bmpOverlay;

and code the onTouch like this

@Override
public boolean onTouch(View v, MotionEvent event) {
    if(drawIt){
        drawIt = false;
        v.buildDrawingCache();
        bmpOrignal = v.getDrawingCache();
        bmpGradient = getGradient();
        bmpOverlay = overlay(bmpOrignal,bmpGradient);
        x_limit = v.getLeft() + bmpOrignal.getWidth();
        y_limit = v.getTop() + bmpOrignal.getHeight();

    }
    if(event.getX() > x_limit || event.getY() > y_limit){
        ((Button)v).setBackgroundDrawable(new BitmapDrawable(getResources(),bmpOrignal));
    }else {
        ((Button)v).setBackgroundDrawable(new BitmapDrawable(getResources(),bmpOverlay));
    }

    if(event.getAction() == MotionEvent.ACTION_UP){
        drawIt = true ;
    }
    returnfalse;
}

You can download the new updated project from here

Solution 2:

How about drawing a circle using

Canvascanvas=newCanvas(bmp);
canvas.drawCircle(x, y, radius, paint);

Then drawing the same circle over and over again at a slightly lesser alpha and bigger radius in a for loop?

Paint.setAlpha();

Edit: Actually that sounds pretty bad for the memory but heck haven't tried it before.