Java Card Layout with Background Image

Question

I am creating a Flight Reservation system for a project, having trouble with the GUI of the app. I am using a CardLayout to manage the multiple cards for this program.

In the login card I am trying to add a background image, but the input fields are shown below the image.

The code for the program is

    import java.io.*;
    import java.awt.*;
    import java.awt.image.*;
    import javax.swing.*;
    import javax.imageio.*;
    import java.net.*;

    public class CardPanel {
        public static void main(String[] args) {
            try {
                CardLayout cardLayout = null;
                JFrame frame = new JFrame("Welcome");
                JPanel contentPane = new JPanel(cardLayout);

                URL url = new URL("https://i.stack.imgur.com/P59NF.png");
                BufferedImage img = ImageIO.read(url);
                ImageIcon imageIcon = new ImageIcon(img);
                JLabel logo = new JLabel(imageIcon);

                JPanel buttonsPanel = new JPanel();
                JButton login = new JButton("Login");
                buttonsPanel.add(login);

                contentPane.setLayout(new BorderLayout(10, 15));

                contentPane.add(logo, BorderLayout.NORTH);
                contentPane.add(buttonsPanel, BorderLayout.SOUTH); 

                frame.add(contentPane, BorderLayout.CENTER);
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setResizable(false);
                frame.pack();
                frame.setVisible(true);
            } catch (MalformedURLException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

A screenshot of the app is also attached (https://i.stack.imgur.com/KkEcz.png).

I would like the button to be above the background image.

_but the input fields are shown below the image_ So where & how should they appear? — Reimeus, May 27 '17 at 10:50
@Reimeus I wanted the image as a background and the input fields above it. — RickAbed, May 27 '17 at 10:54
Try to recreate this with two panels in the card layout, each with a single component. One way to get image(s) for an example is to hot link to images seen in [this Q&A](http://stackoverflow.com/q/19209650/418556). For better help sooner, post a [MCVE] or [Short, Self Contained, Correct Example](http://www.sscce.org/). — Andrew Thompson, May 27 '17 at 11:13
BTW - is the card layout actually related to the immediate problem? It appears from the screenshot that the image is pushing components downward in a single panel (without card layout. Focus carefully on the *problem* code rather than dump the entire code. — Andrew Thompson, May 27 '17 at 11:28
@AndrewThompson I've updated the code to only include the relevant parts, however, was unable to hot link the image. I appreciate your advice and help. — RickAbed, May 27 '17 at 11:47
*"however, was unable to hot link the image."* Use one of the images in the page I linked to, **that's what they're for!** Also load the image direct from URL. — Andrew Thompson, May 27 '17 at 11:59
A test suggests a card layout cannot be used to show a BG image. It seems that internally it removes one card and adds another when swapping components. Use a custom painted `JPanel` to draw the BG image. — Andrew Thompson, May 27 '17 at 12:16

score 1 · Accepted Answer · answered May 27 '17 at 12:17

A test suggests a card layout cannot be used to show a BG image. It seems that internally it removes one card and adds another when swapping components. Use a custom painted JPanel to draw the BG image.

Here is the evidence.

That red color is the panel with the card layout, the button panel is set to be transparent.

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

public class CardPanel {

    public static void main(String[] args) throws Exception {
        CardLayout cardLayout = new CardLayout();
        JFrame frame = new JFrame("Welcome");
        JPanel contentPane = new JPanel(cardLayout);
        contentPane.setBackground(Color.RED);

        ImageIcon imageIcon = new ImageIcon(new URL("https://i.stack.imgur.com/OVOg3.jpg"));
        JLabel logo = new JLabel(imageIcon);

        JPanel buttonsPanel = new JPanel();
        JButton login = new JButton("Login");
        buttonsPanel.add(login);

        buttonsPanel.setOpaque(false);

        contentPane.add(logo, "logo");
        contentPane.add(buttonsPanel, "button");

        cardLayout.show(contentPane, "button");

        frame.add(contentPane, BorderLayout.CENTER);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.pack();
        frame.setVisible(true);
    }
}

Java Card Layout with Background Image

1 Answers1