Using CardLayout



A container can easily become too large, too complex, or cluttered with too many components. One solution to this problem is to not display all the components at the same time. By using CardLayout as the layout manager of a container, the user can be allowed to flip through a stack of the container's components.



CardLayout myCardLayout = new CardLayout();

Once instantiated, a CardLayout object may be used to manage a container as shown by the code

Panel cards = new Panel();

which creates a Panel object and establishes its layout manager. When a component is added to the container, it becomes another card within the container's stack. For example, if b1 and b2 are previously defined Button objects they may be added to the container by coding

cards.add(b1, "Button 1");
cards.add(b2, "Button 2");

where the string parameter is used as an identifier for the component. Because it was added first, the b1 button would be the only component displayed when the container is made visible. To display the b2 button one could code either;

or, "Button 2");

The first technique is used to flip through the container's cards in the order in which they were added to the container. The second technique is used to go directly to a specific card within the container.




Flips to the first card in the named container


Flips to the last card in the named container


Flips to the next card in the named container


Flips to the previous card in the named container


Flips to a specified card in the named container

Note that these methods are non-static. You are required to instantiate a CardLayout object in order to use them. Consult the help facility of your Java development environment or the Java API for more details.


A sample applet that uses CardLayout

The following applet uses CardLayout to manage and display a container consisting of several labels:

import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class App extends Applet {

  // Object references and variables to support "card" processing.

  Panel cards;
  CardLayout myCardLayout;
  int cardIndex;

  // Object references to support user controls.

  Panel controls;
  Button next;
  Button previous;
  Choice pickOne;

  // Applet initialization.

  public void init() {
  resize(450, 350);
  setLayout(new BorderLayout());

  // Instantiate objects and variables to support "card" processing.

  cards = new Panel();
  myCardLayout = new CardLayout();
  cardIndex = 0;

  // Instantiate objects to support user controls.

  next = new Button(">");
  previous = new Button("<");
  pickOne = new Choice();
  controls = new Panel();

  // Build the container of "cards" and add it to the applet's panel.

  Label x = new Label("Hello World!");
  x.setFont(new Font("Serif", Font.PLAIN, 36));
  cards.add(x, "Card 1");
  Label y = new Label("Java is Fun!");
  y.setFont(new Font("Serif", Font.PLAIN, 36));
  cards.add(y, "Card 2");
  Label z = new Label("Ferris State University");
  z.setFont(new Font("Serif", Font.PLAIN + Font.BOLD, 36));
  cards.add(z, "Card 3");

  // Build the container of user controls and add it to the applet's
  // panel.

  controls.setLayout(new GridLayout(1, 3));
  previous.setFont(new Font("SanSerif", Font.BOLD, 18));
    new ActionListener() {
      public void actionPerformed(ActionEvent e) {

        // Display the previous "card" in the container and make
        // it the current selection in the Choice component

        if (cardIndex > 0) {
        else {
          cardIndex = cards.getComponentCount() - 1;
  pickOne.addItem("Card 1");
  pickOne.addItem("Card 2");
  pickOne.addItem("Card 3");
    new ItemListener() {
      public void itemStateChanged(ItemEvent e) {

        // Display the selected "card" within the container and
        // update the current card index being displayed., pickOne.getSelectedItem());
        cardIndex = pickOne.getSelectedIndex();
  next.setFont(new Font("SanSerif", Font.BOLD, 18));
    new ActionListener() {
      public void actionPerformed(ActionEvent e) {

        // Display the next "card" in the container and make
        // it the current selection in the Choice component;
        if (cardIndex < cards.getComponentCount() - 1) {
        else {
          cardIndex = 0;
  add(controls, BorderLayout.SOUTH);


  1. Rather than implement listener interfaces at the class level, inner listeners are registered and defined for components that fire events.

  2. A CardLayout object (myCardLayout) is created and used for the container of "cards" (cards). This is necessary because an object is required to manage the container. Methods of the CardLayout class, such as previous() and next(), are instance methods (they are not static).


Lab exercise for Ferris students

E-mail your answers to this assignment no later than the due date listed in the class schedule.


Review questions

  1. Assume that a CardLayout object named someLayout has been designated as the layout manager for a Panel object named somePanel and that somePanel has been populated with named components. Which one of the following statements might be used to display a specific component within somePanel?



  2., "17");

  3., "17");

  4., 17);

  1. Assume that a properly populated container having 5 objects is using a CardLayout layout manager. If the currently displayed component is the first component that was added to the container, what will happen if an attempt is made to show the previous component?

  1. a compile error will result

  1. a run time error will occur

  2. nothing will be displayed

  3. the fifth component added to the container will be displayed

  4. the first component added to the container will still be displayed

  1. Assume that somePanel is a container having a CardLayout layout manager and data is the reference of a TextField object. Which of the following statements would add the TextField object to the container in such a way that it may be directly displayed when needed?

    1. somePanel.add(data, "data");

    1. somePanel.add(data, 5);

    2. somePanel.add(5, data);

    3. somePanel.add(data);

    4. add(somePanel, data, "data");

  1. True or False: When using a CardLayout layout manager for a container, the container's area on the screen will never display more than one component.

  1. True

  2. False