How to put a JTextField, JLabel, and JButton above image

Program Description:

This Java program demonstrates on how to add JComponents above an image. The technique is simple, it is just a JPanel inside another JPanel.

We created a class called "backgroundClass" which extends to JPanel so that means our class "backgroundClass" is a JPanel. In our main JPanel the class "backgroundClass", we set there our background image then inside our main JPanel we added two JPanels which holds the JLabel, JTextField, and JButton.

By setting the background color of our JPanel 1 to transparent, we can see in the output that it is like the label, the buttons, and the textfields are actually placed above the image but it is not, instead it is a layer of panels, a JPanel placed inside another JPanel.

Output:

Code:

Main Program

/**
 * File: interfaceAndImage.java
 * Tiltle: How to put a JTextField, JLabel, and JButton above image
 * Author: http://java-code-complete.blogspot.com/
 */

//Java Core Package
import javax.swing.*;
//Java Extension Package
import java.awt.*;

public class interfaceAndImage extends JFrame {
 
 //Constructing the class we created called "backgroundClass" so we can
 //use it here in our main program as a parent panel.
 backgroundClass bc;
 
 //Initializing our JComponents and the labels of our JButton and JLabel
 JPanel panel1, panel2;
 JLabel labels[];
 JButton choices[];
 JTextField inputs[];
 String lebelName[] = {"Name:","Age:","Sex:","Address:","Tel. No.:"};
 String buttonChoice[] = {"Register","Reset","Cancel"};

 //Setting up GUI
    public interfaceAndImage() {
     
     //Setting up the Title of the Window
     super("How to put a JTextField, JLabel, and JButton above image");

     //Set Size of the Window (WIDTH, HEIGHT)
     setSize(310,170);

     //Exit Property of the Window
     setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
     
     //Constructing the class "backgroundClass" and call the keyword "this" so it can
     //be recognizable by our main program.
     bc = new backgroundClass(this);
     
     //Constructing JPanel 1 and set its layout property including the background property
     //which is transparent
  panel1 = new JPanel();
  panel1.setLayout(new GridLayout(5,2));
  
  //Constructing the class Color and set its property to 0,0,0,0 means no color.
  Color trans = new Color(0,0,0,0);
  panel1.setBackground(trans); //Setting JPanel 1 background to transparent
  
  
     //Constructing JPanel 2 and set its layout property
  panel2 = new JPanel();
  panel2.setLayout(new GridLayout());
  
  //Constructing our JComponents setting its specific array size
     labels = new JLabel[5];
     inputs = new JTextField[5];
     choices = new JButton[3];
     
     //Adding our JPanel 1 and 2 to our class "backgroundClass" which is our parent panel
     bc.add(panel1, BorderLayout.NORTH);
     bc.add(panel2, BorderLayout.SOUTH);

     //Setting up the container ready for the components to be added.
     Container pane = getContentPane();
     setContentPane(pane);
     
     //Constructing JLabel and JTextField using "for loop" in their desired order
     for(int count=0; count<inputs.length && count<labels.length; count++) {
      labels[count] = new JLabel(lebelName[count], JLabel.RIGHT);
      inputs[count] = new JTextField(30);
      
      //Adding the JLabel and the JTextFied in JPanel 1
      panel1.add(labels[count]);
      panel1.add(inputs[count]);
     }

  //Constructing all 4 JButtons using "for loop" and add them in the panel 1
     for(int count=0; count<choices.length; count++) {
      choices[count] = new JButton(buttonChoice[count]);
      panel2.add(choices[count]);
     }
  
  //Adding the class "backgroundClass" to our container as parent panel
  pane.add(bc);
  
     /**Set all the Components Visible.
      * If it is set to "false", the components in the container will not be visible.
      */
     setVisible(true);
     
     //Disable window size
     setResizable(false);
    }
    
 //Main Method
    public static void main (String[] args) {
     interfaceAndImage iai = new interfaceAndImage();
 }
}

Main JPanel (class "backgroundClass")

This is our main JPanel which holds our background image. This is where we also place our JButtons, JLabel, JTextField, and another JPanel by calling this class to our main Program.

/**
 * File: backgroundClass.java
 * Tiltle: Adding Image Above Another Image (class extention)
 * Author: http://java-code-complete.blogspot.com/
 */

//Java Core Package
import javax.swing.*;
//Java Extension Package
import java.awt.*;

public class backgroundClass extends JPanel {
  
 //Initializing the class Image
 Image background;

 //Setting up GUI
    public backgroundClass(interfaceAndImage iai) {
     
     //Constructing the class "Toolkit" which will be used to manipulate our images.
     Toolkit kit = Toolkit.getDefaultToolkit();
     
     //Getting the "background.jpg" image we have in the folder
     background = kit.getImage("background.jpg");
    }
    
    //Manipulate Images with JAVA2D API. . creating a paintComponent method.
     public void paintComponent(Graphics comp) {
      
      //Constructing the class Graphics2D. Create 2D by casting the "comp" to Graphics2D
     Graphics2D comp2D = (Graphics2D)comp;
     
     //creating a graphics2d using the images in the folder and place it in a specific coordinates.
         comp2D.drawImage(background, 0, 0, this);
     }
}