How to replicate iOS 7 Blur View in Android

Question

I like the style iOS 7 has used for their Notification and Music popover like below.

So, I try to implement this thing in Android. After doing some search, I achieved how to do that. What I have tried is following.

1) First I take a root reference of the View and take a snap of it using getDrawingCache() function of View.

linearLayout.buildDrawingCache();
SoftReference<Bitmap> bitmap = new SoftReference<Bitmap>(
            Bitmap.createBitmap(linearLayout.getDrawingCache()));
linearLayout.destroyDrawingCache();

2) I take the position relative to its parent and cut the image as per requirement.

SoftReference<Bitmap> temp = new SoftReference<Bitmap>(
            Bitmap.createBitmap(bitmap.get(), 0,
                    (parentHeight - childHeight), childWidth, childHeight));

3) I make that bitmap image blur with some algorithm. ( I use Fast Bitmap Blur For Android SDK fastBlur effect )

4) set it in the overlay view.

imageView1.setImageBitmap(Utils.fastblur(temp.get(), 8));

But my problem is it takes time to take a snap then giving blur effect and cutting image and then i got final result. While iOS has very fast blurring process like when drawer is coming from bottom, it immediately blur the screen which is behind it.

Is there any other way to achieve that? Because using my scenario, i can't take every second snap of screen and do all process 1 to 4 every second on every move of drawer.

Answer 1

http://nicolaspomepuy.fr/blur-effect-for-android-design/

I don't know if you have seen this link, but check it out. It talks about how blur effects can be achieved in around 200ms.

PS: check out the comments as well !

Answer 2

Ok so if I understand your problem correctly is that is you have a drawer mechanisme that you need to update the blurred image every pixel the drawer has moved?

Then the solution to your problem would be to blur the screen one time and use this image together with some fancy algorithm to show/hide and position that image so that it seems that the drawer will blur instantly but in actually what's happening is that the image was already generated. You just show more or less of the image to create the effect.

Don't know if I'm making sense or if I even understand your question.