Java Swing - How to stack Username textfield and Password textfield

Question

I'm using a gridbaglayout for my layout, and I'm wondering how to go about rearranging it so that the username textfield goes directly above the password textfield, and the login button goes under the password textfield.

Currently my code outputs:

However I want something like this:

My code:

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class TestingJavaCode {

    public TestingJavaCode() {

        JFrame appFrame = new JFrame();
        JPanel loginPanel = new JPanel();
        appFrame.setSize(1200, 800);
        loginPanel = new JPanel(new GridBagLayout());


        // Button for logging in, with respective GridBagConstraint
        // setFocusable is set to false to take out the border around the text
        JButton loginButton = new JButton("Login");
        GridBagConstraints lButtonC = new GridBagConstraints();
        loginButton.setFocusable(false);


        // Username text-field and JLabel with respective GridBagConstraints
        JTextField tfUsername = new JTextField(15);
        GridBagConstraints tfUserC = new GridBagConstraints();
        JLabel txtUser = new JLabel("Username: ");
        GridBagConstraints txtUserC = new GridBagConstraints();


        // Password text-field and JLabel with respective GridBagConstraints
        JPasswordField tfPassword = new JPasswordField(15);
        GridBagConstraints tfPassC = new GridBagConstraints();
        JLabel txtPassword = new JLabel("Password: ");
        GridBagConstraints txtPassC = new GridBagConstraints();

        // Add all components to the JFrame
        // Making sure to add the text before the text-fields
        loginPanel.add(txtUser, txtUserC);
        loginPanel.add(tfUsername, tfUserC);
        loginPanel.add(txtPassword, txtPassC);
        loginPanel.add(tfPassword, tfPassC);
        loginPanel.add(loginButton, lButtonC);

        // Show the frame
        appFrame.add(loginPanel);
        appFrame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        appFrame.setVisible(true);
    }


    public static void main(String[] args) {
        new TestingJavaCode();
    }

}

EDIT: I am open to using other layout managers.

Answer 1

Since you don't want to use gridx/y constraints why don't you just use combination of BoxLayout and FlowLayout? I added new 2 new panels. One for username and one for password and since FlowLayout is the default layout for panel we can just leave it as it is.

FlowLayout is the default layout manager for every JPanel. It simply lays out components in a single row, starting a new row if its container is not sufficiently wide.

After that lets set BoxLayout to your loginPanel and just add username and password panel to it.

The BoxLayout class puts components in a single row or column. It respects the components' requested maximum sizes and also lets you align components.

Here is the complete updated source:

import javax.swing.*;

public class TestingJavaCode {

    public TestingJavaCode() {

        JFrame appFrame = new JFrame();
        JPanel loginPanel = new JPanel();
        appFrame.setSize(300, 130);
        loginPanel.setLayout(new BoxLayout(loginPanel, BoxLayout.PAGE_AXIS));

        // Button for logging in, with respective GridBagConstraint
        // setFocusable is set to false to take out the border around the text
        JButton loginButton = new JButton("Login");
        loginButton.setFocusable(false);

        JPanel usernamePanel = new JPanel();
        // Username text-field and JLabel with respective GridBagConstraints
        JTextField tfUsername = new JTextField(15);
        JLabel txtUser = new JLabel("Username: ");

        usernamePanel.add(txtUser);
        usernamePanel.add(tfUsername);

        JPanel passwordPanel = new JPanel();
        // Password text-field and JLabel with respective GridBagConstraints
        JPasswordField tfPassword = new JPasswordField(15);
        JLabel txtPassword = new JLabel("Password: ");

        passwordPanel.add(txtPassword);
        passwordPanel.add(tfPassword);

        // Add all components to the JFrame
        // Making sure to add the text before the text-fields
        loginPanel.add(usernamePanel);

        loginPanel.add(usernamePanel);
        loginPanel.add(passwordPanel);
        loginPanel.add(loginButton);
        // Show the frame
        appFrame.add(loginPanel);
        appFrame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        appFrame.setVisible(true);
    }

    public static void main(String[] args) {
        new TestingJavaCode();
    }

}