Java GUI Layout Suggestions

Question

For a school assignment I need to have 2 panels.

The right needs to be 3x3 with buttons (which I have made black for easy identification when setting up the GUI) and the left with 1 label and 4 buttons.

Label should display the name of the current picture (placed randomly on a button in the 3x3 grid), 3 buttons to place images randomly, and one button to clear them off. I don't need help with the logic, I can do that part.

I am having trouble setting up the panel so it looks somewhat decent. I was thinking of making it a 1x5 grid but I don't know how to do that. I have spent multiple hours looking up how to do it as well as trying out my own stuff (notice the commented out stuff). Any help would be greatly appreciated.

public class Characters extends JFrame {

    private Container pane;
    private JButton Button1, Button2, Button3, Button4, Button5, Button6;
    private JButton Button7, Button8, Button9;
    private JButton BMolly, BOctavious, BJimmy, BClear;
    private ImageIcon Molly, Octavious, Jimmy;
    private JLabel LName;

    public Characters() {
        setTitle("Characters");
        pane = getContentPane();
        pane.setLayout(new GridLayout(3, 3));

        Button1 = new JButton((Icon) Button1);
        Button1.setBackground(Color.BLACK);
        pane.add(Button1);
        Button2 = new JButton((Icon) Button2);
        Button2.setBackground(Color.BLACK);
        pane.add(Button2);
        Button3 = new JButton((Icon) Button3);
        Button3.setBackground(Color.BLACK);
        pane.add(Button3);
        Button4 = new JButton((Icon) Button4);
        Button4.setBackground(Color.BLACK);
        pane.add(Button4);
        Button5 = new JButton((Icon) Button5);
        Button5.setBackground(Color.BLACK);
        pane.add(Button5);
        Button6 = new JButton((Icon) Button6);
        Button6.setBackground(Color.BLACK);
        pane.add(Button6);
        Button7 = new JButton((Icon) Button7);
        Button7.setBackground(Color.BLACK);
        pane.add(Button7);
        Button8 = new JButton((Icon) Button8);
        Button8.setBackground(Color.BLACK);
        pane.add(Button8);
        Button9 = new JButton((Icon) Button9);
        Button9.setBackground(Color.BLACK);
        pane.add(Button9);
        LName = new JLabel(" ");
        pane.add(LName);
        BMolly = new JButton("Molly");
        pane.add(BMolly);
        BOctavious = new JButton("Octavious");
        pane.add(BOctavious);
        BJimmy = new JButton("Jimmy");
        pane.add(BJimmy);
        BClear = new JButton("Clear");
        pane.add(BClear);
        pack();
        setResizable(false);
        setVisible(true);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
    }

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

}

Answer 1

What you need are two different panels.

pane = new JPanel();       //instead of pane = getContentPane();

//set your Layout
//add the 9 buttons
//...

add(pane, BorderLayout.CENTER);  //add panel to the jframe


pane = new JPanel();      //creat new panel 

//set your Layout
//add the other 4 buttons + label
//...

add(pane, BorderLayout.EAST);  //add panel to the jframe

If it still dont work i can add the full code.

Answer 2

Very good starting point for dealing with layout managers is Java documentation . For your need looks like BorderLayout manager should be good choice.

Read how to use layout managers with examples, it gives you first look.

Answer 3

There's a few issues with your code, by convention variable names start with a lower letter, and you should only do one thing per line of code (even declaring variables). Also you shouldn't "extend" a class unless you are going to extend the functionality of it, if all you are going to do is use it, then just create your own instance of the JFrame . (Oh, and when you're posting code on fourms looking for help, if you've felt the need to add an annotation to ignore an unused warning, then you probably don't need to post it in your question either :p )

For your problem you need to consider using multiple layouts (they can even be embedded in each other to provide some very complex effects) - Swing layouts

I've used a borderLayout and a BoxLayout to achieve something along the lines of what you require.

public class Characters {

    private JFrame frame;
    private JButton button1;
    private JButton button2;
    private JButton button3;
    private JButton button4;
    private JButton button5;
    private JButton button6;
    private JButton button7;
    private JButton button8;
    private JButton button9;
    private JButton mollyButton;
    private JButton octaviousButton;
    private JButton jimmyButton;
    private JButton clearButton;

    public Characters() {
        frame = new JFrame("Characters");
        JPanel rightPanel = new JPanel(new GridLayout(3, 3));
        button1 = new JButton();
        button1.setBackground(Color.BLACK);
        rightPanel.add(button1);
        button2 = new JButton();
        button2.setBackground(Color.BLACK);
        rightPanel.add(button2);
        button3 = new JButton();
        button3.setBackground(Color.BLACK);
        rightPanel.add(button3);
        button4 = new JButton();
        button4.setBackground(Color.BLACK);
        rightPanel.add(button4);
        button5 = new JButton();
        button5.setBackground(Color.BLACK);
        rightPanel.add(button5);
        button6 = new JButton();
        button6.setBackground(Color.BLACK);
        rightPanel.add(button6);
        button7 = new JButton();
        button7.setBackground(Color.BLACK);
        rightPanel.add(button7);
        button8 = new JButton();
        button8.setBackground(Color.BLACK);
        rightPanel.add(button8);
        button9 = new JButton();
        button9.setBackground(Color.BLACK);
        rightPanel.add(button9);
        JPanel leftPanel = new JPanel();
        leftPanel.setLayout(new BoxLayout(leftPanel, BoxLayout.PAGE_AXIS));
        JLabel nameLabel = new JLabel("Name");
        leftPanel.add(nameLabel);
        mollyButton = new JButton("Molly");
        leftPanel.add(mollyButton);
        octaviousButton = new JButton("Octavious");
        leftPanel.add(octaviousButton);
        jimmyButton = new JButton("Jimmy");
        leftPanel.add(jimmyButton);
        clearButton = new JButton("Clear");
        leftPanel.add(clearButton);
        JPanel centrePanel = new JPanel();
        centrePanel.add(new JLabel("Stuff goes here"));
        JPanel content = new JPanel(new BorderLayout());
        content.add(leftPanel, BorderLayout.WEST);
        content.add(centrePanel, BorderLayout.CENTER);
        content.add(rightPanel, BorderLayout.EAST);
        frame.setContentPane(content);
        frame.pack();
        frame.setResizable(false);
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

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

}