In this blog post I will describe the process of creating the Blur Wallpaper app for Android. The post is divided into two main parts. The first focuses on design while the second part focuses on the technical implementation. But first a look at the final result:
Designing the app
Often, my best ideas comes to mind while I’m lying in my bed. Sometimes I grab a notebook and find myself doodeling for half an hour before falling asleep. It was one of these nights that I got the core idea for Blur Wallpaper.
I was wondering about how form and function plays together and I found my self compelled by the thought of using form to communicate the function in some of our apps. ,,Wouldn’t it be cool if I could create an app with no describing text and where the components would use their form to communicate their purpose?’’ So I started doodeling and created this set of different sliders.
The idea was that the small changes in the form of the slider would communicate their function - the first one would blur a wallpaper. The second would change its brightness and the last one would change the saturation of the image.
I ended up thinking about these sliders for the most of a week and finally I got the time to do some wireframes in Photoshop. This was what I came up with.
I wanted to make the sliders the main star of the show and give them as much spotlight as possible while still making the wallpaper visible. My focus on simplicity made me forget all about the actionbar or how one should switch between the sliders.
Designing the app icon
I usually try to get a clear understanding of the apps visual identity before I start implementing. In this way I feel more sure that I will end up with a consistent product and I reduce the time overhead of designing while programming. So I decided on doing the app icon. The main objective was that it should try to follow the material design guidelines and that it should communicate “blur” in some way. The images below shows the process of designing the current icon.
As you can see, it took some time to get to the final result. Apparently blur is not easy to incorporate into material design.
Programming Blur Wallpaper
Implementing custom sliders
The first real problem of implementing Blur Wallpaper was finding a good solution for creating sliders that could follow a custom path. I downloaded and tried the following libraries for custom seek bars, but none of them allowed me to create a slider with a custom path or was easy to extend.
I ended up creating a custom view implementation that would imitate the view of a normal seek bar, but allow me to set a custom path for it to follow. This part was surprisingly simple. The PathMeasure class allows one to get a segment of the path as well as a position on a path.
The most difficult part ended up being how to convert the path from Photoshop wireframes into a Path object. This was what I ended up doing:
- Export the path from Photoshop as an Illustrator Path (File>Export>Paths to Illustrator)
- Open the generated file and locate the path data. My data looked like this:
- Look at the characters in the end of each line. These tell what kind of path each line describe. You can look at this description of the AI file format or take a qualified guess. I think that m correlates to Path.moveTo(…), v correlates to Path.quadTo(…) and c correlates to Path.cubicTo(…).
Convert data from AI file into method calls. I used a wonderful tool called Transoformy.
- You should end up with somehting like this:
Blurring images in Android
The second problem I encountered was that blurring images in Android is not straightforward. Blurring an image is quite CPU intensive. You should try out Patricfavs Blur Benchmark which lets you compare different blur algoritms and view the result. I ended up using ScriptIntrinsicBlur which utilizes renderscript to blur the image on the GPU. This is currently the fastes algorithm and it is the same that is used by Roman Nuriks Muzei live wallpaper. However blurring the wallpaper image is still a time consuming task as the wallpaper is usually twice the size of the phones screen. On my Nexus 5 the image contains about 16 MB of data! This means that it is not possible to animate between different blur strengths as I would like. There are two solutions to this problem.
*The first is to reduce the resolution of the image so that it can be blurred in real time. This yeilds a mediocre result that is a bit pixelated. *The second is to prerender a set of blur keyframes and switch between them in real time. This gives a nice result, however creating enough keyframes to get a smooth animation requires a lot of processing and more memory than what is available.
The way I ended up working around this issue was to generate a set of blur keyframes in an AsyncTask while the app is loading. When the user scrolls the blur slider I change the background image shown in the app. To make the effect more smooth I use two backgrounds with two succeeding blur keyframes and animate the alpha value of the frontmost between each keyframe. In this way we get a blur animation that is almost perfect.
There is a strict limit on the amount of memory an Android app can consume. This limit starts at 16 mb for some phones. On my Nexus 5 each application is allowed to consume 192 mb. While this seems like a lot this still limits the amount of keyframes to a maximum of five. The following list contains some notes on how I increased the amounts of keyframes in Blur Wallpaper:
- Store less color data in the images. If you dont need an alpha channel use RGB_565(2 bytes pr pixel) instead of ARGB_8888 (4 bytes per pixel). Now you are only using half the amount of memory.
- If you need to blur with a blur radius that is more than 25 pixels, consider resizing the bitmap instead.
- Remember to deallocate bitmaps that you don’t need anymore
The final result
If you want to play around with the resulting app you can get it here:
Best regards, Tobias Alrøe, Appdictive