Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Java Development

Reply
New Contributor
mikeym2
Posts: 2
Registered: ‎01-12-2010
My Device: bold
My Carrier: verizon

Example: gradient-filled rounded rectangle with drawShadedFilledPath

I struggled quite a bit to figure out how to draw a rounded rectangle with a gradient fill using the Graphics.drawShadedFilledPath method. When I finally got it, the solution surprised me.

 

If you're struggling to use Graphics.drawShadedFilledPath to draw a nice-looking button, perhaps this article I wrote will prove helpful:

 

http://www.deepgraysea.com/bbroundedrect.htm

 

Offered as a thank-you for all the other helpful solutions in this forum. I'm sort of a "Google-and-paste" programmer so I'd be lost without you guys. Hope this helps someone,

 

Michael Micheletti

Please use plain text.
Developer
simon_hain
Posts: 15,947
Registered: ‎07-29-2008
My Device: Z10 LE
My Carrier: O2 Germany

Re: Example: gradient-filled rounded rectangle with drawShadedFilledPath

Very well written example!

And a lot of work for a simple button - that's how some apps get the good looks :smileyhappy:

----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
Developer
rcmaniac25
Posts: 1,804
Registered: ‎04-28-2009
My Device: Z10 (STL100-4)-10.2.1.2174, Z10 (STL100-3)-10.3.0.700 Dev OS, Z30 (STA100-5)-10.3.0.700 Dev OS, PlayBook (16GB)-2.1.0.1917
My Carrier: Verizon

Re: Example: gradient-filled rounded rectangle with drawShadedFilledPath

I agree with simon, very well written. Helped me and gave good examples (I'm a visual learner).

---Spends time in #blackberrydev on freenode (IRC)----
Three simple rules:
1. Please use the search bar before making new posts.
2. "Like" posts that you find helpful.
3. If a solution has been found for your post, mark it as solved.
--I code too much. Well, too bad.
Please use plain text.
Developer
hakimrie
Posts: 82
Registered: ‎07-23-2009
My Device: 9900
My Carrier: XL

Re: Example: gradient-filled rounded rectangle with drawShadedFilledPath

Please use plain text.
Developer
Ted_Hopp
Posts: 1,305
Registered: ‎01-21-2009
My Device: Not Specified

Re: Example: gradient-filled rounded rectangle with drawShadedFilledPath

Very nice write-up. Thanks for posting it!

 

You mentioned that you hadn't figured out the purpose of the last argument to drawShadedFilledPath. That is needed if you wanted to fill a shape that had a disconnected boundary--a donut, for instance. The last argument would be an array equal in length to the number of boundary pieces. Each entry would be the start index of each boundary piece within the other arrays.




Solved? click "Accept as solution". Helpful? give kudos by clicking on the star.
Please use plain text.
New Contributor
mikeym2
Posts: 2
Registered: ‎01-12-2010
My Device: bold
My Carrier: verizon

Re: Example: gradient-filled rounded rectangle with drawShadedFilledPath

Ah, thanks Ted for the clue about the last argument. Lucky I didn't need to draw a donut-shaped button or it might have taken me another week or so :-) Thanks to all for the kind word, glad the example is helpful.

Please use plain text.
Developer
dnepr
Posts: 723
Registered: ‎03-12-2009
My Device: Playbook

Re: Example: gradient-filled rounded rectangle with drawShadedFilledPath

[ Edited ]

Very nice.

 

Please use plain text.
Developer
austinfrance
Posts: 65
Registered: ‎01-05-2010
My Device: Not Specified

Re: Example: gradient-filled rounded rectangle with drawShadedFilledPath

[ Edited ]

Thank you for that awesomely helpful article.  In return here is the generic fill routine I wrote based on your article which others may find useful:

 

import net.rim.device.api.ui.Graphics;
public class GraphicsEx {
 static public void drawOptionallyRoundedGradientFilledBox
  (Graphics g, int x, int y, int w, int h, 
    int r1, int r2, int r3, int r4, 
    int c1, int c2, int c3, int c4) {
  int x2 = x+w-1;
  int [] xPts = {
      x, x, x+r1, x2-r2, x2, x2, 
      x2, x2, x2-r3, x+r4, x, x
  };
  int y2 = y+h-1;
  int [] yPts = {
      y+r1, y, y, y, y, y+r2, 
      y2-r3, y2, y2, y2, y2, y2-r4
  };
  int [] gradient = {
    c1, c1, c1, c2, c2, c2,
    c3, c3, c3, c4, c4, c4,
  };
  byte [] pointTypes = {
    Graphics.CURVEDPATH_END_POINT, 
    r1 > 0 ? Graphics.CURVEDPATH_QUADRATIC_BEZIER_CONTROL_POINT 
        : Graphics.CURVEDPATH_END_POINT,
    Graphics.CURVEDPATH_END_POINT, 
    Graphics.CURVEDPATH_END_POINT, 
    r2 > 0 ? Graphics.CURVEDPATH_QUADRATIC_BEZIER_CONTROL_POINT 
        : Graphics.CURVEDPATH_END_POINT,
    Graphics.CURVEDPATH_END_POINT,       
    Graphics.CURVEDPATH_END_POINT, 
    r3 > 0 ? Graphics.CURVEDPATH_QUADRATIC_BEZIER_CONTROL_POINT 
        : Graphics.CURVEDPATH_END_POINT,
    Graphics.CURVEDPATH_END_POINT, 
    Graphics.CURVEDPATH_END_POINT, 
    r4 > 0 ? Graphics.CURVEDPATH_QUADRATIC_BEZIER_CONTROL_POINT 
        : Graphics.CURVEDPATH_END_POINT,
    Graphics.CURVEDPATH_END_POINT, 
  };
  g.drawShadedFilledPath(xPts, yPts, pointTypes, gradient, null);
 }
}

 

Where

 

  • g is your graphics object
  • x,y are the co-ordinates of the top left corner
  • w,h are the dimensions of the rectangle
  • r1-r4 are the corner sizes of top left, top right, bottom right and bottom left corners (0 for no corner)
  • c1-c4 are the colors for the top left, top right, bottom right and bottom left gradient colours

And here is how I use it to draw the field boxes that mimic the way the UITableView works on iPhone

 

int c1 = hasFocus ? Color.BLUE : Color.WHITE;
int c2 = hasFocus ? Color.DARKBLUE : Color.WHITE;
int cornersBot = 10;
int cornersTop = 10;

if (index < view.getFieldCount(sectionIndex)-1) cornersBot = 0; 
if (index > 0) cornersTop = 0;

GraphicsEx.drawOptionallyRoundedGradientFilledBox(graphics,
   0, y, width, rowHeight,
   cornersTop, cornersTop, cornersBot, cornersBot,
   ct, ct, cb, cb);

 

 

Please use plain text.
New Contributor
Manas
Posts: 2
Registered: ‎03-18-2010
My Device: 9530 Simulator
My Carrier: No Carrier

Re: Example: gradient-filled rounded rectangle with drawShadedFilledPath

Yes, It's really nice and also helpful.


But one thing I could not understand , How to use the offset parameter in the Graphics.drawShadedFilledPath() method.

 

Can anyone help me?

Please use plain text.
Developer
austinfrance
Posts: 65
Registered: ‎01-05-2010
My Device: Not Specified

Re: Example: gradient-filled rounded rectangle with drawShadedFilledPath

I think the offset is used as follows, based only on reading the docs, though I am not entirely sure if each offset is both the end of the previous path and the beginning of the next path or if the offset is used in start+end pairs.

 

The x and y points are point along your path. Imagine a picture with dots on no lines. A bit like a dot to dot picture.

 

The offsets specify the paths between those dots, and the paths may cross the same point several times.  So the offsets specify which points to visit along its path.

 

So for example, two triangles (or a rectangle with triangle cut out) might be drawn as follows.

 

off x,y

0   0,0

1   100,0

2   200,0

3   200,50

4   0,50

 

offsets (path)

1, 4, 0, 1, 2, 3, 1

 

I would have to experiment to be sure.

 

 

Please use plain text.