Let the transparent part of the image on a button be transparent

Question

I'm using 2 pictures, one of these is the background of the screen and the other one is the background of a button. The image of the button is transparent in some parts. I'd like it to cover the background image on the transparent parts

It should look like this, but it doesn't. It looks like this.

Here is my code:

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
class TryOut1 extends JFrame
{

   public TryOut1()
   {
       screen();
       buttonDoor();

       setSize(1280,1024); 
   }

   public void screen(){
       setSize(1280,1024);

       setDefaultCloseOperation(EXIT_ON_CLOSE);
       setVisible(true);
       setLayout(new BorderLayout());
       setContentPane(new JLabel(new ImageIcon("Ziegel4.jpg")));
       setLayout(new FlowLayout());

       setSize(1280,1024);
   }

   public void buttonDoor(){
       JButton b1 = new JButton(new ImageIcon("Tor2.png"));
       b1.setEnabled(true);
       b1.setVisible(true);
       b1.setBackground(new Color( 0, 0, 0, 0) );


       add(b1);

       b1.addActionListener(new ActionListener(){
       public void actionPerformed(ActionEvent e){
           dispose();
       }
       });
   }

   public static void main(String args[]) 
    {
        new TryOut1();
    }
}

How would I be able to make the transparent parts of the image actually transparent

Thank u for ur help in advance ^^

score 1 · Accepted Answer · answered May 02 '19 at 13:54

Instead of creating a JLabel, adding the background image to it, and then add this label to your content pane is not the best approach. The label will be treated as a component and all other components won't be oriented properly by the layout manager.

You should draw the background image of your content pane by overriding paintComponent(Graphics g) method as shown here.

Then change the proper properties of your JButton and make it transparent as shown here.

All of these in an SSCCE:

public class TryOut1 extends JFrame {

    public TryOut1() {
        try {
            screen();
        } catch (IOException e) {
            e.printStackTrace();
        }
        buttonDoor();

        setSize(1280, 1024);
    }

    public void screen() throws IOException {
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setLayout(new BorderLayout());

        File desktop = new File(System.getProperty("user.home"), "Desktop");
        File backgroundImg = new File(desktop, "background.png");
        Image img = ImageIO.read(backgroundImg);
        JPanel contentPane = new JPanel(new FlowLayout()) {
            @Override
            protected void paintComponent(Graphics g) {
                super.paintComponent(g);
                g.drawImage(img, 0, 0, null);
            }
        };
        setContentPane(contentPane);
    }

    public void buttonDoor() {
        File desktop = new File(System.getProperty("user.home"), "Desktop");
        File doorFile = new File(desktop, "door.png");
        JButton b1 = new JButton(new ImageIcon(doorFile.getAbsolutePath()));
        b1.setOpaque(false);
        b1.setContentAreaFilled(false);
        b1.setBorder(BorderFactory.createEmptyBorder());
        b1.setBorderPainted(false);
        add(b1);

        b1.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                dispose();
            }
        });
    }

    public static void main(String args[]) {
        // All swing apps must run in their own thread.
        SwingUtilities.invokeLater(() -> new TryOut1().setVisible(true));
    }
}

Preview: (ignore the white space at right, my background image is small)

`all other components won't be oriented properly by the layout manager.` - if you set the layout manager of the label they will. Given that the above code paints the image at its original size, it is if fact better to use a JLabel because now the label will have a preferred size of the image and the frame will display and pack() properly. So in this case I would just use a JLabel. When you do custom painting you are also responsible for determine the preferred size of the component. I would only use custom painting if you need to scale/tile the background image. — camickr, May 02 '19 at 14:35

score 1 · Answer 2 · answered May 02 '19 at 14:06

1

Try the below methods on your button :

b1.setBorderPainted(false);
b1.setContentAreaFilled(false);
b1.setFocusPainted(false);
b1.setOpaque(false);

answered May 02 '19 at 14:06

nullPointer

4,419
1
15
27

Good call. That's the technique I used in [this answer](https://stackoverflow.com/a/10862262/418556) which forms 5 buttons and 4 labels from a single image (check the link, it's not as illogical as it may sound). – Andrew Thompson May 02 '19 at 19:08

Let the transparent part of the image on a button be transparent

2 Answers2