How to keep transparent background in a png image

Question

I have been working on a project for a while. I am building a playing card deck class that I will eventually use in making my own solitaire game. I decided to use images for the indexes of the card rather than having java draw them. I have drawn my own suits in Illustrator and saved them as PNG's with a transparent background. I am able to get the image to show up in my program when I rum it, however when I add the image to my JFrame the background color disappears leading me to believe that for some reason the transparency is not being kept. I have tried two different methods of adding the image to my GUI and have the same result both times. One method I have tried is the method suggested here How to add an image to a JPanel? and the other method I have tried is the one suggested here How can I display a BufferedImage in a JFrame? Both of these methods are not what I am looking for. I want my suit to display on screen and be able to see the background still.

Here is the current code I would like to get working properly, I do realize that it compiles and runs just fine, but I want to be able to still see the background.

import java.io.File;
import java.io.IOException;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.image.BufferedImage;

import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

import javax.imageio.ImageIO;



public class ImageReadTest extends JPanel{
   public static void main(String[] args){
      //Just a simple test on reading pictures into a java file and drawing them
      //onto a JFrame
      System.out.println("Java Image Read Test");
      JFrame frame = new JFrame("Image Reader");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.setBackground(Color.green);

      frame.add(new ImageReadTest());
      frame.pack();
      frame.setSize(250,250);
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
   }

   private BufferedImage image;
   public ImageReadTest(){
      try{
         image = ImageIO.read(new File("Club.png"));
      } catch(IOException e){
         System.out.println("Error");
      }
   }
   @Override
   protected void paintComponent(Graphics g){
      super.paintComponent(g);
      g.drawImage(image, 90, 90, null);
   }
}//end class ImageReadTest

Here is my image for testing my code, thanks for taking the time to read and help!

I'm not an image expert, but I suspect you'll have to set the image type to `BufferedImage.TYPE_INT_ARGB` so the alpha channel is seen. You may not be able to use the defaults provided by `ImageIO.read(File)`. If that turns out to be the issue then the question is a dup of http://stackoverflow.com/q/4694153/18157, which I found with a simple Google search on "java jgrame png transparency" — Jim Garrison, Aug 03 '16 at 05:05
@Jim Garrison What he is doing in the question you have provided is creating a JLabel with the image as an image icon stored in the label. I would like to avoid using that method. I tried it before posting this question and it displays the image but no transparency. In the question you have provided the OP says the transparent parts appear in black which was not the case for me. Also I haven't worked with BufferedImage.TYPE_INT_ARGB and the question provided does not give much of an example on how to use that enum, assuming it is an enum. — Randi, Aug 03 '16 at 05:36

afzalex · Accepted Answer · 2016-08-03T05:49:37.793

2

The problem is not in fetching image. The program is giving you correct result i.e. image's background is transparent. But the color of your ImageReadTest JPanel and the ContentPane of your jFrame is same. Because of which you are unable to detect the difference.

Just replace following line

frame.setBackground(Color.green);

With this

frame.getContentPane.setBackground(Color.green);

Thing to understand here is that there is one more layer between your jPanel and jFrame, which is ContentPane.

Edit : Because you want to make your own pane transparent, you will have to make its opacity as false. To do this add following line in your constructor.

setOpaque(false);

edited Aug 03 '16 at 05:49

answered Aug 03 '16 at 05:13

afzalex

8,598
2
34
61

That did not work. I tried adding that line in place of frame.setBackground(Color.green); as you suggested, but still am getting a grey background. I also tried placing it after I add the image to the screen with no luck. However your answer does give me a better understanding of what the content pane is. Maybe I am missing something else that may be obvious? – Randi Aug 03 '16 at 05:27
setOpaque(false); was the needed code. Thank you for the help! – Randi Aug 03 '16 at 06:11
Do you mean `frame.getContentPane.setBackground(Color.green)` is not required? @Randy_E – afzalex Aug 03 '16 at 06:22
that is a good point, I still need that line as well so it is the combination of the two that solved my question. – Randi Aug 03 '16 at 06:27

How to keep transparent background in a png image

1 Answers1