Panel Containers as Cards

AWT Card Layout in Java Explained

This example requires preliminary knowledge on the AWT Frame Window, Nested Containers. You can read the articles from the below Links in the order specified.

Article on AWT Frame Window From Hub Pages Net work => Hub Page Article
Article on Panel and Nested Containers => Coding-Examples Article

1. Introduction to Card Layout

In this example, we will look into Card Layout of Java AWT. This layout supports the display of multiple containers. It treats the containers as cards and can navigate through it and display it to users. After creating the container, one can hand over then to the Card Layout Manager. The CardLayout Class of Java AWT can flip cards or switch between the cards using the below methods:

  1. First: Displays first card in the Manager.
  2. Last: Displays last card in the Manager.
  3. Previous: Displays previous card from current position.
  4. Next: Displays next card from current position.

The Card Layout Manager expects a name for each container when we ask to add it. Later, one can use the show method to display a Card by its name.

2. About the Card Layout Example

In this example, we will create four instances of Panels which acts as Cards. Then we will add these to the Frame Window and assign a card layout manager to manage it. The Card Layout Manager Arranges the cards as shown below:

Java AWT CardLayout Example
Java AWT Card Layout Example


Note, Each Card is having a Next and Previous button in it. One can navigate between the cards using these buttons. While we create the panel, we will assign a background color to it and this will help us to tell which card the layout manager is currently displaying.

3. Preparing the Cards

3.1 Imports and Class Derivation

We will extend the Panel class and add two buttons to it. We will also set a background to it. The Frame Window will use these panels as cards. The below code shows required imports for our Panel:

Next, we prepare our card by extending it from the java.awt.Panel class. In the previous section we saw each card has two buttons. We will handle the button click event in the Frame Window class which acts a parent for these Panels. So, in the constructor we take that as a parameter. Note, we have yet not created the Frame Window. The constructor also gets a reference to the java.awt.Color. Below is the code

3.2 CardPanel Constructor

The constructor creates two AWT Button instances to move between the cards. The setActionCommand of the Button class sets the command text in string format. We will use this string in the handler function to know which command button is the source of the event.

Once button instances are ready, we add that to our panel by calling the add method. After this the constructor sets the background color for the panel. Note, for these two buttons the panel acts as a container. So we handover these button to the Flow Layout Manager. Finally, the buttons are registered with the Action Listener which is our Frame Window. Now our cards class is ready. One can create multiple cards with a different background color from it.

4. Setup the Frame Window

4.1 Imports and Derivation

Our panel class takes CardLayoutWindow as its parent. Now, we will derive this class from the java.awt.Frame. Note our derived class implements WindowListener so we can discard the window and quit the application. The class and required imports are below:

4.2 Card Layout Setup

The frame window declares a CardLayout reference, and the constructor creates actual object. Then in the button handlers we make use of it to navigate between the cards.

After setting the frame window size and location, we create four of our Cards with four different colors. Then, we create CardLayout and assign that to our frame window using the setLayout method. The add method takes two parameters. The first parameter is the name which we gave to the card and the second one is our card object. We add all our four cards to the frame window.


The below picture shows how Card Layout stacks the Panels (The below picture does not show the yellow card)

Panel Containers stacked by Card Layout Manager
Panel Containers as Cards

4.3 Window Listener

After adding all the cards, we use the show method of the Card Layout Manager to display the green card. The second parameter expects a card name which we provided while adding the card through add method. Next, we have to provide implementation for the Window Listener which is below:

5. Flip Cards or Switch Cards using Card Layout

The Frame window class maintains the Panels through Card Layout Manager. In the layout manager perspective, each Panel is a card. Now, we will handle the buttons. The Frame window class need to implement the ActionListener interface to handle the button events. We change the declaration as shown below:

In the actionPerformed(ActionEvent ae) event handler, we check the action command to know whether it is Next and Previous. Then, we call next() or previous() method to switch the cards. For example, if card layout manager is showing blue card, the next method will flip the blue card into Green card. In addition, the Card Layout Manager cycles the cards when it reaches the head or tail of the stacked cards. The handler method is below:

The below video shows how our CardLayout example flip cards using the next and previous buttons.

6. Listings


Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.