how to set JFrame background transparent but JPane

Question

As per assignment, we have to create a image viewer just like Picasas one. picture in the middle, translucent black background and changing images with left/right buttons.

i can display an image set it to undercoated, set it to translucent frame but along with frame the the picture becomes translucent. what am i doing wrong.

Dimension dim = Toolkit.getDefaultToolkit().getScreenSize();   

JFrame f1 = new JFrame("ShowImage");
f1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

f1.setSize(dim);

f1.setUndecorated(true);
f1.setOpacity(0.5f);
ShowImage panel = new ShowImage();
panel.setBackground(Color.black);

f1.setContentPane(panel); 
f1.setVisible(true);  

i tried

si.setOpaque();   
si.setBackground(Color.black);
si.setForeground(Color.red);

none worked

when i took a boolean and tested

si.isDisplayable();
si.isVisible();
si.isShowing();

only is visible returns true, rest are false, are these any contributing factor?

Answer 1

The problem is, the JFrame's default Layout manager is a BorderLayout, this means that your ShowImage pane is filling the entire area of the frame (in black). I bet if you changed the background of the ShowPane to red. It would show up completely filled in red instead

Now you can have a look at A Visual Guide to Layout Managers or change the way your ShowPane works

UPDATE

Apologies, I'm not familiar with the new Transparency API in Java 7 (still using the Java 6 hack ;))

Can you verify for me that this is the kind of effect you are looking for? Where the read square would be the image (and the black background is the frame - nb, I only captured the frame)

UPDATE

First you want to read Window.isOpaque and Window.setBackground to understand how this solution works.

Next, don't use Window.setOpacity, it isn't going to achieve what you want. The main reason is that the opacity value is applied to the parent and it's children (this through me at first).

So, the frame code:

Dimension dim = Toolkit.getDefaultToolkit().getScreenSize();

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// Make sure where in the top left corner, please lookup how
// to find the screen insets ;)
setLocation(0, 0);
setSize(dim);
// Set undecorated
setUndecorated(true);
// Apply a transparent color to the background
// This is ALL important, without this, it won't work!
setBackground(new Color(0, 255, 0, 0));

// This is where we get sneaky, basically where going to 
// supply our own content pane that does some special painting
// for us
setContentPane(new ContentPane());
getContentPane().setBackground(Color.BLACK);
setLayout(new BorderLayout());

// Add out image pane...    
ShowImage panel = new ShowImage();
add(panel);

setVisible(true);

The ContentPane. Basically, we need to "trick" the paint engine into thinking where transparent (not opaque) and then paint our own opacity

public class ContentPane extends JPanel {

    public ContentPane() {

        setOpaque(false);

    }

    @Override
    protected void paintComponent(Graphics g) {

        // Allow super to paint
        super.paintComponent(g);

        // Apply our own painting effect
        Graphics2D g2d = (Graphics2D) g.create();
        // 50% transparent Alpha
        g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.5f));

        g2d.setColor(getBackground());
        g2d.fill(getBounds());

        g2d.dispose();

    }

}

I'm sorry for my earlier answer, but I hope this makes up for it ;)

UPDATE with Buttons

This is how I modified it

ShowImage panel = new ShowImage();
panel.setBackground(Color.RED);

setContentPane(new ContentPane());
getContentPane().setBackground(Color.BLACK);
setLayout(new BorderLayout());
add(panel);

JPanel pnlButtons = new JPanel(new FlowLayout(FlowLayout.RIGHT));
pnlButtons.setOpaque(false);
pnlButtons.add(new JButton("<<"));
pnlButtons.add(new JButton("<"));
pnlButtons.add(new JButton(">"));
pnlButtons.add(new JButton(">>"));

// Okay, in theory, getContentPane() is required, but better safe the sorry
getContentPane().add(pnlButtons, BorderLayout.SOUTH);

setVisible(true);