How do I add an image to GUI such as a banner?

Question

I've started learning Java and the first thing I'm trying to do is convert all of my AutoIt programs to Java.

The first program I'm trying to convert is an authentication program I created (basically a password protection program for social media sites). The first thing I decided to do was recreate the GUI. I've already managed to draw a JFrame and change the background color to match that of the AutoIt gui. The next step would be to add the banner. I'm having trouble doing so. I'm looking for a function to add an image to the frame and be able to move it around using pixels.

Example: (Note, this is not a real function.. That I'm aware of.)

addImageToGUI("myImage.jpg", 45, 35, 250, 500);

That way, I could navigate the image around the frame simply by changing the numbers in the functions parameters.

Below is the code I have so far.

// Imports
import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;


// Class. public class <nameOfFile>
public class GAC extends JPanel {
    // Main class.
    public static void main(String[] args) {
        drawGUI ();
    }
    // Method to create GUI
    public static void drawGUI() {
        // Create a new JFrame and name it 'f'.
        JFrame f = new JFrame("Griffin Account Cracker - Java Edition");
        // Set the size of the new GUI.
        f.setSize(600, 785);
        // I don't know what this does.
        f.add(new GAC());
        // Tell the GUI to exit whenever the 'x' button is pressed.
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        String path = "Images/logo.jpg";
        File file = new File(path);
        BufferedImage image = ImageIO.read(file);
        JLabel label = new JLabel(new ImageIcon(image));
        f.getContentPane().add(label);

        // Make the GUI visible.
        f.setVisible(true);
    }

    // Method to set GUI's background color.
    @Override
public void paint(Graphics f) {

    String guiBanner = "Images/logo.jpg";
    Image guiBannerImg = ImageIO.read(new File(guiBanner));

    f.drawImage(guiBannerImg, 25, 25, null);

    f.setColor(Color.decode("#A0A0A4"));
    f.fillRect(0, 0, this.getWidth(), this.getHeight());
}
}

Also, would anybody mind telling me what the below part of my code does? I'm very new to Java.

f.add(new GAC());

Any suggestions is greatly appreciated!

Answer 1

f.add(new GAC()) adds a panel to your frame. It is not strictly necessary in this case, but you would have to do some tweaks to remove it (like making your class extend frame instead of panel). I will leave that discussion aside.

The easiest way to do this is to just draw the banner within your paint method. A better way might be to create a new custom class extending panel, add that class to your frame, and add these changes in the paint method of that class. I leave it to you - either way, the code is similar. To get an image:

String myPath = "somepath.gif";
Image myImage = ImageIO.read(new File(myPath));

The next step is to paint that image, which also happens in the paint() method:

g.drawImage(myImage, xPixel, yPixel, null);

Hope this helps!

Edit: Full code:

import java.awt.*;
import javax.swing.*;
import java.io.File;
import javax.imageio.ImageIO;

// Class. public class <nameOfFile>
public class GAC extends JPanel {
    // Main class.
    public static void main(String[] args) {
        drawGUI();
    }

    // Method to create GUI
    public static void drawGUI() {
        // Create a new JFrame and name it 'f'.
        JFrame f = new JFrame("Griffin Account Cracker - Java Edition");

        // Set the size of the new GUI.
        f.setPreferredSize(new Dimension(600, 785));

        // add a panel to the frame - the background image will be drawn on the panel
        GAC t = new GAC();
        t.setVisible(true);
        f.add(t);

        // Tell the GUI to exit whenever the 'x' button is pressed.
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // Make the GUI visible.
        f.setVisible(true);
        f.pack();
        f.repaint();
    }

    // Method to set GUI's background color.
    @Override
    public void paintComponent(Graphics f) {
        //good practice to call this
        super.paintComponent(f);

        //color the background
        f.setColor(Color.decode("#A0A0A4"));
        f.fillRect(0, 0, this.getWidth(), this.getHeight());

        //we need this try block to handle file reading errors
        try {
            //get the image from a file and scale it to the size you want
            String guiBanner = "Images/Logo.jpg";
            Image guiBannerImg = ImageIO.read(new File(guiBanner)).getScaledInstance(480, 270, Image.SCALE_SMOOTH);

            //draw it at the position you want
            f.drawImage(guiBannerImg, 25, 25, null);
        } catch (Exception e) {
        }
    }
}

Answer 2

There are simple so many ways you might be able to achieve this it's not funny.

For example, you could use a JLabel to show the image and add another JLabel ontop of it...

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.EventQueue;
import java.awt.Font;
import java.awt.GridBagLayout;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class Test {

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

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                try {
                    JFrame frame = new JFrame("Testing");
                    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                    frame.add(new TestPane());
                    frame.pack();
                    frame.setLocationRelativeTo(null);
                    frame.setVisible(true);
                } catch (IOException exp) {
                    exp.printStackTrace();
                }
            }
        });
    }

    public class TestPane extends JPanel {

        public TestPane() throws IOException {
            setLayout(new BorderLayout());
            JLabel background = new JLabel(new ImageIcon(ImageIO.read(getClass().getResource("Background.jpg"))));
            JLabel text = new JLabel("Say hello to my little friend");
            text.setFont(text.getFont().deriveFont(Font.BOLD, 24f));
            text.setForeground(Color.WHITE);

            background.setLayout(new GridBagLayout());
            background.add(text);

            add(background);
        }

    }

}

Now, there are issues with this approach that I don't like, for example, if the text is too large, the background label won't increase in size

So, instead, you could just manipulate the properties of the JLable and use it to display the background image and text

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.EventQueue;
import java.awt.Font;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class Test {

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

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                try {
                    JFrame frame = new JFrame("Testing");
                    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                    frame.add(new TestPane());
                    frame.pack();
                    frame.setLocationRelativeTo(null);
                    frame.setVisible(true);
                } catch (IOException exp) {
                    exp.printStackTrace();
                }
            }
        });
    }

    public class TestPane extends JPanel {

        public TestPane() throws IOException {
            setLayout(new BorderLayout());
            JLabel background = new JLabel(new ImageIcon(ImageIO.read(getClass().getResource("Background.jpg"))));
            background.setText("Say hello to my little friend");
            background.setFont(background.getFont().deriveFont(Font.BOLD, 24f));
            background.setForeground(Color.WHITE);

            background.setHorizontalAlignment(JLabel.CENTER);
            background.setVerticalAlignment(JLabel.CENTER);
            background.setHorizontalTextPosition(JLabel.CENTER);
            background.setVerticalTextPosition(JLabel.CENTER);

            add(background);
        }

    }

}

Now, if you want to add some additional functionality in the future (anchor position, scale, etc), you could use a custom component for painting the background image...

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridBagLayout;
import java.awt.image.BufferedImage;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class Test {

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

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                try {
                    JFrame frame = new JFrame("Testing");
                    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                    frame.add(new TestPane());
                    frame.pack();
                    frame.setLocationRelativeTo(null);
                    frame.setVisible(true);
                } catch (IOException exp) {
                    exp.printStackTrace();
                }
            }
        });
    }

    public class TestPane extends JPanel {

        public TestPane() throws IOException {
            setLayout(new BorderLayout());
            BufferedImage background = ImageIO.read(getClass().getResource("Background.jpg"));
            BackgroundPane backgroundPane = new BackgroundPane(background);
            add(backgroundPane);
            backgroundPane.setLayout(new GridBagLayout());

            JLabel text = new JLabel("Say hello to my little friend");
            text.setFont(text.getFont().deriveFont(Font.BOLD, 24f));
            text.setForeground(Color.WHITE);
            backgroundPane.add(text);

            add(backgroundPane);
        }

    }

    public class BackgroundPane extends JPanel {

        private BufferedImage background;

        public BackgroundPane(BufferedImage background) {
            this.background = background;
        }

        @Override
        public Dimension getPreferredSize() {
            return background == null ? super.getPreferredSize() : new Dimension(background.getWidth(), background.getHeight());
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            if (background != null) {
                Graphics2D g2d = (Graphics2D) g.create();
                int x = (getWidth() - background.getWidth()) / 2;
                int y = (getHeight() - background.getHeight()) / 2;
                g2d.drawImage(background, x, y,this);
                g2d.dispose();
            }
        }

    }

}

So, lots of options

I'd encourage you to have a look at How to Use Labels and Laying Out Components Within a Container for starters