Activity Indicator in J2ME

[viraj.mehta]

I wish to display an activity indicator in J2ME when I am performing some network activity (HTTP requests and XML parsing). I have seen gauges being turned into activity indicators:

Gauge _gauge = new Gauge( null, false, Gauge.INDEFINITE, Gauge.CONTINUOUS_RUNNING );

But this does not dim the view behind and it does not overlay the view.
Please let me know your suggestions on this.

Thanks,
Viraj

[skalogir]

Hi Viraj,

You cannot really modify the visual rendering of a Gauge instance but you might want to consider using a CustomItem, which is Canvas item (low level) that is appendable to a Form (high level). Inside the item's Canvas you can draw the Gauge in such a way so that it satisfies your visual needs.

An example of a Custom Gauge and its progress bar bouncing back and forth is this:
Main MIDlet:

import javax.microedition.lcdui.Command;
import javax.microedition.lcdui.CommandListener;
import javax.microedition.lcdui.Display;
import javax.microedition.lcdui.Displayable;
import javax.microedition.lcdui.Form;
import javax.microedition.lcdui.Gauge;
import javax.microedition.midlet.MIDlet;
import javax.microedition.midlet.MIDletStateChangeException;

public class GaugeMIDlet 
	extends MIDlet 
	implements CommandListener {
	
	Display display;
	Command exitCommand = new Command("Exit",Command.EXIT,0);
	CustomGauge customGauge;
	Form mainForm;
	
	protected void startApp() throws MIDletStateChangeException {
		mainForm = new Form("Custom Gauge");
		display = Display.getDisplay(this);
		display.setCurrent(mainForm);
		customGauge = new CustomGauge(15, this);
		mainForm.append(customGauge);
		mainForm.addCommand(exitCommand);
		mainForm.setCommandListener(this);
	}
	
	public int getForegroundColor() {
		return Display.getDisplay(this).getColor(Display.COLOR_FOREGROUND);
	}
	
	public void commandAction(Command c, Displayable d) {
		if(c == exitCommand){
			notifyDestroyed();
		}
	}
	
	protected void destroyApp(boolean arg0) throws MIDletStateChangeException {
		//To do
	}
	
	protected void pauseApp() {
		//To do
	}
}

CustomGauge that extends the CustomItem class:

import javax.microedition.lcdui.CustomItem;
import javax.microedition.lcdui.Graphics;

class CustomGauge 
	extends CustomItem
	implements Runnable {

    int itemsHeight;
    GaugeMIDlet midlet;
    Thread thread;
    int gaugePosition = 0; //the filling's current position
    int gaugeWidth; //the gauge's width depends on the screen
    boolean movingForward = true;
    
    public CustomGauge(int itemsHeight, GaugeMIDlet midlet) {
        super( "" );
        this.itemsHeight = itemsHeight;
        this.midlet = midlet;
        thread = new Thread(this);
        thread.start();
    }

    public void paint(Graphics g, int width, int height) {
    	gaugeWidth = width;
    	g.setColor(midlet.getForegroundColor());
    	g.drawRect(0, 0, width - 2, height - 2);
    	g.fillRect(gaugePosition, 0, (width / 3) - 2, height - 2);
    }
    
    protected int getMinContentWidth() {
        return 250;
    }
    
    protected int getMinContentHeight() {
        return itemsHeight;
    }
    
    protected int getPrefContentWidth(int arg0) {
        return 250;
    }
    
    protected int getPrefContentHeight(int arg0) {
        return itemsHeight;
    }
	
    protected void pointerDragged(int x, int y) {
    	//To do
    }
    
    protected void pointerPressed(int x, int y) {	
		//To do
	}
	
    protected void pointerReleased(int x, int y) {
		//To do
	}
    
	protected void keyPressed(int keyCode) {
    	//To do
    }
    
	//moves the Gauge's filling so that it bounches back and forth
	public void run() {
		while (true) {
			try {
				
				if(movingForward) {
					gaugePosition ++;
					repaint();
				}
				else {
					gaugePosition --;
					repaint();
				}
				//if the filling has reached the Gauge's right end	
				if(gaugePosition >= gaugeWidth - (gaugeWidth / 3) ) {
					movingForward = false;
				}
				
				if(gaugePosition == 0) {
					movingForward = true;
				}
				//repeat interval
				Thread.sleep(10);
			} 
			catch (InterruptedException e) {
				break;
			}
		}
	}
}

Is this something more close to what you are looking for?

More information about the Canvas and
CustomItem classes can be found at Java Developer's Library

[viraj.mehta]

Hey skalogir,

Thanks for the code.
But I am looking for something little different.
Something like this or this.

Hi Viraj,

You cannot really modify the visual rendering of a Gauge instance but you might want to consider using a CustomItem, which is Canvas item (low level) that is appendable to a Form (high level). Inside the item's Canvas you can draw the Gauge in such a way so that it satisfies your visual needs.

An example of a Custom Gauge and its progress bar bouncing back and forth is this:
Main MIDlet:

import javax.microedition.lcdui.Command;
import javax.microedition.lcdui.CommandListener;
import javax.microedition.lcdui.Display;
import javax.microedition.lcdui.Displayable;
import javax.microedition.lcdui.Form;
import javax.microedition.lcdui.Gauge;
import javax.microedition.midlet.MIDlet;
import javax.microedition.midlet.MIDletStateChangeException;

public class GaugeMIDlet 
	extends MIDlet 
	implements CommandListener {
	
	Display display;
	Command exitCommand = new Command("Exit",Command.EXIT,0);
	CustomGauge customGauge;
	Form mainForm;
	
	protected void startApp() throws MIDletStateChangeException {
		mainForm = new Form("Custom Gauge");
		display = Display.getDisplay(this);
		display.setCurrent(mainForm);
		customGauge = new CustomGauge(15, this);
		mainForm.append(customGauge);
		mainForm.addCommand(exitCommand);
		mainForm.setCommandListener(this);
	}
	
	public int getForegroundColor() {
		return Display.getDisplay(this).getColor(Display.COLOR_FOREGROUND);
	}
	
	public void commandAction(Command c, Displayable d) {
		if(c == exitCommand){
			notifyDestroyed();
		}
	}
	
	protected void destroyApp(boolean arg0) throws MIDletStateChangeException {
		//To do
	}
	
	protected void pauseApp() {
		//To do
	}
}

CustomGauge that extends the CustomItem class:

import javax.microedition.lcdui.CustomItem;
import javax.microedition.lcdui.Graphics;

class CustomGauge 
	extends CustomItem
	implements Runnable {

    int itemsHeight;
    GaugeMIDlet midlet;
    Thread thread;
    int gaugePosition = 0; //the filling's current position
    int gaugeWidth; //the gauge's width depends on the screen
    boolean movingForward = true;
    
    public CustomGauge(int itemsHeight, GaugeMIDlet midlet) {
        super( "" );
        this.itemsHeight = itemsHeight;
        this.midlet = midlet;
        thread = new Thread(this);
        thread.start();
    }

    public void paint(Graphics g, int width, int height) {
    	gaugeWidth = width;
    	g.setColor(midlet.getForegroundColor());
    	g.drawRect(0, 0, width - 2, height - 2);
    	g.fillRect(gaugePosition, 0, (width / 3) - 2, height - 2);
    }
    
    protected int getMinContentWidth() {
        return 250;
    }
    
    protected int getMinContentHeight() {
        return itemsHeight;
    }
    
    protected int getPrefContentWidth(int arg0) {
        return 250;
    }
    
    protected int getPrefContentHeight(int arg0) {
        return itemsHeight;
    }
	
    protected void pointerDragged(int x, int y) {
    	//To do
    }
    
    protected void pointerPressed(int x, int y) {	
		//To do
	}
	
    protected void pointerReleased(int x, int y) {
		//To do
	}
    
	protected void keyPressed(int keyCode) {
    	//To do
    }
    
	//moves the Gauge's filling so that it bounches back and forth
	public void run() {
		while (true) {
			try {
				
				if(movingForward) {
					gaugePosition ++;
					repaint();
				}
				else {
					gaugePosition --;
					repaint();
				}
				//if the filling has reached the Gauge's right end	
				if(gaugePosition >= gaugeWidth - (gaugeWidth / 3) ) {
					movingForward = false;
				}
				
				if(gaugePosition == 0) {
					movingForward = true;
				}
				//repeat interval
				Thread.sleep(10);
			} 
			catch (InterruptedException e) {
				break;
			}
		}
	}
}

Is this something more close to what you are looking for?

More information about the Canvas and
CustomItem classes can be found at Java Developer's Library

[skalogir]

Hi Viraj,

The concept is the same. You would have to modify the CustomGauge class so that it uses low level Canvas drawing. One way you could achieve the visual outcome you wish, is to use Images and the drawImage method of the Graphics class. For your second example, you could place two different version of Images that form the loading circle on the canvas, one active and one faded and then call the repaint method from within the thread on regular intervals, each time using a different set of Images so that the loading effect takes place.

[viraj.mehta]

Do you have some sample code for this ?

Hi Viraj,

The concept is the same. You would have to modify the CustomGauge class so that it uses low level Canvas drawing. One way you could achieve the visual outcome you wish, is to use Images and the drawImage method of the Graphics class. For your second example, you could place two different version of Images that form the loading circle on the canvas, one active and one faded and then call the repaint method from within the thread on regular intervals, each time using a different set of Images so that the loading effect takes place.

[skalogir]

Apologies for the delay,

I have created an example here for you to use.