How do I get both my image and button to display?

Question

Currently, the problem I am trying to solve is how I get both my image and button to show up.

When I have the following line in the code the image shows up but when I remove it my image doesn't display but the button does: setLayout (new FlowLayout()) ;

without the line of code

with the line of code

Images for example ^

import java.awt.*;
public class Panel extends JFrame {
    private ImageIcon FirstPageImage;
    private JLabel FirstPageLabel;
    private JLayeredPane SignupButtonLayer;
    private JButton Button;

public Panel(){
    setLayout (new FlowLayout()) ;
    FirstPageImage = new ImageIcon(getClass().getResource("FirstPageAnimationUsing.gif"));
    FirstPageLabel = new JLabel(FirstPageImage);
    FirstPageImage.setImage(FirstPageImage.getImage().getScaledInstance(343,820,Image.SCALE_DEFAULT));
    add(FirstPageLabel);

    Button = new JButton();
    SignupButtonLayer = new JLayeredPane();

    Button.setOpaque(true);
    Button.setBackground(Color.cyan);
    Button.setBounds(94,617,159,82);

    SignupButtonLayer.add(Button, JLayeredPane.DEFAULT_LAYER);
    add(SignupButtonLayer);
}

    public static void main(String[] args) {
        Panel gui = new Panel();
        gui.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        gui.setVisible(true);
        gui.pack();
        gui.setTitle("Reminder App");
        gui.setSize(360,850);

    }
}

Answer 1

Refer to How to Use Layered Panes.

• You need to give the JLayeredPane a preferred size. Since your JLayeredPane contains only a single JButton, that size should be big enough to display the entire JButton.
• The arguments to method setBounds – that you call on Button – are relative to its container, i.e. SignupButtonLayer. Setting the x to 94 and the y to 617 means that Button is placed outside of the bounds of SignupButtonLayer. Hence you don't see it. In the below code, I set x and y both to 0 (zero) so that the top, left corner of Button aligns with the top, left corner of SignupButtonLayer.
• No need to explicitly call method setOpaque(true) for Button since that is the default, anyway.
• Either call pack() – which is usually preferred – or setSize() but don't call both.
• setVisible(true) should be called only once your GUI is completely built. In the below code I call it after calling pack() and setTitle().
• I suggest that you try to adhere to Java naming conventions.
• I also suggest that try not to name your classes the same as classes in the JDK. I am referring to Panel.

The below code simply resolves your problem, i.e. displaying both the image and the button together – while using FlowLayout for the [content pane of the] JFrame. Notice that the preferred size of SignupButtonLayer is slightly larger than the size arguments in method setBounds.

import java.awt.Color;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Image;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JLayeredPane;

public class Panel extends JFrame {
    private ImageIcon FirstPageImage;
    private JLabel FirstPageLabel;
    private JLayeredPane SignupButtonLayer;
    private JButton Button;

    public Panel() {
        setLayout(new FlowLayout());
        FirstPageImage = new ImageIcon(getClass().getResource("FirstPageAnimationUsing.gif"));
        FirstPageLabel = new JLabel(FirstPageImage);
        FirstPageImage.setImage(FirstPageImage.getImage().getScaledInstance(343, 820, Image.SCALE_DEFAULT));
        add(FirstPageLabel);

        Button = new JButton();
        SignupButtonLayer = new JLayeredPane();
        SignupButtonLayer.setPreferredSize(new Dimension(160, 90));
//        Button.setOpaque(true);
        Button.setBackground(Color.cyan);
        Button.setBounds(0, 0, 159, 82);

        SignupButtonLayer.add(Button, JLayeredPane.DEFAULT_LAYER);
        add(SignupButtonLayer);
    }

    public static void main(String[] args) {
        Panel gui = new Panel();
        gui.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        gui.pack();
        gui.setTitle("Reminder App");
//        gui.setSize(360, 850);
        gui.setVisible(true);
    }
}