First you've to know some about Swing painting mechanism. Each Swing component - JComponent - has a paint method which has a role of calling three main method to draw the component right
- paintComponent(Graphics g) this function is responsible for drawing the status of the component. Think of the JButton's paintComponent, it's responsible for drawing the JButton in three ways: normal, mouse over, clicked. The button is aware of it's status so it could paint itself right.
- paintBorder(Graphics g) this is the one responsible for drawing the border of your component, in case it have a border.
- paintChildren(Graphics g) this one is called to draw children components of the current component. For example, a panel which has two buttons. This function would call the paint of each component attached to this component.
Read this if you've difficulties understanding http://java.sun.com/products/jfc/tsc/articles/painting/
Secondly you've to know about Opacity. What is opacity? An opaque thing is difficult to see through - your room walls -. In Java each JComponent defines it's opacity. If it's opaque so you can't see through. The else is you can see through.
For example we've two panels. p1 and p2. p2 is a child of p1. p1's background is red, p2's background is green.
If the two panels are opaque you should see a green color; as p2 is opaque and you can't see p1 through it.
If p1 is opaque and p2 is not. You'll see a red color. whatever p2's background is you'll see a red color. As p2 is not opaque you can see through.
Read this if you didn't get it
Thirdly we're now to start coding.
Open your favorite IDE which is Eclipse for me.
And follow the next steps
1- Create a new Java project and name it "Gradient Panel"
2- Create a new package - to organize your work - and name it "gradient"
3- Create a new class name it "GradientPanel".
5- Now open you editor and type in the following code
package gradient;Now we've a gradient panel. We have to create a demo and try playing.
* GradientPanel is a class with a gradient background, put your non-opaque objects over it and enjoy.
* @author Mohammad Abou-Basha
public class GradientPanel extends JPanel
private Color startColor;
private Color endColor;
this( Color.GRAY , Color.WHITE );
public GradientPanel( Color startColor , Color endColor )
this.startColor = startColor;
this.endColor = endColor;
protected void paintComponent( Graphics g )
super.paintComponent( g );
int panelHeight = getHeight();
int panelWidth = getWidth();
GradientPaint gradientPaint = new GradientPaint( 0 , 0 , startColor , panelWidth , panelHeight , endColor );
if( g instanceof Graphics2D )
Graphics2D graphics2D = (Graphics2D)g;
graphics2D.setPaint( gradientPaint );
graphics2D.fillRect( 0 , 0 , panelWidth , panelHeight );
6- Create a new Frame, name it "GradientPanelDemo". For the ease you can use the visual editor.
7- Drag a new bean and select the GradientPanel. The code should be something like that
package gradient;8- You should see that in your visual editor
public class GradientPanelDemo extends JFrame
private static final long serialVersionUID = 1L;
private JPanel jContentPane = null;
private GradientPanel gradientPanel = null;
* This is the default constructor
* This method initializes this
* @return void
private void initialize()
this.setSize( 300 , 200 );
this.setContentPane( getJContentPane() );
this.setTitle( "JFrame" );
* This method initializes jContentPane
* @return javax.swing.JPanel
private JPanel getJContentPane()
if( jContentPane == null )
jContentPane = new JPanel();
jContentPane.setLayout( new BorderLayout() );
* This method initializes gradientPanel
* @return gradient.GradientPanel
private GradientPanel getGradientPanel()
if( gradientPanel == null )
gradientPanel = new GradientPanel();
9-Now let add some buttons and text stuff and check the result
Don't you remember? I told you about opacity. Simply make this panel not opaque and check the result
jPanel.setOpaque( false );
Preview after setting the panel opacity to false
Use this constructor to define your own colors
gradientPanel = new GradientPanel( Color.RED , Color.YELLOW );
This was the first tip having great Swing GUI.
Click here to get the full project.
Comments are welcomed, so feel free.