How to overlap a JPanel(background) and a JTextField

Question

I am creating a log in application for someones graduation, I need several text fields and a background, I have added the background and now need to add the text fields, the problem is that they won't seem to go on top of each other.

I have tried them each separately and without one another they both work perfectly but i can't get them to stack, I have seen several answers on this site to deal with a similar problem but for this application I need to put several text fields on the background as apposed to just one, here is what I have thus far...

        //creates the frame with a title as a parameter
        JFrame frame = new JFrame("Sign In Sheet");
        //sets the size
        frame.setSize(1000, 556);
        //makes it so the application stops running when you close it
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        //puts it in the center of the screen
        frame.setLocationRelativeTo(null);
        //makes it so you can't resize it
        frame.setResizable(false);

        //setting the background by looking for the image
        try{
            frame.setContentPane(new JLabel(new ImageIcon(ImageIO.read(new File("C:/Users/Gabriel R. Warner/Desktop/clouds.png")))));
        }catch(IOException e){
            //and prints an error message if it's not found
            System.out.println("well it didn't work");
        }

        //adding text fields with names apropriate to function
        JTextField name1 = new JTextField();
        name1.setPreferredSize(new Dimension(200, 15));
        name1.setBackground(Color.WHITE);
        frame.add(name1);

        //makes frame visible
        frame.setVisible(true);

Simply stated the text field won't show up with the background and all the results only offer answers for a single text field

1) Please take care of your language, 2) You're only adding a single `JTextField`, not many as you mention, post a proper [mre] that demonstrates your issue. 3) Don't explicitly `setPreferredSize` or `setSize` of your components, for `JTextField` pass in as parameter how many columns it should use (`15` in your case) and call `pack()` instead for your `JFrame`. — Frakcool, Jun 21 '19 at 16:19
4) Images will become embedded resources when your code is wrapped as a JAR, so it's wise to treat them as if they already were, see [embedded-resource](https://stackoverflow.com/tags/embedded-resource/info) tag info for how to use it rather than the full path. Here's an [example](https://stackoverflow.com/questions/42437948/how-can-i-add-an-image-to-a-panel/42446498#42446498) on how to add an image as background either by adding a `JLabel` inside another `JLabel` or using custom-painting — Frakcool, Jun 21 '19 at 16:20

George Z. · Answer 1 · 2019-06-21T16:32:39.170

The problem is in this line: frame.setContentPane(new JLabel(new ImageIcon(ImageIO.read(new File("C:/Users/Gabriel R. Warner/Desktop/clouds.png")))));

In this line you set a JLabel as the content pane of your JFrame. Then, you frame.add(name1); So you are adding a JTextField to a JLabel...Well this does not seem right, right?

The answer would be to create a new JPanel, add the background image to this panel, set the panel as the content pane of the frame and finally add the textfield to the panel/contentpane.

An example:

@SuppressWarnings("serial")
public class FrameWithBackgroundImage extends JFrame {

    public FrameWithBackgroundImage() {
        super("Sign In Sheet");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);

        try {
            Image bgImage = loadBackgroundImage();
            JPanel backgroundImagePanel = new JPanel() {

                @Override
                protected void paintComponent(Graphics g) {
                    super.paintComponent(g);
                    g.drawImage(bgImage, 0, 0, null);
                }
            };

            setContentPane(backgroundImagePanel);
        } catch (IOException e) {
            e.printStackTrace();
        }

        JTextField textField = new JTextField(10);

        add(textField);

    }

    private Image loadBackgroundImage() throws IOException {
        File desktop = new File(System.getProperty("user.home"), "Desktop");
        File image = new File(desktop, "img.jpg");
        return ImageIO.read(image);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            new FrameWithBackgroundImage().setVisible(true);
        });
    }
}

Preview: Worth to read question: Simplest way to set image as JPanel background

*"So you are adding a JTextField to a JLabel... Well this does not seem right, right?"* I agree on this but I should say, that's possible, a [`JLabel`](https://docs.oracle.com/javase/7/docs/api/javax/swing/JLabel.html) is a `Container`, a `JButton` is a `Container` as well, and you can do [interesting things with them](https://stackoverflow.com/questions/42169261/align-jbutton-icon-to-the-left-and-keep-text-centered/42169894#42169894) — Frakcool, Jun 21 '19 at 16:39
@Frakcool I am aware of it. I just do not recommend it because i find it kind of tricky. I mean, you know...based on logic. — George Z., Jun 21 '19 at 16:43
Yes, I agree, in this case the custom-painting approach is better, but there are times when you might need to use them, so for reference for future readers I'm leaving that comment — Frakcool, Jun 21 '19 at 16:48

How to overlap a JPanel(background) and a JTextField

1 Answers1