CardLayout Example Program

The following is an example of the Java code you may use to expose the CardLayout format manager in action.

01 CardLayout, Java Code

The JFrame makes use of a BorderLayout to place two JPanels, one above the other. The pinnacle panel makes use of the FlowLayout to expose a “Switch Card” button which controls which card is show within the backside panel. The bottom panel makes use of the CardLayout to position two JPanels. The JPanel on display is determined by using the program(which is modified to the subsequent card by way of pressing the “Switch Card” button).

//Imports are listed in full to show what's being used
//could just import javax.swing.* and java.awt.* etc..
import java.awt.EventQueue;
import java.awt.BorderLayout;
import java.awt.CardLayout;
import java.awt.Color;
import javax.swing.BorderFactory;
import javax.swing.border.Border;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JComboBox;
import javax.swing.JButton;
import javax.swing.JLabel;
import javax.swing.SwingConstants;
import java.awt.Container;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
public class CardLayoutExample {
JFrame guiFrame;
CardLayout cards;
JPanel cardPanel;
public static void main(String[] args) {
//Use the event dispatch thread for Swing components
EventQueue.invokeLater(new Runnable()
public void run()
new CardLayoutExample();
public CardLayoutExample()
guiFrame = new JFrame();
//make sure the program exits when the frame closes
guiFrame.setTitle("CardLayout Example");
//This will center the JFrame in the middle of the screen
guiFrame.setLayout(new BorderLayout());
//creating a border to highlight the JPanel areas
Border outline = BorderFactory.createLineBorder(;
JPanel tabsPanel = new JPanel();
JButton switchCards = new JButton("Switch Card");
switchCards.setActionCommand("Switch Card");
switchCards.addActionListener(new ActionListener()
public void actionPerformed(ActionEvent event)
cards = new CardLayout();
cardPanel = new JPanel();
cardPanel.setLayout(cards);, "Fruits");
JPanel firstCard = new JPanel();
addButton(firstCard, "APPLES");
addButton(firstCard, "ORANGES");
addButton(firstCard, "BANANAS");
JPanel secondCard = new JPanel();
addButton(secondCard, "LEEKS");
addButton(secondCard, "TOMATOES");
addButton(secondCard, "PEAS");
cardPanel.add(firstCard, "Fruits");
cardPanel.add(secondCard, "Veggies");
//All the buttons are following the same pattern
//so create them all in one place.
private void addButton(Container parent, String name)
JButton but = new JButton(name);

02 Additional Information

The article that is going with this example is Using the program. For extra statistics on other format managers, have a examine ​an Overview of Layout Managers.

Elegance creates a JavaFX layout pane which locations controls based on a column and row function. The grid contained in this format is not predefined. It creates columns and rows as each manipulate is delivered. This permits the grid to be absolutely bendy in its layout.

Nodes can be placed in every mobile of the grid and may span multiple cells either vertically or horizontally. By default the rows and columns might be sized to healthy their content material – this is the widest toddler node defines the column width and the tallest child node the row height.

03 Usage Tips

If nodes are set to be displayed inside the same cell then they will overlap inside the JavaFX scene.

Columns and rows can be set to a preferred width and height via the use