13

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

enter image description here

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.

Community
  • 1
  • 1
Chintan Rathod
  • 25,864
  • 13
  • 83
  • 93
  • can you just make a background of the view semi-transparent with color effect? what you do is impressive but seems a bit hacky, I'm wondering if your blurring algorithm can be substituted with some level of transparency of the view? – Max Ch Jan 20 '14 at 09:00
  • Umh..i did that already. Semi transparency will not give me such output what i want like transparency + blur the current behind content of "overlay view". – Chintan Rathod Jan 20 '14 at 09:04
  • you have an interesting problem...let's try to crack it, assuming the view you're overlaying is part of your app, can you convert that view (the most parent of it) to the bitmap and apply your blur effect on this bitmap? http://stackoverflow.com/questions/2801116/converting-a-view-to-bitmap-without-displaying-it-in-android may give you a clue.. – Max Ch Jan 20 '14 at 09:15
  • thanks for your interest.. I did it already my dear friend.. In step **1** i am taking screen shot of parent view to which "overlay view" is there. Then I am applying **fastBlur** effect on it. But this will take too much time if i like to apply on a drawer.. :( – Chintan Rathod Jan 20 '14 at 09:18
  • Using the GPU to blur the image would be much faster, but I'm not sure it would justify the time to transfer the image to native memory and then pull it back. If you want to reduce the time to do the fast blur, you can probably get away with working with a downsampled image of 1/4 width and height. – Tenfour04 Jan 20 '14 at 20:07
  • Have you tried to do first step 3 and then step 2? That way you blur the background image only once and then you can just crop it according to the move of your view. – Bitcoin Cash - ADA enthusiast Mar 27 '14 at 00:08
  • @Tiago nope.. but its a good idea.. :) I will make a try.. :) – Chintan Rathod Mar 27 '14 at 06:04
  • @ChintanRathod Cool. Please, let me know if it works :) Also, how long does it take for an image to blur in your case? How big is the average image you use and what is the radius value you choose? – Bitcoin Cash - ADA enthusiast Mar 28 '14 at 00:29

2 Answers2

2

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 !

Ashwin
  • 86
  • 1
  • 8
1

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.

Stultus
  • 814
  • 2
  • 11
  • 15