Card Layout in java with Examples

Card Layout with Examples

Table of Contents

a) Introduction to Card Layout

b) Different types of Constructor

c) Source Code of each Constructor

d) Output of each Constructor

Introduction:

The CardLayout arranges the components in such a way that only one component is visible at a time. It treats the component as a card so it is called card layout. It only shows the one components at a time, and the container acts as a stack of cards. To create the cardLayout the event must be handled. It creates the action event and is to be handle using action listener interface. Later on this topic you will get to know more about it.

There are two constructor of the CardLayout(), they are;

          CardLayout() : It creates the card layout with zero horizontal gap and vertical gap between the components. There is no any parameters in this layout. So it is the default layout.

           CardLayout(int horizontal_gap, int vertical_gap): It creates the card layout with specific horizontal and vertical gap between the components. It has two parameters in it with takes integer values.

Examples;

Let’s see the source code and output of the CardLayout() with first constructor;

/*

 * To change this license header, choose License Headers in Project Properties.

 * To change this template file, choose Tools | Templates

 * and open the template in the editor.

 */

package LayoutManagers;

/**

 *

 * @author AnkitPC

 */

import java.awt.*;

import java.awt.event.*;

import javax.swing.*;

public class CardLayoutDemo implements ActionListener {

    JFrame f;

    JPanel p1,p2,p3;

    JButton b1,b2;

    JLabel l1,l2;

   CardLayout c=new CardLayout(); // first constructor

    CardLayoutDemo(){

        f=new JFrame();

        f.setSize(400,300);

        f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);

        f.setLayout(new BorderLayout());

       

        p1=new JPanel();

        p2=new JPanel();

        p3=new JPanel();

       

        l1=new JLabel("This is a Panel 1");

        l2=new JLabel("This is Panel 2");

       

        b1=new JButton("First");

        b2=new JButton("Next");

       

        b1.addActionListener(this);

        b2.addActionListener(this);

        

        p1.setLayout(c);

       

        p2.add(l1);

        p3.add(l2);

       

        p1.add(p2,"One");

        p1.add(p3,"Two");

        f.add(b1, BorderLayout.WEST);

        f.add(b2, BorderLayout.EAST);

        f.add(p1, BorderLayout.CENTER);

       

       

        f.setVisible(true);

       

    }

       

    public static void main(String[] args) {

        new CardLayoutDemo();

       

    }

    public void actionPerformed(ActionEvent e){

        if(e.getSource()==b1){

            c.show(p1,"One");

        }

        else if(e.getSource()==b2){

            c.show(p1, "Two");

        }

           

        }

   

}

The above source code demonstrate the first constructor of Card Layout. It is sometimes used as the alternate of tab pane. For card layout you need to know about event handling and also our next topic is about event handling. This is the simple demonstration of card layout. In this constructor you cannot specify the horizontal and vertical gap

Output:

There are only three panels used, If you click the next button you will go to next panel and vice versa.

Let’s see the source code and output of the CardLayout() with second constructor;

/*

 * To change this license header, choose License Headers in Project Properties.

 * To change this template file, choose Tools | Templates

 * and open the template in the editor.

 */

package LayoutManagers;

/**

 *

 * @author AnkitPC

 */

import java.awt.*;

import java.awt.event.*;

import javax.swing.*;

public class CardLayoutDemo implements ActionListener {

    JFrame f;

    JPanel p1,p2,p3;

    JButton b1,b2;

    JLabel l1,l2;

   CardLayout c=new CardLayout(20,20); // second constructor

    CardLayoutDemo(){

        f=new JFrame();

        f.setSize(400,300);

        f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);

        f.setLayout(new BorderLayout());

       

        p1=new JPanel();

        p2=new JPanel();

        p3=new JPanel();

       

        l1=new JLabel("This is a Panel 1");

        l2=new JLabel("This is Panel 2");

       

        b1=new JButton("First");

        b2=new JButton("Next");

       

        b1.addActionListener(this);

        b2.addActionListener(this);

       

        p1.setLayout(c);

       

        p2.add(l1);

        p3.add(l2);

       

        p1.add(p2,"One");

        p1.add(p3,"Two");

        f.add(b1, BorderLayout.WEST);

        f.add(b2, BorderLayout.EAST);

        f.add(p1, BorderLayout.CENTER);

       

        

        f.setVisible(true);

       

    }

       

    public static void main(String[] args) {

        new CardLayoutDemo();

       

    }

    public void actionPerformed(ActionEvent e){

        if(e.getSource()==b1){

            c.show(p1,"One");

        }

        else if(e.getSource()==b2){

            c.show(p1, "Two");

        }

           

        }

   

}

The above source code demonstrate the second constructor of Card Layout. It is sometimes used as the alternate of tab pane. For card layout you need to know about event handling and also our next topic is about event handling. This is the simple demonstration of card layout. You can see the difference only here is the horizontal and vertical gap of the components inside the panel one in which card layout is implemented.

Output:

There are only three panels used, If you click the next button you will go to next panel and vice versa.

Other Layout Managers;

Grid and GridBag Layout

Flow and Border Layout