How to unBlur square portion of Blurry image on touch android

Question

What I want to do:

On mouse hover of Blurry image, it shows unblur same image in square shape like following image. (image is completely blur, on mouse hover unblur image shown in square shape)

What I have done:

I set blur image using following code (link) using PorterDuff.Mode. On touch of screen mouse pointer converted into square and image shows unblur.

---

Edit:

Problem:

Now picture is unblur but i cant find proper blur effect on blurry image and unblur image is also not clear, on touch is not working properly.

My Code:

using custom view and following methods i'm able to blur and unblur image but still there's not completely satisfied with output.

@Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(mTutorialColor);
        if (mCx >= 0 && mCy >= 0) {
            DisplayMetrics displayMetrics = new DisplayMetrics();
            ((Activity) getContext()).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
            int height = displayMetrics.heightPixels;
            int width = displayMetrics.widthPixels;
            // canvas.drawCircle(mCx, mCy, RADIUS, mBackgroundPaint);
            canvas.drawRect(mCx, mCy, mCx + width, mCy + 250, mBackgroundPaint);
        }

    }


private void init() {
        setWillNotDraw(false);
        setLayerType(LAYER_TYPE_HARDWARE, null);
        mBackgroundPaint = new Paint();
        mBackgroundPaint.setColor(getResources().getColor(android.R.color.transparent));
        mBackgroundPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    }

Is there any other way to achieve this?

Automatize

It is still not clear what is the problem about... – Gamopetalous

@Alexandr first of all you can see blur image of cat but it's not much blur so i need to more blur it, so no one can recognize image and when we touch the image it only shows clear image on that touch portion. – Automatize

@Alexandr here clear picture is also not much clear and when we touch on screen, touch must be draw rectangle and that restrict to move on x axis. it only moves up and down not left-right. – Automatize

did you try my solution? – Gamopetalous

hii @Alexandr i'm stuck in other work i'll get back to you after trying this solution, thank you :) – Automatize

Answer 1

You need to implement it differently.

You need two images (instead of one):

1. Blurred one. Which will be always drawn as background (or in a view underneath). Read here how to blur the image.

2. Normal one. This one should be drawn on top of blurred one using the square mask. Check this answer.

MORE DETAILS:

It can be done in the same way, how I explained in this answer, but with Mode.DST_IN Xfermode instead of PorterDuff.Mode.CLEAR.

Hope this will help you.

Gamopetalous