Home : Course Map : Chapter 7 : Java :
Layout Managers: Part 1
JavaTech
Course Map
Chapter 7

Introduction
Event Overview
Event Processing
Button Events
  Demo 1
 Demo 2
Mouse Events
  Demo3

More Components
  Demo 4  Demo 5
  Demo 6  Demo 7

LayoutManagers-1
  Demo 8     Demo 9
  Demo 10  Demo 11
  Demo 12

LayoutManagers-2
  Demo 13  Demo 14
  Demo 15  Demo 16
  Demo 17

Inner Classes
Anonymous Class
Adapter Classes
  Demo 18  Demo 19
Frames & Menus
  Demo 20  Demo 21
Exercises

    Supplements
AWT Components
  Button
     Demo 1
  Canvas
     Demo 2
  AWT GUI Demo
     Demo 3
Swing Dialogs
JOptionPane Dialog
  Demo 1
JDialog
  Demo 2
UI Enhancement: P1
  Demo 1   Demo 2
  Demo 3

UI Enhancement: P2
  Demo 1
     About JavaTech
     Codes List
     Exercises
     Feedback
     References
     Resources
     Tips
     Topic Index
     Course Guide
     What's New

A layout manager arranges the components on a panel according to the guidelines of the particular type of manager (examples given below) and according to the parameters passed to it. The manager attempts to fit all the components into the panel while following its guidelines and fulfilling the size requirements of the components.

If the manager cannot satisfy the programmer's instruction and/or the preferred sizes of the components, if there is too little room, then it will do the best it can according to its own rules.

The Component class offers a getPreferredSize() method, which can be overridden, that the layout managers invokes to find out how much space the component needs. For example, a label or button needs at least enough room to display its text or icon.

Although it can be done, portablity argues strongly against absolute positioning. The layout manager approach provides a portable and flexible approach to the arrangement of the components. Combined with the lightweight features of Swing components, layout managers offer consistent appearance across different platforms.

The following layout managers can accomplish most any arrangements you could want. Remember that you can build complex interfaces with multiple panels, each with their own layout manager. The FlowLayout is the default for JPanel but you can always specify one of the other layout managers.

We don't have space here to discuss all of the details of these layout managers. The resources below give links to the the J2SE5.0 Specifications for the classes and to the layout tutorials at the Sun Java Tutorial.

The following applets demonstrate five of the layout managers:

 

FlowLayout

FlowLayout is the default layout manager for most components. It lays out omponents horizontally, left to right until no room is left and then it moves down one row and continues placing the components sequentially left to right.

FlowApplet.java

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.util.*;


/** Demo of the FlowLayout manager. **/
public class FlowApplet extends JApplet
{
  // Add an instance of FlowPanel to the applet.
  public void init () {
    Container content_pane = getContentPane ();

    // Create an instance of a JPanel sub-class
    FlowPanel flow_panel = new FlowPanel ();

    // And add one or more panels to the JApplet panel.
    content_pane.add (flow_panel);
  } // init

} // class FlowApplet


/** A simple example of a Panel with five buttons. **/
class FlowPanel extends JPanel
{
  FlowPanel () {

    // Default for JPanel is FlowLayout
    add (new JButton ("One") );
    add (new JButton ("Two") );
    add (new JButton ("Three") );
    add (new JButton ("Four") );
    add (new JButton ("Five") );
  } // ctor

} // class FlowPanel

 

BorderLayout

Arranges up to five components in five positions: Center, East, West, North, and South as shown below. Components placed in the East and West positions will use all of the vertical space available while components in the North and South positions will use up all of the horisonal positions. The component in the Center will use up the remaining space in both horizontal and vertical directions.

 

BorderApplet.java

import javax.swing.*;
import java.awt.*;

/** Demo of the BorderLayout manager. **/
public class BorderApplet extends JApplet {

  public void init () {
    Container content_pane = getContentPane ();

    // Create an instance BorderPanle
    BorderPanel border_panel = new BorderPanel ();

    // And add it to the applet panel.
    content_pane.add (border_panel);
  } // init

} // class BorderApplet


/** Arrange five buttons using a BorderLayout. **/
class BorderPanel extends JPanel{
  BorderPanel () {

    setLayout ( new BorderLayout () );
    add (BorderLayout.EAST, new JButton ("East") );
    add (BorderLayout.WEST, new JButton ("West") );
    add (BorderLayout.NORTH, new JButton ("North") );
    add (BorderLayout.SOUTH, new JButton ("South") );
    add (BorderLayout.CENTER, new JButton ("Center") );
  } //ctor

} //class BorderPanel

 

GridLayout

Place components in a Row vs Column matrix. Components fill slots starting on top row, left to right, then move to next row down.

 

GridApplet.java

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.util.*;

/** Demo of GridLayout. **/
public class GridApplet extends JApplet
{
  public void init () {
    Container content_pane = getContentPane ();

    // Create an instance of a JPanel sub-class
    GridPanel grid_panel = new GridPanel ();

    // And add one or more panels to the JApplet panel.
    content_pane.add (grid_panel);

  } // init
} // class GridApplet


/** A sample JPanel class for holding components. **/
class GridPanel extends JPanel
{
  GridPanel () {
    setLayout ( new GridLayout (3, 2));
    add (new JButton ("One") );
    add (new JButton ("Two") );
    add (new JButton ("Three") );
    add (new JButton ("Four") );
    add (new JButton ("Five") );
  } // ctor
} // class GridPanel

 

The most powerful layout manager is the GridBagLayout shown below. It is very useful when you have an elaborate interface with lots of components. The GridBagLayout is tricky for complicated layouts and will require lots of tuning to get the layout just the way you want.

We recommend that you use it a few times to learn how it works but then switch to a graphical interface builder to build elaborate interfaces with lots of components. This will be much faster and less aggravating.

GridBagLayout

Although GridBagLayout follows a grid placement approach like GridLayout, it works more like the hypertext table. That is, rather than a fixed number of rows and cells and fixed cell widths, it will let components span more than one cell vertically and/or horizontally.

GridBagLayout places a component according to the settings in an instance of the helper class GridBagConstraints. As shown below, you create a GridBagConstraints object and set one or more of its data fields to one of optional values. When you add the component to the panel, the GridBagConstraints object is also passed as an argument.

Note that you don't give a fixed initial number of rows and columns. Instead, the layout determines the table parameters according to what will satisfy all of the the GridBagConstraints settings for the gridx, gridy values for all of the components.

 

GridBagApplet.java

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.util.*;

/** Demo of GridBagLayout. **/
public class GridBagApplet extends JApplet{

  public void init () {
    Container content_pane = getContentPane ();

    // Create an instance of the GridBagPanel
    GridBagPanel grid_bag_panel = new GridBagPanel ();

    // And add it to the applet's panel.
    content_pane.add (grid_bag_panel);
  } // init

} // GridBagApplet

/** Create a JPanel with 5 buttons and use GridBagLayout manager.**/
class GridBagPanel extends JPanel {
  GridBagConstraints constraints = new GridBagConstraints ();

  GridBagPanel () {

  setLayout (new GridBagLayout ());

    // Create a 3 row grid

    // Fill the grid squares with the component
    // in both x and y directions
    constraints.fill = GridBagConstraints.BOTH;

    // Keep same weight in vertical dimension
    constraints.weighty = 1.0;

    // Top row will include three  components, each
    // weighted differently in x
    // 0,0
    constraints.weightx = 1.0;
    constraints.gridx = 0;  constraints.gridy = 0;
    add (new JButton ("0,0"), constraints );

    // 0,1
    constraints.weightx = 0.5;
    constraints.gridx = 1;  constraints.gridy = 0;
    add (new JButton ("1,0"), constraints );

    // 0,2
    constraints.weightx = 0.1;
    constraints.gridx = 2;  constraints.gridy = 0;
    add  (new JButton ("2,0"), constraints );

    // Middle row has two components. First takes up two
    // rows, second takes up two columns
    // The first component on second row will span
    // vertically to third row

    // 0,1 to 0,2
    constraints.weightx = 1.0;
    constraints.gridx = 0;  constraints.gridy = 1;
    constraints.gridheight = 2;
    add (new JButton ("0,1 to 0,2"), constraints );

    // The second component on second row will span
    // horizontally to third column
    // 1,1 to 2,1
    constraints.weightx = 1.0;
    constraints.gridx = 1;  constraints.gridy = 1;
    constraints.gridheight = 1;
    constraints.gridwidth  = 2;
    add (new Button ("1,1 to 2,1"), constraints );

    // Bottom row has 2 components with fill set to NONE
    // Use anchor.
    constraints.fill = GridBagConstraints.NONE;

    // 1,2
    constraints.anchor = GridBagConstraints.SOUTHEAST;
    constraints.weightx = 0.5;
    constraints.gridx = 1;  constraints.gridy = 2;
    constraints.gridheight = 1;
    constraints.gridwidth  = 1;
    add (new JButton ("1,2"), constraints );

    // 2,2
    constraints.anchor = GridBagConstraints.WEST;
    constraints.weightx = 0.1;
    constraints.gridx = 2;  constraints.gridy = 2;
    constraints.gridheight = 1;
    constraints.gridwidth  = 1;
    add (new JButton ("2,2"), constraints );
  } // ctor
} // class GridBagPanel

 

SpringLayout

Use spring constraints to set a component relative to the edges of other components. For example, the following invocation of putConstraint

  layout.putConstraint (SpringLayout.WEST, component1, 5,
                        SpringLayout.WEST, panel);

places the west (i.e. left) edge of component1 at 5 pixels from the west edge of the panel that holds component1. The refs below give links to the tutorial and specifications for details SpringLayout.

SpringLayout was added in 1.4 as an alternative to GridBagLayout but, as we see in the code below, it requires a lot of boilerplate code that gets repeated over and over and this becomes cumbersome for a situation involveint a large number of components. So it is really more suitable for use by a GUI builder.

 

SpringApplet.java

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.util.*;

/**  Demo of SpringLayout manager. **/
public class SpringApplet extends JApplet {

  public void init () {
    Container content_pane = getContentPane ();

    // Create an instance of SpringPanel.
    SpringPanel spring_panel = new SpringPanel ();

    // And add it to our applet's panel.
    content_pane.add (spring_panel);
  } // init

} // class SpringApplet

 

/** Arrange five buttons using a SpringLayout. **/
class SpringPanel extends JPanel {

  /**
    * Constructor creates 5 button interface with SpringLayout
    * and constrains each to a particular position relative
    * to the panel frame and to its neighbors.
   **/
  SpringPanel () {

    SpringLayout layout = new SpringLayout ();
    setLayout ( layout );

    JButton one   = new JButton ("One");
    JButton two   = new JButton ("Two");
    JButton three = new JButton ("Three");
    JButton four  = new JButton ("Four");
    JButton five  = new JButton ("Five");

    add (one);
    add (two);
    add (three);
    add (four);
    add (five);

    // Now set the distances between the edges.

    // Put the first button at pixel coords (5,5)
    // relative to the panel's frame.
    layout.putConstraint (SpringLayout.WEST, one,
                         5, SpringLayout.WEST, this);
    layout.putConstraint (SpringLayout.NORTH, one,
                         5, SpringLayout.NORTH, this);

    // Put the second button 5 pixels to the right of the
    // first button and 40 pixels below the top panel edge.
    layout.putConstraint (SpringLayout.WEST, two,
                         5, SpringLayout.EAST, one);
    layout.putConstraint (SpringLayout.NORTH, two,
                         40,SpringLayout.NORTH, this);

    // Put the third button 100 pixels to the left of the
    // panel edge and 5 pixels above the second button.
    layout.putConstraint (SpringLayout.WEST, three,
                         100, SpringLayout.WEST, this);
    layout.putConstraint (SpringLayout.NORTH, three,
                         5, SpringLayout.SOUTH, two);

    // Put the fourth button 15 pixels to the right of the
    // first button  and 5 pixels below the top panel edge
    layout.putConstraint (SpringLayout.WEST, four,
                         15, SpringLayout.EAST, one);
    layout.putConstraint (SpringLayout.NORTH, four,
                         5, SpringLayout.NORTH, this);

    // Put the fifth button 25 pixels to the right of the
    // third button and 5 pixels below it
    layout.putConstraint (SpringLayout.WEST, five,
                         25, SpringLayout.EAST, three);
    layout.putConstraint (SpringLayout.NORTH, five,
                         5,  SpringLayout.SOUTH, three);

  } // ctor

} // class SpringPanel

In the next section we discuss the BoxLayout, which is another alternative to GridBagLayout.

References & Web Resources

 

Most recent update: Sept. 24.05

           Tech
Histogram UI
  Demo 1
Probablity Distrib.
  Demo 2 Demo 3
RejectionMethod
Histogram Stats
  Demo 4
Exercises

           Physics
Sim & Randomness
Custom Prob. Dist.
   Demo 1
Histogram Dist.
   Demo 2
Monte Carlo
  Demo 3
Exercises

  Part I Part II Part III
Java Core 1  2  3  4  5  6  7  8  9  10  11  12 13 14 15 16 17
18 19 20
21
22 23 24
Supplements

1  2  3  4  5  6  7  8  9  10  11  12

Tech 1  2  3  4  5  6  7  8  9  10  11  12
Physics 1  2  3  4  5  6  7  8  9  10  11  12

Java is a trademark of Sun Microsystems, Inc.