Arranging swing components on a Swing panel

border, java, layout-manager, swing, user-interface

Solution

Try making the upper part within a `GridLayout` with 1 row and 2 columns, add that in a `BorderLayout` as CENTER and the Buttons as `BorderLayout.BOTTOM`. Within the upper part, use two panels, one for left, one for right.

And here is some code to show this (I couldn't really copy/paste your example):

public class MW extends JFrame {

    public static void main(String[] args) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                createAndShowUI();
            }
        });
    }

    private static void createAndShowUI() {
        MW x = new MW();

        JPanel mainPanel = new JPanel();
        mainPanel.setLayout(new GridLayout(1, 2));

        JPanel leftPanel = new JPanel();
        JLabel srcLabel = new JLabel("Source record:");
        leftPanel.add(srcLabel);
        JPanel rightPanel = new JPanel();
        JLabel dstLabel = new JLabel("Destination record:");
        rightPanel.add(dstLabel);

        mainPanel.add(leftPanel);
        mainPanel.add(rightPanel);

        JPanel buttonPanel = new JPanel();
        buttonPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
        JButton okButton = new JButton("OK");
        buttonPanel.add(okButton);
        JButton cancelButton = new JButton("Cancel");
        buttonPanel.add(cancelButton);

        x.setSize(400, 400);
        x.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        x.add(mainPanel, BorderLayout.CENTER);
        x.add(buttonPanel, BorderLayout.PAGE_END);
        x.setLocationRelativeTo(null);
        x.setVisible(true);
    }
}

Problem

I am new to Swing but kind of struggling to achieve what i am trying to do. I would like to build a screen that looks like this: I am not sure which layout is best for this kind of screen. I tried using BorderLayout but it never comes out right. I got the buttons at the bottom right but the components in the middle prove to be quite challenging. I know how to add the components on to the panel but the area i am struggling is how to align them. Sometimes if i add a text field on a panel with a BORDERLAYOUT, it takes up the full space of the whole panel which i dont want. I managed to get it to almost work using AbsoluteLayout but i suspect that is not the best option if i want the screen to be fluid. ``` setBounds(100, 100, 775, 599); getContentPane().setLayout(new BorderLayout()); contentPanel.setBackground(SystemColor.control); contentPanel.setForeground(Color.RED); contentPanel.setBorder(new EtchedBorder(EtchedBorder.LOWERED, null, null)); getContentPane().add(contentPanel, BorderLayout.CENTER); contentPanel.setLayout(new BorderLayout(0, 0)); { JPanel topHeadersPanel = new JPanel(); contentPanel.add(topHeadersPanel, BorderLayout.NORTH); topHeadersPanel.setLayout(new BorderLayout(0, 0)); { JLabel lblSetSourceRecord = new JLabel("Source customer record:"); lblSetSourceRecord.setFont(new Font("Tahoma", Font.BOLD, 12)); topHeadersPanel.add(lblSetSourceRecord, BorderLayout.WEST); } { JLabel lblSetDestinationRecord = new JLabel("Destination customer record:"); lblSetDestinationRecord.setFont(new Font("Tahoma", Font.BOLD, 12)); topHeadersPanel.add(lblSetDestinationRecord, BorderLayout.EAST); } { JLabel lblSetDestinationRecord = new JLabel("Source customer:"); lblSetDestinationRecord.setFont(new Font("Tahoma", Font.BOLD, 12)); topHeadersPanel.add(lblSetDestinationRecord, BorderLayout.SOUTH); } } { JPanel buttonPane = new JPanel(); buttonPane.setBorder(new EtchedBorder(EtchedBorder.LOWERED, null, null)); buttonPane.setLayout(new FlowLayout(FlowLayout.CENTER)); getContentPane().add(buttonPane, BorderLayout.SOUTH); { JPanel panel = new JPanel(); buttonPane.add(panel); } { JButton okButton = new JButton("OK"); okButton.setActionCommand("OK"); buttonPane.add(okButton); getRootPane().setDefaultButton(okButton); } { JButton cancelButton = new JButton("Cancel"); cancelButton.setActionCommand("Cancel"); buttonPane.add(cancelButton); } ```

Original source