TIP: Wrap a Swing JComponent in a background image

One technique for showing a background image on a JPanel is to override paintComponent() method. This works, but requires subclassing. There is a composition based alternative. It makes use of a transparent JComponent in front of a JLabel that paints the background image (Icon). The overlap of the JComponent and JLabel is achieved using GridBagLayout.

In the following code there are two factory methods to wrap a Swing component in a background image (javax.swing.Icon) :

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import javax.swing.BorderFactory;
import javax.swing.Icon;
import javax.swing.ImageIcon;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;

public class BackgroundImagePanelExample {    
    
    // Set up contraints so that the user supplied component and the
    // background image label overlap and resize identically
    private static final GridBagConstraints gbc;
    static {
        gbc = new GridBagConstraints();
        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.weightx = 1.0;
        gbc.weighty = 1.0;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.anchor = GridBagConstraints.NORTHWEST;
    }
    
    /\*\*
     \* Wraps a Swing JComponent in a background image. Simply invokes the overloded
     \* variant with Top/Leading alignment for background image.
     \*
     \* @param component - to wrap in the a background image
     \* @param backgroundIcon - the background image (Icon)
     \* @return the wrapping JPanel
     \*/
    public static JPanel wrapInBackgroundImage(JComponent component,
            Icon backgroundIcon) {
        return wrapInBackgroundImage(
                component,
                backgroundIcon,
                JLabel.TOP,
                JLabel.LEADING);
    }
    
    /\*\*
     \* Wraps a Swing JComponent in a background image. The vertical and horizontal
     \* alignment of background image can be specified using the alignment
     \* contants from JLabel.
     \*
     \* @param component - to wrap in the a background image
     \* @param backgroundIcon - the background image (Icon)
     \* @param verticalAlignment - vertical alignment. See contants in JLabel.
     \* @param horizontalAlignment - horizontal alignment. See contants in JLabel.
     \* @return the wrapping JPanel
     \*/
    public static JPanel wrapInBackgroundImage(JComponent component,
            Icon backgroundIcon,
            int verticalAlignment,
            int horizontalAlignment) {
        
        // make the passed in swing component transparent
        component.setOpaque(false);
        
        // create wrapper JPanel
        JPanel backgroundPanel = new JPanel(new GridBagLayout());
        
        // add the passed in swing component first to ensure that it is in front
        backgroundPanel.add(component, gbc);
        
        // create a label to paint the background image
        JLabel backgroundImage = new JLabel(backgroundIcon);
        
        // set minimum and preferred sizes so that the size of the image
        // does not affect the layout size
        backgroundImage.setPreferredSize(new Dimension(1,1));
        backgroundImage.setMinimumSize(new Dimension(1,1));
        
        // align the image as specified.
        backgroundImage.setVerticalAlignment(verticalAlignment);
        backgroundImage.setHorizontalAlignment(horizontalAlignment);
        
        // add the background label
        backgroundPanel.add(backgroundImage, gbc);
        
        // return the wrapper
        return backgroundPanel;
    }
    
    public static void main(String[] args) {
        JFrame frame = new JFrame("Background Image Panel Example");

        // Create some GUI
        JPanel foregroundPanel = new JPanel(new BorderLayout(10, 10));
        foregroundPanel.setBorder(
                BorderFactory.createEmptyBorder(10,10,10,10));
        foregroundPanel.setOpaque(false);
        
        foregroundPanel.add(new JLabel("Comment:"), BorderLayout.NORTH);
        foregroundPanel.add(new JScrollPane(new JTextArea(5,30)),
                BorderLayout.CENTER);
        foregroundPanel.add(
                new JLabel(
                "Please enter your comments in text box above." +
                " HTML syntax is allowed."), BorderLayout.SOUTH);
        
        frame.setContentPane(wrapInBackgroundImage(foregroundPanel,
                new ImageIcon(
                BackgroundImagePanelExample.class.getResource("bg.jpg"))));
        
        frame.pack();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

The above code uses the following image as the background:

Background image

Note: Make sure to place this image in the same folder as the above java class.

Running the above code shows the following GUI:

Background image

The other advantage of this technique is that it only uses property settings. Therefore this can be used in the GUI builders like Matisse from Netbeans. Here is sample Netbeans project. Here is a screenshot of panel with a background image in Matisse GUI builer:

Matisse

Comments:

Hi sandip,
ur tips are great... really solve my problems
but one more thg to add is :
<code>component.setOpaque(false)</code> is insufficient

I tried with a scrollpane that consists a few panels to achieve transparency for every panel/container within that scrollpane,
I have to loop thru the components array of scrollpane and set them one by one

<code> Component[] comps = component.getComponents(); for (int i=0; i < comps.length; i++) { if (comps[i] instanceof JComponent ) { ( (JComponent )comps[i]).setOpaque(false); } } </code>

Posted by guest on September 13, 2006 at 04:10 PM PDT #

Hi sandip,
ur tips are great... really solve my problems
but one more thg to add is, this statement is insufficient :
component.setOpaque(false)

I tried with a scrollpane that consists a few panels to achieve transparency for every panel/container within that scrollpane,
I have to loop thru the components array of scrollpane and set them one by one

Component[] comps = component.getComponents();
for (int i=0; i < comps.length; i++)
{
  if (comps[i] instanceof JComponent )
   {
     ( (JComponent )comps[i]).setOpaque(false);
   }
}

Posted by guest on September 13, 2006 at 04:14 PM PDT #

Hi sandip, I too faced the same situation and did the subclass way on a JTree to give it a BG image. Later, I also realized that it is not very portable, now that I want to apply it to JTextArea too. My solution is to subclass the JScrollPane instead. Why? I happened to encounter the same scollpane-opaque dilemma faced by Mr. 199.40.204.25 . IMO, your approach is great for covering whole app, while mine covers scrollable components. To 199.40.204.25 : Have you tried "scrollpane.getViewport().setOpaque(false)", referring to the scrollpane that your component being wrapped inside. I don't the time now, but I'll be happy to share my code later if anyone is expressed interest.

Posted by Augustus Thoo on December 05, 2006 at 11:40 AM PST #

Thanks Helped me alot..... :)

Posted by Matthew Marlin on August 21, 2008 at 10:25 PM PDT #

ght

Posted by guest on September 11, 2008 at 06:36 PM PDT #

Post a Comment:
Comments are closed for this entry.
About

sandipchitale

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today