Advertisement
  1. Code
  2. Android SDK
Code

Create a Live Wallpaper on Android Using an Animated GIF

by
Difficulty:IntermediateLength:MediumLanguages:

Have you ever seen a beautiful animated GIF that loops seamlessly and wondered if you could use it as a live wallpaper on your Android device? Well, you can, and in this tutorial I am going to show you how.

Looking for a Shortcut?

If you'd rather use a ready-made solution instead of coding it yourself, try the GIF Live Wallpaper item on Envato Market. It lets you create your own Live Wallpaper Android app based on animated GIFs. 

GIF Live Wallpaper item on Envato Market

Introduction

Creating an interesting and beautiful live wallpaper from scratch using only math and code to generate the graphics can be tedious and time-consuming. It also requires lots of creativity. On the other hand, creating an animated GIF or finding one online is a lot easier. In this tutorial, you are going to learn how to convert any animated GIF into a live wallpaper.

Prerequisites

Ensure that you have the latest version of Android Studio set up. You can get it from the Android Developer website.

Even though any animated GIF will do, I suggest that you download a good cinemagraph. A cinemagraph is nothing but an animated GIF—usually created from a video—that loops seamlessly. You can find lots of good ones on Flickr.

For this tutorial, I am using a cinemagraph created by Flickr user djandyw.com as it is available under a Creative Commons license.

1. Create a New Project

Start Android Studio, create a new project, and name the project GIFWallpaper. Pick a unique package name if you plan to publish this app on Google Play.

Set the minimum SDK to API 8: Android 2.2 (Froyo).

Our app is not going to have an Activity, so choose Add No Activity and click Finish.

2. Describe the Wallpaper

A live wallpaper needs a file that describes it. Create a new XML file named res/xml/wallpaper.xml and replace its contents with the following XML:

The label and thumbnail are particularly important as they will be used when the wallpaper shows up in the list of the wallpapers available on your device.

3. Edit the Manifest

To run as a live wallpaper, our app needs only one permission, android.permission.BIND_WALLPAPER.

A live wallpaper runs as a Service that can receive the  android.service.wallpaper.WallpaperService intent action. Name the Service GIFWallpaperService and add it to the project's manifest, AndroidManifest.xml.

Next, to make sure that the app can be installed only on devices that can run live wallpapers, add the following snippet to the manifest:

4. Add Animated GIF

Copy the animated GIF you downloaded from Flickr to the assets folder of the project. I've named the GIF girl.gif.

5. Create the Service

Create a new Java class and name it GIFWallpaperService.java. This class should extend the WallpaperService class.

Because WallpaperService is an abstract class, you have to override its onCreateEngine method and return an instance of your own Engine, which can render the frames of the GIF.

To use the animated GIF, you first have to convert it into a Movie object. You can use the Movie class's decodeStream method to do so. Once the Movie object has been created, pass it as a parameter to the constructor of the custom Engine.

This is what the onCreateEngine method should look like:

6. Create the Engine

Let's start working on the Engine now. Create a class named GIFWallpaperEngine inside the GIFWallpaperService class and make it extend WallpaperService.Engine.

Add the following fields to this new class:

  • frameDuration: This integer represents the delay between re-draw operations. A value of 20 gives you 50 frames per second.
  • visible: This boolean lets the engine know if the live wallpaper is currently visible on the screen. This is important, because we should not be drawing the wallpaper when it isn't visible.
  • movie: This is the animated GIF in the form of a Movie object.
  • holder: This refers to the SurfaceHolder object available to the engine. It has to be initialized by overriding the onCreate method.
  • handler: This is a Handler object that will be used to start a Runnable that is responsible for actually drawing the wallpaper.

Your class should now look like this:

Next, create a method named draw that draws the contents of the animated GIF. Let's break this method down:

  • We first check if the visible variable is set to true. We only continue if it is.
  • Use the SurfaceHolder's lockCanvas method to get a Canvas to draw on.
  • Draw a frame of the animated GIF on the Canvas after scaling and positioning it.
  • Once all the drawing is done, pass the Canvas back to the SurfaceHolder.
  • Update the current frame of the animated GIF using the Movie object's setTime method.
  • Call the method again using the handler after waiting for frameDuration milliseconds.

The draw method is never called directly. It is always called using a Handler and a Runnable object. Therefore, let's make the Runnable object a field of the class and call it drawGIF.

Add the following code to the GIFWallpaperService class:

The onVisibilityChanged method is automatically called whenever the visibility of the wallpaper changes. We need to override it and, based on the value of the visible argument, either start or stop drawGIF. The removeCallbacks method of the Handler is used to stop any pending drawGIF runs.

Finally, override the onDestroy method of the Engine to stop any pending drawGIF runs if the wallpaper is deactivated.

7. Compile and Install

Your live wallpaper is now ready. Compile it and install it on your Android device. Once installed, you should be able to find the wallpaper in the list of available wallpapers.

Most launchers give you an option to change the wallpaper after a long tap gesture. Alternatively, you can go to the display settings to change the wallpaper.

If the GIF looks too small or it isn't positioned correctly, then go back to the draw method and adjust the scale and position.

Conclusion

You now know how to use an animated GIF to create a live wallpaper. Feel free to experiment with more GIFs. If you plan to publish your live wallpaper on Google Play, make sure you have the creator's permission to use the animated GIF commercially. Visit the Android Developer website to learn more about the WallpaperService class.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.