How to create a color fading text in J2ME

It’s time for new effects! :)

Today we’ll see how to implement and and use text that changes multiple colors with a fading effect. You can see it in action here: J2ME text color fade effect in action.

Color Fading Text screenshot

So, let’s start defining our ColorFadeText class.

The code

We start defining the necessary properties:

//will hold the colors to fade
int[] colors = null;
//duration of a single fade
int fadeDuration = 0;
//effect start time
long startTime = 0;
//property used to check if effect has started
public boolean started = false;
//the text to be drawn
String text = null;

Now, we define the main constructor, that will accept the following arguments:

  • the text to be drawn
  • an int[] array containing the colors to fade into
  • the duration of a single fade
public ColorFadeText(String text, int[] colors, int fadeDuration)
	if(colors.length == 0)
		throw new IllegalArgumentException("You must define at least 1 color");
	this.text = text;
	this.colors = colors;
	this.fadeDuration = fadeDuration;

The effect start() method will simply set the startTime value to current time and the started property to true

public void start()
	startTime = System.currentTimeMillis();
	started = true;

Then, we have the paint() method, that will be used to paint the text on the given Graphics instance:

public void paint(Graphics g, int x, int y, int anchor)
		long diff = System.currentTimeMillis() - startTime;
		int module = (int)(diff % fadeDuration);
		int colorIndex = (int)(diff / fadeDuration) % colors.length;
		int midColor = midColor(
			colors[(colorIndex + 1) % colors.length],
	g.drawString(text, x, y, anchor);

The following utility method will be the one actually used to get the current text color:

static int midColor(int color1, int color2, int prop, int max)
	int red =
		(((color1 >> 16) & 0xff) * prop +
		((color2 >> 16) & 0xff) * (max - prop)) / max;
	int green =
		(((color1 >> 8) & 0xff) * prop +
		((color2 >> 8) & 0xff) * (max - prop)) / max;
	int blue =
		(((color1 >> 0) & 0xff) * prop +
		((color2 >> 0) & 0xff) * (max - prop)) / max;
	int color = red << 16 | green << 8 | blue;
	return color;

How to use it?

Using the ColorFadeText object is quite simple, since it’ll be very similar to use a common String. Just follow this plain steps.

1. Create a ColorFadeText instance

ColorFadeText text = new ColorFadeText(
	new int[]{0xff0000, 0x00ff00, 0x0000ff, 0xff00ff},

2. Start it…


3. And then, in your Canvas paint() method, paint it, using the same arguments used by Graphics drawString() method (adding a reference to the Graphics instance of course):

	getWidth() / 2,
	Graphics.HCENTER | Graphics.TOP

Just a side note: since it’s an animated effect, you’ll need to repaint it quite frequently, so, for example, you can use a Thread to periodically call Canvas repaint() method.

Source code download

You can download source code of ColorFadeText, and of a sample Canvas that makes use of it:

This article is also available on Forum Nokia Wiki: How to create a color fading text in Java ME.

Be Sociable, Share!