Image on JButton

Question

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Image;
import javax.imageio.ImageIO;
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.Icon;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.WindowConstants;

public class Test extends JPanel {

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                constructGUI();
            }
        });
    }

    private static void constructGUI() {
        JFrame frame = new JFrame("Testy");
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

        JPanel centerPanel = new JPanel();
        centerPanel.setBackground(Color.DARK_GRAY);
        centerPanel.setPreferredSize(new Dimension(100, 400));
        frame.add(centerPanel, BorderLayout.CENTER);

        Test eastPanel = new Test();
        frame.add(eastPanel, BorderLayout.EAST);

        frame.pack();
        frame.setVisible(true);
    }

    public Test() {

        setLayout(new BoxLayout(this, BoxLayout.PAGE_AXIS));
        Dimension d = new Dimension(50, 50);

        JButton button1 = new JButton("");
        button1.setPreferredSize(d);

        button1.setIcon(new ImageIcon(this.getClass().getResource("/Pictures/ellipse.png")));

        button1.setMaximumSize(new Dimension(Integer.MAX_VALUE, button1.getMinimumSize().height));
        add(button1);

        JButton button2 = new JButton("");
        button2.setPreferredSize(d);

        button2.setIcon(new ImageIcon(this.getClass().getResource("/Pictures/ellipse.png")));

        button2.setMaximumSize(new Dimension(Integer.MAX_VALUE, button2.getMinimumSize().height));
        add(button2);

        JButton button3 = new JButton("");
        button3.setPreferredSize(d);

        button3.setIcon(new ImageIcon(this.getClass().getResource("/Pictures/ellipse.png")));

        button3.setMaximumSize(new Dimension(Integer.MAX_VALUE, button3.getMinimumSize().height));
        add(button3);

        add(Box.createVerticalGlue());

    }

}

In my program I am trying to put the ellipse picture on top of all my buttons. As you can see in the image I posted, the ellipse.png is in the "Pictures" source folder.

However, the image does not appear on the JButtons for some reason.

I have read many posts but I can't see a way to solve my problem.

Also, here is a link to the actual ellipse picture:

https://maxcdn.icons8.com/Share/icon/Editing//ellipse_stroked1600.png

Answer 1

First you have to use image that have smaller resolution size ( your image have 1600x1600 pixels , i would suggest 32X32)

Use image like this

and refer below code

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.WindowConstants;

public class Test extends JPanel {

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                constructGUI();
            }
        });
    }

    private static void constructGUI() {
        JFrame frame = new JFrame("Testy");
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

        JPanel centerPanel = new JPanel();
        centerPanel.setBackground(Color.DARK_GRAY);
        centerPanel.setPreferredSize(new Dimension(100, 400));
        frame.add(centerPanel, BorderLayout.CENTER);

        Test eastPanel = new Test();
        frame.add(eastPanel, BorderLayout.EAST);

        frame.pack();
        frame.setVisible(true);
    }

    public Test() {

        setLayout(new BoxLayout(this, BoxLayout.PAGE_AXIS));
        Dimension d = new Dimension(50, 50);

        JButton button1 = new JButton("");
        button1.setPreferredSize(d);

        ImageIcon imageIcon = new ImageIcon(System.getProperty("user.dir") + "/Pictures/ellipse.png");

        button1.setIcon(imageIcon);

        button1.setMaximumSize(new Dimension(Integer.MAX_VALUE, button1.getMinimumSize().height));
        add(button1);

        JButton button2 = new JButton("");
        button2.setPreferredSize(d);

        button2.setIcon(imageIcon);

        button2.setMaximumSize(new Dimension(Integer.MAX_VALUE, button2.getMinimumSize().height));
        add(button2);

        JButton button3 = new JButton("");
        button3.setPreferredSize(d);

        button3.setIcon(imageIcon);

        button3.setMaximumSize(new Dimension(Integer.MAX_VALUE, button3.getMinimumSize().height));
        add(button3);

        add(Box.createVerticalGlue());

    }

}

Your out-put should be like this.

Answer 2

Eclipse is picky about images and crap, so here is the workaround (sorry it's so long.)

Dont make a seperate source folder for your images. Put it in your main source folder under a subfolder called "assets" or something.

From there, create a buffered image and an input stream (java.awt.image.BufferedImage and java.io.InputStream)

Then you want to set the input stream to the image using the getResourceAsStream method.

Then do the following

bufferedImageName = ImageIO.read(inputStreamName);

From there, use the java.awt.Graphics library to paint it to the JButton.

Finished!