Glow Live Wallpaper

Building a Custom Android Live Wallpaper

Android live wallpapers are a great way to become familiar with web development for the Android platform. They do not require any interactivity, or user input, and so most of the application logic is usually based on predefined sequences or sculpted randomization.

One technique that we will be using is the prehistoric pong bounce. This is where we increment a position with a speed until it reaches a wall, then we reverse the speed, and continue to the next wall.

There are many resources on Android live wallpapers, including Creating Live Wallpapers on Android by Mobile Tuts and A Bare-bones Live Wallpaper Template for Android by Tech Republic. To get some background, or a second opinion, don’t hesitate to look around.

Most of the code below is the same as other Android live wallpaper templates. The responsibility of GlowService is to create a GlowEngine instance. The responsibility of GlowEngine is to handle draw calls.

To start, we will write a skeleton class for the wallpaper service:

public class GlowService extends WallpaperService {

    public Engine onCreateEngine() {
        return new GlowEngine();

    private class GlowEngine extends Engine {
        private GlowDrawable mDrawable;
        private boolean mVisible = false;
        private final Handler mHandler = new Handler();
        private final Runnable mUpdateDisplay = new Runnable() {
            public void run() {

        public GlowEngine() {
            mDrawable = new GlowDrawable();

        private void draw() {
            SurfaceHolder holder = getSurfaceHolder();
            Canvas c = null;
            try {
                c = holder.lockCanvas();
            } finally {
                if (c != null)
            if (mVisible) {
                mHandler.postDelayed(mUpdateDisplay, 100);

        public void onVisibilityChanged(boolean visible) {
            mVisible = visible;
            if (visible) {
            } else {

        public void onSurfaceChanged(SurfaceHolder holder,
                    int format, int width, int height) {

        public void onSurfaceDestroyed(SurfaceHolder holder) {
            mVisible = false;

        public void onDestroy() {
            mVisible = false;

Unlike other examples, we are going to delegate the draw method to a completely different class, so we need to consider how to write it. In order to add some degree of animation to the wallpaper, we are going to use a simple radial gradient

public class GlowDrawable extends ShapeDrawable {
    private Rect mBounds;
    private float mCenterX = 0.0f;
    private float mCenterY = 0.0f;
    private float mOffsetX = 40.0f;
    private float mOffsetY = 80.0f;
    private float mRadius = 0.0f;
    private float mSpeedX = 10.0f;
    private float mSpeedY = 20.0f;

    private int mColorFG = Color.rgb(0xFF, 0xFF, 0x00); // yellow
    private int mColorBG = Color.rgb(0xFF, 0x66, 0x33); // orange

    public GlowDrawable() {
        this(new RectShape());

    public GlowDrawable(Shape s) {

    public void setBounds(Rect bounds) {
        mBounds = bounds;
        if (mRadius == 0.0f) {
            mCenterX = (mBounds.right - mBounds.left)/2.0f;
            mCenterY = (mBounds.bottom -;
            mRadius = mCenterX + mCenterY;
    public void animate() {
        mCenterX += mSpeedX;
        mCenterY += mSpeedY;
        if (mCenterX < mBounds.left + mOffsetX ||
            mCenterX > mBounds.right - mOffsetX) {
            mSpeedX *= -1.0f;

        if (mCenterY < + mOffsetY || 
            mCenterY > mBounds.bottom - mOffsetY) {
            mSpeedY *= -1.0f;
    public Paint getPaint(float width, float height) {
        RadialGradient shader = new RadialGradient(
            mCenterX, mCenterY, mRadius, 
            mColorFG, mColorBG, 
        Paint paint = new Paint();
        return paint;

    public void draw(Canvas c) {
        float width = c.getWidth();
        float height = c.getHeight();
        c.drawRect(0, 0, width, height, getPaint(width, height));

What we’ve done is make a simple radial gradient paint, whose center moves and bounces off the walls, much like classic screen savers. The technique is very simple, when the center gets close to the walls, then we reverse the direction it travels, and keep it in the GlowDrawable object. At this point, we might want to change things, like pick different colors, a blue perhaps, or we can animate between orange and blue, or make the color based on the X or Y coordinate, the possibilities are endless.

In order for our app to display in the “live wallpaper” section of the settings, now we need to make sure that the android.service.wallpaper.WallpaperService intent is properly bound in the Manifest.




As you can see, we need a file called “res/xml/wallpaper.xml” with more metadata about the wallpaper. This must look something like the following

Having all of our sources ready, we can try it out! Now that you’ve made a live wallpaper, you might try being a little adventurous, and replace RadialGradient with something else, perhaps LinearGradient or some other Shader. Another option would be to use shapes other than rect (our entire canvas is a rect). We could have used multiple rects and have them bounce off the sides with the technique we used for the center of the RadialGradient.

We have covered how to setup a WallpaperService and how to instantiate Engines which render the live wallpaper. We have shown how to setup the XML files required for Android to recognize it as a live wallpaper. We would also like to remind that you can enjoy learning Android app development!

Like this post? Please share it! Then follow us on Twitter – @thorntech – and sign up for our email list below for future updates.