Programming a GUI in swing issues

Question

I'm currently trying to create a gui for a game that I am making and I'm beginning to run into some trouble. I can't for some reason get the background of the timer to change to blue and the background of the gameGUI to be green for the main board. This is my first time programming in swing so I'm new to all of this.

I also am wondering if I am going about the layeredpane usage the right way. The board needs to be able to be a layered pane so that I can put images over top of it all the time. The timer will be a sky with a sun on top, and clouds will go over top of it at some point also.

If you could give me tips and help me out along the way that would be great even if you just correct a few little things here and there.

Thank you.

public class gameGUI extends JPanel{

    private ArrayList<BufferedImage> nativeOne = new ArrayList<BufferedImage>();
    private ArrayList<BufferedImage> nativeTwo = new ArrayList<BufferedImage>();
    private ArrayList<BufferedImage> nativeThree = new ArrayList<BufferedImage>();
    private ArrayList<BufferedImage> exoticOne = new ArrayList<BufferedImage>();
    private ArrayList<BufferedImage> exoticTwo = new ArrayList<BufferedImage>();
    private ArrayList<BufferedImage> exoticThree = new ArrayList<BufferedImage>();

    private static int screenWidth = 680;
    private static int screenHeight = 680;

    private JLayeredPane layeredPane;

    public gameGUI(){        
        layeredPane = new JLayeredPane();
        layeredPane.setPreferredSize(new Dimension(680, 680));
        layeredPane.setBackground(Color.GREEN);
        layeredPane.setBorder(BorderFactory.createLineBorder(Color.BLACK,2));        
    }

    private static JLayeredPane timer(){
        JLayeredPane timer = new JLayeredPane();
        timer.setPreferredSize(new Dimension(800,120));
        timer.setBorder(BorderFactory.createLineBorder(Color.BLACK, 2));
        timer.setBackground(Color.BLUE);
        return timer;
    }

    private static JPanel sideBar(){
        //Create the side bar and add buttons
        JPanel returnMofo = new JPanel();
        JButton nativeOne = new JButton(native1);
        JButton nativeTwo = new JButton(native2);
        JButton nativeThree = new JButton(native3);
        JButton exoticOne = new JButton(exotic1);
        JButton exoticTwo = new JButton(exotic2);
        JButton exoticThree = new JButton(exotic3);
        returnMofo.setLayout(new GridLayout(6,1));
        returnMofo.setPreferredSize(new Dimension(120, 680));
        returnMofo.setBorder(BorderFactory.createLineBorder (Color.BLACK, 2));
        returnMofo.add(nativeOne);
        returnMofo.add(nativeTwo);
        returnMofo.add(nativeThree);
        returnMofo.add(exoticOne);
        returnMofo.add(exoticTwo);
        returnMofo.add(exoticThree);
        return returnMofo;
    }


    private static void createAndShowGUI(){
        JFrame frame = new JFrame();
        frame.setTitle("Storm Watch");
        frame.setSize(800, 800);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        gameGUI gui = new gameGUI();
        frame.add(timer(), BorderLayout.NORTH);
        frame.add(sideBar(), BorderLayout.WEST);
        frame.add(gui, BorderLayout.EAST);                        

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

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

Answer 1

Make sure you set layeredPane and timer to opaque.

For example...

layeredPane.setOpaque(true);

You might want to, also, add layeredPane to the main board...

public TestGameBoard() {
    layeredPane = new JLayeredPane();
    layeredPane.setPreferredSize(new Dimension(680, 680));
    layeredPane.setBackground(Color.GREEN);
    layeredPane.setBorder(BorderFactory.createLineBorder(Color.BLACK, 2));
    layeredPane.setOpaque(true);

    setLayout(new BorderLayout()); // Easy to use layout manager
    add(layeredPane); // Now I'm visible ;)
}

And while I have your attention, you should always create/manipulate the UI from within the context of the Event Dispatching Thread...

public static void main(String[] args) {

    EventQueue.invokeLater(new Runnable() {
        @Override
        public void run() {
            createAndShowGUI();
        }
    });

}

Answer 2

Two issues. First, you need to use setOpaque(true) to make the background color display when using JLayeredPane.

layeredPane.setBackground(Color.GREEN);
layeredPane.setOpaque(true);

...

timer.setBackground(Color.BLUE);
timer.setOpaque(true);

Second, you are adding gameGUI instead of gameGUI's layeredPane to the frame. Should be:

frame.add(gui.layeredPane, BorderLayout.EAST);