Animated LiveWallpaper

Live Wallpapers offer unique screen real estate over widgets and a chance to show off some dashboard visuals. Childhood memories have instilled a message of freedom into the image of a Testerrossa speeding down an open road with a pretty girl ala “Ferris Buellers day off” and Sega’s classic “Outrun”. So What better to express the open platform than an OutRun inspired Live Wallpaper?

A sexy implementation using the openly available github source code:

Download the outrun livewallpaper for the Nexus One
Scenery changes every time the phone is sleeping as you can see here, here and here, in awful quality.

Admittedly my graphics aren’t quite as inspiring.

Download Demo apk compiled for a Nexus One

Animated LiveWallpaper Notes

Src code for Demos projects on Github:
Switch Image on left/right
Switch Animation on left/right

A Live Wallpaper consists of an ‘Engine’ and a ‘Service’. The engine specifies how your wallpaper is rendered while it’s service creates instances for the home screen. A wallpaper service differs from a normal service in addition of  OnEngineCreate(). This has been the first time I’ve used the canvas extensively and I learned you first must lock the canvas and choose which region you wish to redraw. onVisibilityChanged() or onSurfaceChanged() will read much like the instructions of how to draw your canvas from empty. Onvisibility() will first change to true in rendering your wallpaper  preview and this will return false when your wallpaper falls out of view and you transition to your dashboard. This is a handy function as every time your wallpaper falls out of view you can stop everything you are doing and free up the associated resources.

To update the drawn canvas state you need to tell the UI to refresh via a handler. In my case I needed to request an indexed image from within an collection upon each draw, Each time the handler returns back I update my drawn bitmap with a frame from the animation. It should be noted here that you should only be keeping the image Resource IDs in memory rather than the actual binary contents of the images. I was at first doing this, following a demo I downloaded but I soon ran into this error at runtime:

ERROR/AndroidRuntime(1067):
Uncaught handler: thread main exiting due to uncaught exception
java.lang.OutOfMemoryError: bitmap size exceeds VM budget

This is because all of the png images although starting out quite small, when transformed to bitmaps upon interpreation they become a lot larger and quickly fill up the allotted memory allocation. Instead I just kept an array of resIds using res.getIdentifier(). This seems pretty good in the performance stakes.

I chose to play an animation for left and right steering when a user flicks between panels. I kept track of this via the onTouchEvent()’s ACTION_DOWN and then checking which side of the screen their ACTION_UP was upon. The reason I added a timer in there was to add a little delay for the animation so you can appreciate the perfect driving line of the Testerossa.An area that I would like to return to is recognising when the user’s finger has dragged the screen a certain distance. My original approach to recognising significant drag was to monitor the start and end points and see if they lay at different sides of the screen, I have since learned measuring the distance within onOffSetsChanged would probably be a more reliable approach.

The last thing of note with Live Wallpapers is that they have a convenience listener for dropping icons and tapping on the dashboard screen via sendWallpaperCommand() and then acting on the input via onCommand(), these could also be very useful and are used to good effect in the demos with water droplets and colours.

At the moment it seems like the wallpaper is a bit of a memory hog and I’d like to find out why. Any suggestions are appreciated.
We think that the problem is in the BitmapFactory.decodeResources() function recreating the Bitmap every time. In order to get around this I think the best way would be to create a ’spriteSheet’ then move around the area of this big sheet masking it to only the area I need like one of those revolving wheels that show the horse running. Live and learn, I always wondered why people used sprite sheets in games programming I guess this must be one of the reasons.

As a side note, if anyone has any information on how The Nexus One splash screen is able to read in it’s splash screen consisting of 97pngs (/system/media/bootanimation.zip) I’d love to hear how they achieved this. When developing ideas for your Live Wallpapers consider trying to include the interaction of forces particular to the context of a mobile device such as time, movement and position.

Android SDK at time of writing was: android-sdk-mac_x86-2.1 ( SDK version 7 )

Citations & Research

• Really cute anime live wallpaper on google code
• Github: Demo of switching left and right
• Github: Demo of switching Animation on left/right
• Live Wallpaper anim demo APK for Nexus One