Align components on the page top right with GridBagLayout Manager

Question

i am trying to make a login page just like facebook, but the code i have written is not showing it on the top left side instead it is showing at the centre of page, i am using GridBagLayout and anchore for setting text at the FIRST_LINE_END.

final JFrame f2=new JFrame("Admin Main");
                    f2.setSize(1350,730);
                    f2.setVisible(true);
                    f1.setVisible(false);
                    f2.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);![enter image description here][2]
                    GridBagLayout gbl=new GridBagLayout();
                    final JPanel p2=new JPanel(gbl){
        private Image img = ImageIO.read(new File("F:\\Untitled Folder\\Rohan\\football2.jpg"));
        @Override
                          protected void paintComponent( Graphics g ) { 
              super.paintComponent(g);

              g.drawImage(img, 0,0,1366,730, null);
              }
       };;
                    GridBagConstraints g2=new GridBagConstraints();
                    g2.insets=new Insets(3,3,3,3);
                    JLabel l2=new JLabel("Admin ID",JLabel.LEFT);
                    JLabel l3=new JLabel("Password",JLabel.LEFT);
                    l2.setFont(new Font("TimesRoman",Font.BOLD,16));
                    l2.setForeground(Color.BLUE);
                    l2.setBackground(Color.WHITE);
                    l3.setFont(new Font("TimesRoman",Font.BOLD,16));
                    l3.setForeground(Color.BLUE);
                    l3.setBackground(Color.WHITE);
                    final JTextField t1=new JTextField(15);
                    final JPasswordField pw1=new JPasswordField(15);
                    JButton b3=new JButton("Back");
                    JButton b4=new JButton("Sign in");
                    f2.add(p2);
                    g2.anchor=GridBagConstraints.FIRST_LINE_END;
                    g2.gridx=1;
                    g2.gridy=1;
                    p2.add(l2,g2);
                    g2.gridx=2;
                    g2.gridy=1;
                    p2.add(t1,g2);
                    g2.gridx=1;
                    g2.gridy=2;
                    p2.add(l3,g2);
                    g2.gridx=2;
                    g2.gridy=2;
                    p2.add(pw1,g2);
                    g2.gridx=1;
                    g2.gridy=3;
                    p2.add(b3,g2);
                    g2.gridx=2;
                    g2.gridy=3;
                    p2.add(b4,g2);

Answer 1

I see two problems in your current layout:

1. You put your login panel in the center of the parent BorderLayout (so your panel gets stretched to the size of its container)
2. You have nothing in your GridBagLayout that will "push" your components to the top and to the left.

There are several options here:

1. You nest your login panel into several panels (for example using BorderLayout, once with the constraint NORTH and the second time with the constraint WEST).
2. Add your loginPanel to the WEST and you add a "filler" component to the bottom of the GridBagLayout in order to push the other components to the top.

Here is a demo of the second solution:

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Font;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import java.net.MalformedURLException;
import java.net.URL;

import javax.swing.Box;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JPasswordField;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;

public class TestLoginGridBagLayout {

    protected void initUI() throws MalformedURLException {
        JFrame frame = new JFrame("Admin Main");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JLabel background = new JLabel(new ImageIcon(new URL(
                "http://media1.santabanta.com/full1/Football/Football%20Abstract/football-abstract-6a.jpg"))) {
            @Override
            public Dimension getPreferredSize() {
                Dimension preferredSize = super.getPreferredSize();
                Dimension layoutPreferredSize = super.preferredSize();
                preferredSize.width = Math.max(preferredSize.width, layoutPreferredSize.width);
                preferredSize.height = Math.max(preferredSize.height, layoutPreferredSize.height);
                return preferredSize;
            }
        };
        background.setLayout(new BorderLayout());
        frame.add(background);
        GridBagLayout gbl = new GridBagLayout();
        final JPanel loginPanel = new JPanel(gbl);
        loginPanel.setOpaque(false);
        background.add(loginPanel, BorderLayout.WEST);
        JLabel adminIDLabel = new JLabel("Admin ID", JLabel.LEFT);
        JLabel passwordLabel = new JLabel("Password", JLabel.LEFT);
        adminIDLabel.setFont(new Font("TimesRoman", Font.BOLD, 16));
        adminIDLabel.setForeground(Color.BLUE);
        adminIDLabel.setBackground(Color.WHITE);
        passwordLabel.setFont(new Font("TimesRoman", Font.BOLD, 16));
        passwordLabel.setForeground(Color.BLUE);
        passwordLabel.setBackground(Color.WHITE);
        final JTextField adminID = new JTextField(15);
        final JPasswordField password = new JPasswordField(15);
        JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.TRAILING));
        buttonPanel.setOpaque(false);
        JButton back = new JButton("Back");
        JButton signIn = new JButton("Sign in");
        buttonPanel.add(back);
        buttonPanel.add(signIn);
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.insets = new Insets(3, 3, 3, 3);
        gbc.anchor = GridBagConstraints.FIRST_LINE_END;
        loginPanel.add(adminIDLabel, gbc);
        gbc.gridwidth = GridBagConstraints.REMAINDER;
        loginPanel.add(adminID, gbc);
        gbc.gridwidth = 1;
        loginPanel.add(passwordLabel, gbc);
        gbc.gridwidth = GridBagConstraints.REMAINDER;
        loginPanel.add(password, gbc);
        loginPanel.add(buttonPanel, gbc);
        GridBagConstraints gbcFiller = new GridBagConstraints();
        gbcFiller.weightx = 1.0;
        gbcFiller.weighty = 1.0;
        gbcFiller.fill = GridBagConstraints.BOTH;
        loginPanel.add(Box.createGlue(), gbcFiller);
        frame.pack();
        frame.setVisible(true);
    }

    /**
     * @param args
     */
    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    new TestLoginGridBagLayout().initUI();
                } catch (MalformedURLException e) {
                    e.printStackTrace();
                }
            }
        });
    }

}

I also took the liberty of:

• Rename your variables to meaningful names (it makes your code easier to read for others)
• Replace your custom background image panel with a JLabel
• Move your buttons to a nested panel with another LayoutManager
• Take another background image since I don't have yours.

Answer 2

Use FIRST_LINE_START as anchor value.

g2.anchor=GridBagConstraints.FIRST_LINE_START;

Answer 3

If you want it explicitly to be in the top left I'd rather use the NORTHWEST anchor. FIRST_LINE_END for text flowing left to right would also put the text on the right corner and the other way around for right to left.

Also, switch gridx and gridy to start at 0 instead of 1. And increment from as needed from there.

So for example:

g2.anchor=GridBagConstraints.NORTHWEST;
g2.gridx=0;
g2.gridy=0;
p2.add(l2,g2);
g2.gridx=1;
g2.gridy=0;
p2.add(t1,g2);
/*And so on for the rest of the block*/