How to create a custom Java Swing GUI Component with a shape and gradient

Question

I have to create a custom component on my JFrame, the Component will show the storage status of that user, the storage will be in percentage.

I need to create something like this:

I tried a custom JLabel to create a label and then coloring that label from left to right, but I was unable to create a cloud shape Label and then filling that label according to a variable value.

How should I do this and what is the best way to do it?

One time I thought I should use series of images to show the status of user storage.

Thanks!

Answer 1

I think you're going to need to use an image mask (examples here and here) if you are to replicate that cloud exactly.

The process will require 2 images:

• The cloud outline (the blue parts)
• An image mask is the shape of the cloud, probably black outside and white inside

Then your drawing process, which you'll have to do each time the % storage changes will be:

1. Create a new buffered image
2. Draw then green fill bar in the style you want (e.g. slanted as in this image)
3. Copy the image mask over this
4. Draw this new image to the screen, with the mask applied as described here
5. Draw the cloud outline image to screen

That's going to take an hour or so for you to put together, so I'm not going to do it for you. Have a go, and if you run in to problems (or don't understand anything I just described) then ask about that specifically.

Answer 2

You can use GlyphVector#getGlyphOutline() to get the shape of a Unicode character like ☁ \u2601 and fill it with a GradientPaint.