Rajeeshcv.com

Sharing my knowledge

Create a live aquarium wallpaper in Android

image image

Github: https://github.com/cvrajeesh/LiveAquariumWallpaper
Download the source code: http://downloads.rajeeshcv.com/LiveAquariumWallpaper.zip 
Android package: http://downloads.rajeeshcv.com/LiveAquariumWallpaper.apk (I have only tested this in the SDK simulator and haven’t considered all the screen sizes, so may find some UI glitches)
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. Courtesy :
  1. Fish sprite used here is from a code project article - http://www.codeproject.com/KB/GDI-plus/LovelyGoldFishDeskPet.aspx
  2. Creating animation using sprites - http://www.droidnova.com/2d-sprite-animation-in-android,471.html
Lets get started…. Starts by creating 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 {

    @Override
    public Engine onCreateEngine() {
        return new AquariumWallpaperEngine();
    }

    class AquariumWallpaperEngine extends Engine{    

        private Aquarium _aquarium;

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

        @Override
        public void onVisibilityChanged(boolean visible) {
            if(visible){
                this._aquarium.render();
            }
        }

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

        @Override
        public void onSurfaceCreated(SurfaceHolder holder) {
            super.onSurfaceCreated(holder);
            this._aquarium.start();
        }

        @Override
        public void onSurfaceDestroyed(SurfaceHolder holder) {
            super.onSurfaceDestroyed(holder);
            this._aquarium.stop();
        }
    }
}

 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.

XUL - Create cross platform application with ease

You want to create simple GUI cross platform application without knowing the high level programming languages like C++, Java, C#~(using mono)? XUL is that answer.

Yes it is possible using XUL, the prerequisites  for this is, knowledge of a declarative programming language(like HTML or XHTML, XAML etc...) and JavaScript.

XUL is basic building block of the Firefox UI and as we know Firefox works in Windows, Linux and MAC.

Actually XUL is a language which run on the XULRunner(Gecko) runtime from Mozilla.

If you really wants see how Firefox created this UI, go the FireFox installation folder. Normally it will be "C:\Program Files\Mozilla Firefox\". Under that installation root folder, find a folder named "chrome". Firefox has packaged the xul files in a zip format and they have renamed it as ".jar". So look for a file "browser.jar" and rename it to zip. Extract it and have a look at "content\browser\browser.xul". This file holds the UI definition for Firefox.

To learn more about XUL, refer these web sites

1. http://www.mozilla.org/projects/xul/
2. http://www.ibm.com/developerworks/web/library/wa-xul1/