I will not extend my answer too long with the code, because, frankly, I do not have it, but I will try to indicate the key things that you should consider and some useful links.
First, the approach:
- blur as fast as possible
- cache blurry result
- Shading
Blur as fast as possible:
your algorithm looks very nice, and I believe that it gives a good effect, but actually it works on Java VM in a single thread. You will certainly get much better performance using RenderScript. This is because RenderScript automatically scales the rendering process to multiprocessors and GPUs.
the basic code for it below, taken directly from android-developers.blogspot.com :
RenderScript rs = RenderScript.create(theActivity); ScriptIntrinsicBlur theIntrinsic = ScriptIntrinsicBlur.create(mRS, Element.U8_4(rs));; Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap); Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap); theIntrinsic.setRadius(25.f); theIntrinsic.setInput(tmpIn); theIntrinsic.forEach(tmpOut); tmpOut.copyTo(outputBitmap);
cache blurry results:
This is because Blur takes time. There will also be many memory implications, and you should carefully monitor it. You, of course, cannot do this very well on the scroll list, which processes views and stuff. Perhaps a tip might use the Picasso library ( LINK ) for this, as well as handle your threads. Something like that:
Picasso .with(context) .load(/* asset/res/file/url */) .transform(new BlurTransformation(value)) .into(target); // The transform method is automatically called by Picasso in a background thread public class BlurTransformation implements com.squareup.picasso.Transformation { private final float radius; // radius is corner radii in dp public BlurTransformation(final float radius) { this.radius = radius; } @Override public Bitmap transform(final Bitmap source) { // do the transformation and return it here } @Override public String key() { return "blur"+Float.toString(radius); } } // you can also use this to get it instantly Picasso... all the code... .get();
Shading:
here you can balance performance and good looks. The reality is that real animation is impossible without actually rendering each frame for each step, but with cross-fading between several key frames, you can achieve great results.
How many key frames you will use will depend on the required performance, the amount of free memory on the device, etc.
If you have everything in order with two keyframes (1 not blurry and 1 completely blurry), you can probably apply TransitionDrawable to it. If you want a more dramatic effect, you will have to create a series of cross fading transitions, or perhaps create your own custom one.
in just 2 keyframes, you can see an example of the Yahoo Weather application if you want to see an example with several keyframes that you want to check out Muzei live wallpapers .
very useful links *
In the following link, you will see a pleasant discussion of the creator of Muzei (Roman Nurik, who is also one of Google’s engineers working on Android) about how he achieved keyframes, why this is the only way to do it, and why, although more complicated code, he creates in the end a much more beautiful result: (short version) https://plus.google.com/+RomanNurik/posts/2sTQ1X2Cb2Z (full version) https://medium.com/@romannurik/serendipitous-ideas-3a1721a6f716
This link is the source code for Muzei live wallpapers, where you can check how it calculates key frames and animates wallpapers: https://github.com/romannurik/muzei
Good luck and happy coding!