Java Swing Layouts

Swing Layouts

A list of the layout managers

* Flow Layout: It is the default layout of the managers for the panels. It lays out the components one after another until it runs out of room, then it starts a new row.

* Grid Layout: It's good for creating a grid of identically sized components.

* Border Layout: It's the default layout for the frames. It divides the container into five regions. The top region is called NORTH, bottom region is called SOUTH,
center region is called CENTER, right region is called EAST, and left region is called WEST.

* Box Layout: It arranges the components into either a single column or a single row.

* GridBag Layout: Each of the rows or columns can be a different size, the component can span two or more rows or columns. This layout is so flexible that we can
tell the layout manager what to do if the component is smaller or larger than the space allotted for it.

* Group Layout: It describe an arrangement from two points of view, from left to right and from top to bottom.

In addition the above layouts, java provides few additional one, though the above six layouts are used most often.

Since all the GUIs we've done so far are flow layout, which is the basic layout. We will start with the flow layout.

Flow Layout Manager

Flow layouts often used for small panels that consists of a few components, such as few rows of buttons. Lets see a basic example of it.

Note: For all the Layout Manager constructors and Methods look at the link below " Swing Method & Constructor Table."

/* This program demonstrate the use of flow layout It consists of a few buttons * */ import javax.swing.*; import java.awt.event.*; import java.awt.*; // Needed for the layout manager public class FlowLayoutButton extends JFrame { private JPanel panel; private JButton b1; private JButton b2; private JButton b3; private JButton b4; public FlowLayoutButton() { // Sets the title of the window setTitle("Flow Layout Manager"); // Sets the size of the window setSize(150, 150); // Sets the start location of the window setLocationRelativeTo(null); // Sets the action if the window is close setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // Create the buttons b1 = new JButton("1"); b2 = new JButton("2"); b3 = new JButton("3"); b4 = new JButton("4"); // Create a panel and sets the layout of the panel panel = new JPanel(); panel.setLayout(new FlowLayout(FlowLayout.LEFT, 20, 15)); // Add the buttons to the panel panel.add(b1); panel.add(b2); panel.add(b3); panel.add(b4); // Create the action listener for the buttons b1.addActionListener(new ButtonListener()); b2.addActionListener(new ButtonListener()); b3.addActionListener( new ButtonListener()); b4.addActionListener(new ButtonListener()); // Adds the panel to the content pane add(panel); // Sets the window to be visible setVisible(true); } /* Handles the events here if a button is pushed * */ private class ButtonListener implements ActionListener { public void actionPerformed(ActionEvent e) { if(e.getSource()==b1) { JOptionPane.showMessageDialog(null, "1"); } if(e.getSource()==b2) { JOptionPane.showMessageDialog(null, "2"); } if(e.getSource()==b3) { JOptionPane.showMessageDialog(null, "3"); } if(e.getSource()==b4) { JOptionPane.showMessageDialog(null, "4"); } } } public static void main(String[] args) { new FlowLayoutButton(); } }

ClickHere to download FlowLayoutButton.java

Border Layout Manager

Now, lets look at one of my favorite layout, the Border Layout. If a border layout is not specify with a region when components are added, then the component is placed in the center region by default. The border layout automatically resizes the components in each region to completely fill up the region. Sometimes, we don't want that to happen, hence we can place the components into a separate panels using flow layout and then add the panel into the border layout region.

/* The program demonstrate the use of border region * */ import javax.swing.*; import java.awt.*; import java.awt.event.*; public class BorderRegion extends JFrame { private JPanel panel; private JLabel north; private JLabel center; private JLabel west; private JLabel east; private JLabel south; public BorderRegion() { // Sets the title of the window setTitle("Border Layout Mananger"); // Sets the size of the window setSize(300, 400); // Sets the start location of the window setLocationRelativeTo(null); // Sets the action when the window is close setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // Create a panel with border layout panel = new JPanel(); panel.setLayout(new BorderLayout()); // Create Labels north = new JLabel("North"); center = new JLabel("Center"); south = new JLabel("South"); east = new JLabel("East"); west = new JLabel("West"); // Add the label to the panel with a specify region panel.add(north, BorderLayout.NORTH); panel.add(center, BorderLayout.CENTER); panel.add(south, BorderLayout.SOUTH); panel.add(east, BorderLayout.EAST); panel.add(west, BorderLayout.WEST); // Add the panel to the content pane add(panel); // Sets the window visibility setVisible(true); } public static void main(String[] args) { new BorderRegion(); } }

ClickHere to download BorderRegion.java

Grid Layout Manager

It's designed for panels that need to have a set number of components all equally sized and arranged into a grid. It most often used to create calculator or a phone.

/* This demonstrate a simple Grid Layout Manager * */ import javax.swing.*; import java.awt.*; import java.awt.event.*; public class GridLayout extends JFrame { JPanel panel; JButton b1; JButton b2; JButton b3; JButton b4; public GridLayout() { // Sets the title of the window setTitle("Border Layout Mananger"); // Sets the size of the window setSize(300, 400); // Sets the start location of the window setLocationRelativeTo(null); // Sets the action when the window is close setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // Create a panel with Grid Layout 2 rows and 2 columns panel = new JPanel(); panel.setLayout(new java.awt.GridLayout(2, 2)); // Create the buttons b1 = new JButton("1"); b2 = new JButton("2"); b3 = new JButton("3"); b4 = new JButton("4"); // Add the buttons to the panel panel.add(b1); panel.add(b2); panel.add(b3); panel.add(b4); // Add the panel to the content pane add(panel); // Set the visibility of the window setVisible(true); } public static void main(String[] args) { new GridLayout(); } }

ClickHere to download GridLayout.java

Box Layout

A box layout is most often use to create panels that contain a single row or column of components. If the components are arranged in a single row, we use the Horizontal method. If the components are stacked in a column, we use the Vertical method.

/* This is a box layout using horizontal method * */ import javax.swing.*; import java.awt.event.*; import java.awt.*; // Needed for box layout public class BoxHorizontal extends JFrame { JPanel panel; JButton yellow; JButton red; JButton blue; public BoxHorizontal() { // Set the title of the window setTitle("Box Layout"); // Sets the size of the window setSize(300, 100); // Sets the action when the window is close setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // Sets the start location of the window setLocationRelativeTo(null); // Creates a horizontal box Box box = Box.createHorizontalBox(); // Create three buttons yellow = new JButton("Yellow"); red = new JButton("Red"); blue = new JButton("Blue"); // Add the buttons to the horizontal box box.add(yellow); box.add(red); box.add(blue); // Create action listener for the buttons yellow.addActionListener(new ButtonListener()); red.addActionListener(new ButtonListener()); blue.addActionListener(new ButtonListener()); // Create a panel panel = new JPanel(); // Add box layout to the panel panel.add(box); // Add the panel to the content pane add(panel); // Sets the visibility of the window setVisible(true); } /* The buttons click event are handle here * */ public class ButtonListener implements ActionListener { public void actionPerformed(ActionEvent e) { if(e.getSource()==yellow) { JOptionPane.showMessageDialog(null, "You've clicked a yellow button"); } if(e.getSource()==red) { JOptionPane.showMessageDialog(null, "You've clicked a red button"); } if(e.getSource()==blue) { JOptionPane.showMessageDialog(null, "You've clicked a blue button"); } } } public static void main(String[] args) { new BoxHorizontal(); } }

ClickHere to download BoxHorizontal.java

/* The program demonstrate the use of vertical box It also show how to use Glue, rigid area, & strut * */ import javax.swing.*; import java.awt.event.*; import java.awt.*; // Needed for Box Layout public class BoxVertical extends JFrame { private JPanel panel; private JButton accept; private JButton exit; private JButton show; public BoxVertical() { // Sets the title of the window setTitle("Box Window Vertical"); // Sets the size of the window setSize(300, 400); // Sets the action when the window is close setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // Sets the start location of the window setLocationRelativeTo(null); // Create vertical box Box box = Box.createVerticalBox(); // Create three buttons accept = new JButton("Accept"); show = new JButton("Show"); exit = new JButton("Exit"); // Add the button to the box using Strut with a specify pixel box.add(Box.createVerticalStrut(20)); box.add(accept); // Add the button to the box using ridgid area with a specify dimension box.add(Box.createRigidArea(new Dimension(30, 50))); box.add(show); // Glue the buttons box.add(Box.createVerticalGlue()); // Add the exit button using a strut with a specify pixel box.add(exit); box.add(Box.createVerticalStrut(20)); // Create a panel panel = new JPanel(); // Add the box to the panel panel.add(box); // Add the panel to the content pane add(panel); // Sets the visibility of the window setVisible(true); } public static void main(String[] args) { new BoxVertical(); } }

ClickHere to download BoxVertical.java

Click here to continue