Click here to Skip to main content
12,690,140 members (32,610 online)
Click here to Skip to main content
Add your own
alternative version


56 bookmarked

Create a live aquarium wallpaper in Android

, 29 Oct 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Android development - Aquarium Live wallpaper

image image

Few weeks ago, I started learning Android programming, so this article is an outcome of that out-side office study.

Here I will be explaining – how to create a live wallpaper which looks like an aquarium with fishes swimming across the screen. The fish animation is done using sprite technique.


  1. Fish sprite used here is from a CodeProject article –
  2. Creating animation using sprites –,471.html

Let's get started….

Start by creating a new Android project in eclipse (I am not familiar with any other IDEs for Android development). Now create a class for your live wallpaper service, I called it as AquariumWallpaperService, then instantiate the AquariumWallpaperEngine. This engine is responsible for creating the actual Aquarium class which does all the rendering logic. It also controls the flow of Aquarium based Surface callbacks.

Below is the code for AquariumWallpaperService:

public class AquariumWallpaperService extends WallpaperService {

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

    class AquariumWallpaperEngine extends Engine{    

        private Aquarium _aquarium;

        public AquariumWallpaperEngine() {
            this._aquarium = new Aquarium();
            this._aquarium.initialize(getBaseContext(), getSurfaceHolder());

        public void onVisibilityChanged(boolean visible) {

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

        public void onSurfaceCreated(SurfaceHolder holder) {

        public void onSurfaceDestroyed(SurfaceHolder holder) {

Aquarium class wraps all the rendering logic, as well as creating the fishes. This also starts a thread which is responsible for updating the view.

public class Aquarium {

    private AquariumThread _aquariumThread;
    private SurfaceHolder _surfaceHolder;
    private ArrayList<Renderable> _fishes;
    private Bitmap _backgroundImage;
    private Context _context;

    public void render(){
        Canvas canvas = null;

            canvas = this._surfaceHolder.lockCanvas(null);
            synchronized (this._surfaceHolder) {

            if(canvas != null){

    protected void onDraw(Canvas canvas) {
        for (Renderable renderable : this._fishes) {

    public void start(){

    public void stop(){
        boolean retry = true;
        while (retry) {
            try {
                retry = false;
            } catch (InterruptedException e) {
                // we will try it again and again...

    public int getLeft() {
        return 0;

    public int getRight() {
        return this._backgroundImage.getWidth();

    public void initialize(Context context, SurfaceHolder surfaceHolder) {
        this._aquariumThread = new AquariumThread(this);
        this._surfaceHolder = surfaceHolder;
        this._fishes = new ArrayList<Renderable>();
        this._context = context;
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inPurgeable = true;
        this._backgroundImage = BitmapFactory.decodeResource(context.getResources(),, options);

    private void addFishes() {
        Point startPoint = new Point(100, 100);
        this._fishes.add(new ClownFish(this._context, this, startPoint, 90));
        Point startPoint1 = new Point(100, 300);
        this._fishes.add(new ClownFish(this._context, this, startPoint1, 50));

        Point startPoint2 = new Point(200, 200);
        this._fishes.add(new ClownFish(this._context, this, startPoint2, 15));

    private void renderBackGround(Canvas canvas)
        canvas.drawBitmap(this._backgroundImage, 0, 0, null);

Here is the code for AquariumThread class:

public class AquariumThread extends Thread {

    private Aquarium _aquarium;
    private boolean _running;

    public AquariumThread(Aquarium aquarium) {
        this._aquarium = aquarium;

    public void switchOn(){
        this._running = true;

    public void pause(){
        this._running = false;

    public void switchOff(){
        this._running = false;

    public void run() {

All the renderable object in the aquarium must implement an interface Renderable, which has got one single method called render(…):



public interface Renderable {
    void render(Canvas canvas);

This interface helps to render an object other than a fish, like plants, etc… in future.

I have created another abstract class which has common functionalities like changing the position and direction of a fish after a particular interval and called it as AquaticAnimal. This is because I could create specific fishes which just differ by its look by extending from this class.

public abstract class AquaticAnimal implements Renderable {

    private static int MAX_SPEED = 100;
    private Context _context;
    private Aquarium _aquarium;
    private FishSprite _leftSprite;
    private FishSprite _rightSprite;

    private int _direction = -1;
    private int _speedFraction;
    private long _previousTime;

    public AquaticAnimal(Context context, Aquarium aquarium){
        this._context = context;
        this._aquarium = aquarium;

    protected void initialize(Bitmap leftBitmap, Bitmap rightBitmap, 
		int fps, int totalFrames, Point startPoint, int speed){
        this._leftSprite = new FishSprite(leftBitmap, fps, totalFrames, startPoint);
        this._rightSprite = new FishSprite(rightBitmap, fps, totalFrames, startPoint);
        this._speedFraction = (MAX_SPEED / speed) * 10;

    private FishSprite getSprite(){
        if(this._direction < 0){
            return this._leftSprite;
        return this._rightSprite;

    public int getDirection(){
        FishSprite sprite = this.getSprite();
        int xPos = sprite.getXPos();
        if(this._direction < 0){
            xPos += sprite.getWidth();
        if(xPos < this._aquarium.getLeft()){
            this._direction = 1;
        }else if(xPos > this._aquarium.getRight()){
            this._direction = -1;
            // Do nothing

        return this._direction;

    public Context getContext(){
        return this._context;

    public Aquarium getAquarium(){
        return this._aquarium;

    public void render(Canvas canvas){
        long currentTime = System.currentTimeMillis();
        this.getSprite().render(canvas, currentTime);

    public void swim(long currentTime){
        long diff = currentTime - this._previousTime;
        if(diff > this._speedFraction){
            int currentX = this.getSprite().getXPos();
            this.getSprite().setXPos(currentX + this.getDirection());
            this._previousTime = currentTime;

The sprite animation is moved into a specific class FishSprite:

public class FishSprite {

     * Private fields
    private Bitmap _currentSpriteBitmap;
    private Rect _drawRect;
    private int _fps;
    private int _noOfFrames;
    private int _currentFrame;
    private long _timer;
    private int _spriteWidth;
    private int _spriteHeight;
    private Point _position;

    public FishSprite(Bitmap spriteBitmap, int fps, int frameCount, Point startPoint) {


        this._position = startPoint;
        this._currentSpriteBitmap = spriteBitmap;
        this._spriteHeight = spriteBitmap.getHeight();
        this._spriteWidth = spriteBitmap.getWidth() / frameCount;
        this._drawRect = new Rect(0,0, this._spriteWidth, this._spriteHeight);
        this._fps = 1000 / fps;
        this._noOfFrames = frameCount;

    private void initialize() {
        this._drawRect = new Rect(0,0,0,0);
        this._timer = 0;
        this._currentFrame = 0;

    private void Update(long currentTime) {
        if(currentTime > this._timer + this._fps ) {
            this._timer = currentTime;
            this._currentFrame +=1;

            if(this._currentFrame >= this._noOfFrames) {
                this._currentFrame = 0;

        this._drawRect.left = this._currentFrame * this._spriteWidth;
        this._drawRect.right = this._drawRect.left + this._spriteWidth;

    public void render(Canvas canvas, long currentTime) {


        Rect dest = new Rect(getXPos(), getYPos(), getXPos() + this._spriteWidth,
                        getYPos() + this._spriteHeight);

        canvas.drawBitmap(this._currentSpriteBitmap, this._drawRect, dest, null);

    public Point getPosition() {
        return _position;

    public void setPosition(Point position) {
        this._position = position;

    public int getYPos() {
        return this._position.y;

    public int getXPos() {
        return this._position.x;

    public void setYPos(int y) {
        this._position.y = y;

    public void setXPos(int x) {
        this._position.x = x;

    public int getWidth(){
        return this._spriteWidth;

    public int getHeight(){
        return this._spriteHeight;


Now to the final bit, that is creating a fish. Someone might have noticed that I have created an object of ClownFish in the Aquarium class. ClownFish is just a derived class from AquaticAnimal, with a specific sprite image. So if you have sprite images for a shark, you could simply extend a new class for a shark with that image.

public class ClownFish extends AquaticAnimal {
    private static final int TOTAL_FRAMES_IN_SPRITE = 20;
    private static final int CLOWN_FISH_FPS = 20; 

    public ClownFish(Context context, Aquarium aquarium,  Point startPoint, int speed){
        super(context, aquarium);
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inPurgeable = true;
        Bitmap leftBitmap = BitmapFactory.decodeResource(getContext().getResources(),, options);
        BitmapFactory.Options options1 = new BitmapFactory.Options();
        options1.inPurgeable = true;
        Bitmap rightBitmap = BitmapFactory.decodeResource(getContext().getResources(),, options1);
        this.initialize(leftBitmap, rightBitmap, CLOWN_FISH_FPS, TOTAL_FRAMES_IN_SPRITE, 
		startPoint, speed);

    public void render(Canvas canvas){

Please feel free to go through the code, if I haven’t explained clearly. Hope this article helped in some way or the other.

Happy new year!!!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Technical Lead
India India
I am someone who is passionate about programming. I started my career with classic asp and VB 6, later dived into the world of .NET. My ambition is to become a technical architect who could design complex systems in a simplistic form which obeys the "Laws of nature"

My personal blog

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Gabriel RB18-Oct-11 4:31
memberGabriel RB18-Oct-11 4:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170117.1 | Last Updated 29 Oct 2011
Article Copyright 2010 by Rajeesh.C.V
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid