OnTouch Apply glow effect to center of image

Question

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 we can apply glow effect to outer part of the image.

We can achieve this by using a white image and place on top the background image, but can we do it without using images?

EDIT

I found this post as well but no solution.

Android : Image button or button Highlighted with Effect when Pressed

Answer 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

final ImageView imageView = (ImageView) findViewById(R.id.imageView1);
    imageView.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if(drawIt){
                    drawIt = false;
                    //Build the cache
                    imageView.buildDrawingCache();
                    Bitmap original = imageView.getDrawingCache();
                    //Build the gradient
                    Bitmap gradient = getGradient();
                    //Overlay the images
                    Bitmap finalImage = overlay(original,gradient,event.getX(),event.getY());
                    imageView.setImageBitmap(finalImage);
                }
                break;

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

private Bitmap getGradient() {
    RadialGradient gradient = new RadialGradient(200 , 200, 200, 0xFFFFFFFF,
            0x00000000, android.graphics.Shader.TileMode.CLAMP);
    Paint p = new Paint();
    p.setDither(true);
    p.setShader(gradient);

    Bitmap bitmap = Bitmap.createBitmap(400, 400, Config.ARGB_8888);
    Canvas c = new Canvas(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) {
    Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig());
    Canvas canvas = new Canvas(bmOverlay);
    canvas.drawBitmap(bmp1, new Matrix(), 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

Button btn = (Button) findViewById(R.id.button1);
Drawable d = new BitmapDrawable(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();
            Bitmap original = imageView.getDrawingCache();
            //Build the gradient
            Bitmap gradient = getGradient();
            //Overlay the images
            Bitmap finalImage = overlay(original,gradient,event.getX(),event.getY());
            imageView.setImageBitmap(finalImage);
            Button btn = (Button) findViewById(R.id.button1);
            Drawable d = new BitmapDrawable(getResources(),finalImage);
            btn.setBackgroundDrawable(d);
            }
        break;

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

EDIT 2

Declare these instance variables

private boolean drawIt = 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 ;
    }
    return false;
}

You can download the new updated project from here

Answer 2

How about drawing a circle using

Canvas canvas = new Canvas(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.