Draw Gradient in Java ME

Comments

19 Sep
2009

Article Review by Larry101 (20090919)

This article provides a useful class for creating linear gradient paint effects in Java ME. The standard Graphics class used in Canvas and GameCanvas-based applications does not allow for the easy creation of gradients. The code example provided addresses this limitation by allowing programmers to create rectangles filled with either vertical and horizontal gradients. The programmer is simply required to provide the two-colours required for the gradient, the coordinates of the top-left corner and the width and height of the rectangle. The class then takes care of painting the gradient, interpolating between the two colours in order to smoothly transition from one to the other.

The code in this class provides for reasonably smooth gradients in Java ME and is very useful given the limitations of the standard Graphics class. This approach is better than using an image containing a gradient as a background, as it is difficult to scale an image correctly for all possible screen aspect ratios. Images also increase JAR file size.

---

22 Sep
2009

Article Review by vkmunjpara (20090922)

This article is good explicated with methods and with an example in an easy way. This article shows how to draw gradient on canvas. gradientBox() method addresses some calculation needed for setting gradient on to canvas.

And these functions are applied in paint method defined in GradientRectCanvas wrap.

---

Log in or Join to leave comments.

Here is a J2ME class for gradients drawing, supporting both horizontal and vertical gradients.

This could be useful to substitute background gradient images with graphics drawn by code.

import javax.microedition.lcdui.Graphics;
 
public class Gradient
{
	public static final int VERTICAL = 0;
	public static final int HORIZONTAL = 1;
 
	public static void gradientBox(Graphics g, int color1, int color2, int left, int top, int width, int height, int orientation)
	{
		int max = orientation == VERTICAL ? height : width;
 
		int color1RGB[] = new int[]{(color1>>16) & 0xff,(color1>>8) & 0xff,color1 & 0xff};
		int color2RGB[] = new int[]{(color2>>16) & 0xff,(color2>>8) & 0xff,color2 & 0xff};
 
		int colorCalc[] = new int[]{
				(( color2RGB[0] - color1RGB[0] )<<16)/max,
				(( color2RGB[1] - color1RGB[1] )<<16)/max,
				(( color2RGB[2] - color1RGB[2] )<<16)/max
		};
 
		for(int i = max; i > -1; i--)
		{
 
			g.setColor(
					(color1RGB[0]+((i*colorCalc[0])>>16)) <<16 | 
					(color1RGB[1]+((i*colorCalc[1])>>16)) <<8  | 
					(color1RGB[2]+((i*colorCalc[2])>>16)) 	
					);
 
			if(orientation == VERTICAL)
				g.drawLine(left, top + i, left + width - 1, top + i);
			else
				g.drawLine(left + i, top, left + i, top + height - 1);
		}
	}
}

and here is a sample Canvas using the gradientBox method (the final effect is shown in the screenshot at beginning of this article):

import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
 
public class GradientRectCanvas extends Canvas {
 
	protected void paint(Graphics g)
	{
		int halfWidth = getWidth() / 2;
		int halfHeight = getHeight() / 2;
 
		Gradient.gradientBox(g, 0xffffff, 0xff0000, 0, 0, halfWidth, halfHeight, Gradient.HORIZONTAL);
 
		Gradient.gradientBox(g, 0xff0000, 0xffffff, halfWidth, 0, halfWidth, halfHeight, Gradient.VERTICAL);
 
		Gradient.gradientBox(g, 0xffff00, 0x00ffff, 0, halfHeight, halfWidth, halfHeight, Gradient.VERTICAL);
 
		Gradient.gradientBox(g, 0x00ff00, 0x0000ff, halfWidth, halfHeight, halfWidth, halfHeight, Gradient.VERTICAL);
	}
 
}

Article Metadata

---

Code Example

Source file: Media:GradientRectMIDletSource.zip

Installation file: Media:GradientRectMIDletBinaries.zip

---

Tested with

SDK: Nokia SDK 1.0 for Java

Devices(s): Nokia 7373, Nokia N82

---

Compatibility

Platform(s): Series 40, Symbian

Device(s): MIDP2.0/CLDC 1.1

---

Article

Keywords: Draw, Gradient, Canvas, Graphics

Created: jappit (11 Apr 2008)

Updated: tiviinik (16 Jan 2012)

Last edited: hamishwillee (23 Jan 2012)