By

Gradient Background Fill on BlackBerry

I was working on a project and figured out a simple way of understanding the drawShadedFilledPath graphic function for BlackBerry, that I have struggled with in the past.

You can use this function not only to draw a gradient background, but gradient buttons on BlackBerry as well.

Let’s see how it works.

drawShadedFilledPath takes 5 parameters, but we are only going to worry about 3 for this tutorial. The X Co-ordinate, the Y-Co-ordinates and the Colours we want to fill in. Simple right?

g.drawShadedFilledPath(X_PTS, Y_PTS, null, PATH_GRADIENT, null);

I want to fill a background on a 640 x 480 screen resolution, with a gradient that evenly fills from Blue to Red.

The first step is to override the paint function in a Manager. I did this using a regular VerticalFieldManager.

public VerticalFieldManager main = new VerticalFieldManager()
{
	protected void sublayout(int maxWidth, int maxHeight)
	{
		super.sublayout(640, 480);
		setExtent(640, 480);
	}

	protected void paint(Graphics g)
	{
		g.clear();
		super.paint(g);
	}
};

Next, we need to setup the X and Y pts of where we want to fill in colour.

Starting with the co-ordinate “0,0″, I like to fill in a clockwise direction. If you don’t fill in this direction, and you mess up your co-ordinates (which is easy to do) you can get some funky results (or no results at all!).

Note: I use “000″ for “0″ since it’s easier to read in code.

// where the gradient begins and ends
int[] X_PTS = { 000, 640, 640, 0 };
int[] Y_PTS = { 000, 000, 480, 480 };

The above points look like this, on a 640 x 480 screen size.

Now we need to have the corresponding colours for the points. Since we want an even distribution of colour and gradient, the points colours are as follows:

  • [000,000] – Blue
  • [640,000] – Blue
  • [640,480] – Red
  • [000,480] – Red
private static final int[] PATH_GRADIENT =
{
	0x0000FF,    // 000, 000
	0x0000FF,    // 640, 000
	0x00FF00,    // 640, 480
	0x00FF00     // 000, 480
};

Now we run the app, and we get a Gradient! You can add any colour you want, I just made it Blue and Red so you can see it easily.

Now we can start getting fancy by adding more points and fading the colours from Blue to Red and back to Blue again! The principle is almost the same, but lets walk through it one more time.

Setup our X and Y points

// where the gradient begins and ends
int[] X_PTS = { 000, 640, 640, 640, 000, 000 };
int[] Y_PTS = { 000, 000, 240, 480, 480, 240 };

Visually (well, mentally.. if you can imagine) they look like this:
Again, each point needs it’s corresponding colour:

  • [000,000] – Blue
  • [640,000] – Blue
  • [640,240] – Red
  • [640,480] – Blue
  • [000,480] – Blue
  • [000,240] – Red
private static final int[] PATH_GRADIENT =
{
	0x0000FF, 	// 000, 000
	0x0000FF,  	// 640, 000
	0xFF0000,  	// 640, 240
	0x0000FF, 	// 640, 480
	0x0000FF,  	// 000, 480
	0xFF0000  	// 000, 240
};

And…

And here is the complete code!

import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;

public class MstrGradient extends MainScreen
{

	private static final int[] PATH_GRADIENT =
	{
		0x0000FF, 	// 000, 000
		0x0000FF,  	// 640, 000
		0xFF0000,  	// 640, 240
		0x0000FF, 	// 640, 480
		0x0000FF,  	// 000, 480
		0xFF0000  	// 000, 240
	};

	// where the gradient begins and ends
	int[] X_PTS = { 000, 640, 640, 640, 000, 000 };
	int[] Y_PTS = { 000, 000, 240, 480, 480, 240 };

	public VerticalFieldManager main = new VerticalFieldManager()
	{
		protected void sublayout(int maxWidth, int maxHeight)
		{
			super.sublayout(Global.WIDTH, Global.HEIGHT);
			setExtent(Global.WIDTH, Global.HEIGHT);
		}

		protected void paint(Graphics g)
		{
			g.clear();
			g.drawShadedFilledPath(X_PTS, Y_PTS, null, PATH_GRADIENT, null);
			super.paint(g);
		}
	};

	public MstrGradient()
	{
		this.add(main);
	}
}

Leave a Reply

Your email address will not be published. Required fields are marked *


6 − three =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>