This article explains how to create a nice reflection effect starting from a simple Image.

You can see a live sample of this code here: Java ME Image reflection effect sample MIDlet

Source code

1. Method declaration

Let's start from method declaration:

public static Image createReflectedImage(Image image, int bgColor, int reflectionHeight)
{
}

We have 3 arguments:

• the original image to be reflected
• the background color (used for transparent images)
• the height of the reflection effect

2. The mutable Image

Now, let's create the mutable Image that will hold the resulting effect:

int w = image.getWidth();
 
int h = image.getHeight();
 
Image reflectedImage = Image.createImage(w, h + reflectionHeight);

We store the original image width and height into 2 int variables, and then create the mutable image with the same width, but with an height equal to h (the original image) plus the specified reflection height.

3. Copy the original Image

Now, first drawing steps are:

• Getting the Graphics object of the mutable image
• Filling the image with the background color
• Drawing the original image on the upper part of the mutable one

Graphics g = reflectedImage.getGraphics();
 
g.setColor(bgColor);
 
g.fillRect(0, 0, w, h + reflectionHeight);
 
g.drawImage(image, 0, 0, Graphics.TOP | Graphics.LEFT);

4. Create the reflection effect

Now, let's get to the important part of this article, that is the reflection effect itself:

• for each horizontal line of the reflected image part, take the corresponding vertical coordinate of the original image
• get the RGBA data of the corresponding horizontal line of the original image
• calculate the alpha to be applied to this line, and apply it to each element of the RGB data array
• draw the RGB data into the reflected image, by using its Graphics object

And here is the source code:

int[] rgba = new int[w];
int currentY = -1;
 
for(int i = 0; i < reflectionHeight; i++)
{
	int y = (h - 1) - (i * h / reflectionHeight);
 
	if(y != currentY)
		image.getRGB(rgba, 0, w, 0, y, w, 1);
 
	int alpha = 0xff - (i * 0xff / reflectionHeight);
 
	for(int j = 0; j < w; j++)
	{
		int origAlpha = (rgba[j] >> 24);
		int newAlpha = (alpha & origAlpha) * alpha / 0xff;
 
		rgba[j] = (rgba[j] & 0x00ffffff);
		rgba[j] = (rgba[j] | (newAlpha << 24));
	}
 
	g.drawRGB(rgba, 0, w, 0, h + i, w, 1, true);
}

in the above code, the rgba[] int array holds the current pixel row data, and will be refreshed only when necessary (so, when the y coordinate of the original image changes).

Sample usage

Using the above method is really simple, since it's only necessary to:

• Create the original Image to be reflected
• Call createReflectedImage() method by passing the original Image as argument, together with the background color and the reflection effect height

Image originalImage = Image.createImage("/cap_man1.png");
 
Image reflectedImage = ReflectedImage.create(originalImage, 0xffffff, 64);

Downloads

You can download the complete source code of this article here:

• ReflectedImage.java