J2SE

Custom JPanel with background image

Panel in Java can be customized to paint different color than the default color.
This can be done by overriding paintComponent method of the JPanel.

Here is an example how we can add a background image to the JPanel.

First of all, i created a class called ImagePanel that extends JPanel. The paintComponent(Graphics g) method is overridden to paint the background image. Note i written overloaded constructors where this class can be instantiated without specifying the image file name or with the image file name. When no image file name is specified, the panel will paint the default image (kidsMaths.GIF) as background.

Here’s the source code for the ImagePanel class

import java.awt.Graphics;
import java.awt.Image;
import java.awt.LayoutManager;

import javax.swing.ImageIcon;
import javax.swing.JPanel;

public class ImagePanel extends JPanel
{
/*the default image to use*/
String imageFile = "/images/kidsMaths.GIF";

public ImagePanel()
{
super();
}

public ImagePanel(String image)
{
super();
this.imageFile = image;
}

public ImagePanel(LayoutManager layout)
{
super(layout);
}

public void paintComponent(Graphics g)
{
/*create image icon to get image*/
ImageIcon imageicon = new ImageIcon(getClass().getResource(imageFile));
Image image = imageicon.getImage();

/*Draw image on the panel*/
super.paintComponent(g);

if (image != null)
g.drawImage(image, 0, 0, getWidth(), getHeight(), this);
}
}

I also created a demo class to create a panel with background image. In the demo class, i also created four customized buttons where the buttons are with black back ground color and custom font and font colors.
Note that i created the ImagePanel object by calling the third constructor. Since the ImagePanel class is sub-class of JPanel itself, therefore i instantiated an ImagePanel object to refer JPanel object as follow:

JPanel panel = new ImagePanel(new FlowLayout(FlowLayout.CENTER,50,180));

Here’s the complete code for the PanelDemo class

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import java.awt.BorderLayout;
import java.awt.FlowLayout;
import java.awt.GridLayout;

public class PanelDemo extends JFrame
{
private JButton btn1 = new JButton("EASY");
private JButton btn2 = new JButton("MEDIUM");
private JButton btn3 = new JButton("HARD");
private JButton btn4 = new JButton("High Score");

public PanelDemo()
{
super("Image Panel Demo");

/*Create a penel to add the button panel*/
JPanel panel = new ImagePanel(new FlowLayout(FlowLayout.CENTER,50,180));

/*this button panel is to add in the buttons*/
JPanel panelbtn = new JPanel(new GridLayout(4,1));

/*Add the button to the button panel*/
/*these buttons are customized font and colour*/
btn1.setBackground(new java.awt.Color(0, 0, 0));
btn1.setFont(new java.awt.Font("Showcard Gothic", 1, 24));
btn1.setForeground(new java.awt.Color(0, 255, 102));
btn2.setBackground(new java.awt.Color(0, 0, 0));
btn2.setFont(new java.awt.Font("Showcard Gothic", 1, 24));
btn2.setForeground(new java.awt.Color(0, 255, 102));
btn3.setBackground(new java.awt.Color(0, 0, 0));
btn3.setFont(new java.awt.Font("Showcard Gothic", 1, 24));
btn3.setForeground(new java.awt.Color(0, 255, 102));
btn4.setBackground(new java.awt.Color(0, 0, 0));
btn4.setFont(new java.awt.Font("Showcard Gothic", 1, 24));
btn4.setForeground(new java.awt.Color(0, 255, 102));

panel.add(panelbtn);

panelbtn.add(btn1);
panelbtn.add(btn2);
panelbtn.add(btn3);
panelbtn.add(btn4);

/*Add the panel to the frame*/
add(panel,BorderLayout.CENTER);

/*set size of the frame*/
setSize( 640, 480);

/*close operation*/
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}

public static void main (String... args)
{
new PanelDemo().setVisible(true);
}
}

Here’s the output of the code execution:

Here’s the source code for the example above
Download Source Code