GUI Components are not in place as intended, Layout problem !

[murali2489]

Hi All,

In MY GUI app, inside JFrame, i need to put two rows 8 column components first and then below i need to put one button in the center .

I created one Jpanel having 2*8 grid layout and placed the components for two rows there and have put it in Frame. But how to make the button come below the second row in middle. and also i wish there is some space between the rows and the middle button for good look.

Please explain how to achieve that. Thanks in advance !

[JamesCherrill]

There are some simple layout managers, but sooner or later you want to get more precision and control than they offer. That's when it's time to get into GridBagLayout. Yes, it's intimidating at first with so many options, but that's what gives it it power. The layout you described (including the spaces etc) is totally achievable with GridBagLayout.
Have a look at this, then give it a try. If you get stuck come back here for more help.

[murali2489]

Hi James,

Thanks for the advise, i have gone thru the link . I wrote a sample program as below using Grid Bag Layout. And for adding components i arranged them in left to right fashion using intercepts (0,0) , (0,1) ....like that. they displayed in that order only, but the thing is it is not positioned correctly. I mean the components are displaying from the middle left of the screen. It should start from the top left hand side of the screen right ? ... please explain why components starts from the middle left of the screen instead of top left. and also why my textfield is looking so small. I have attached screenshot of my output.

package com.layout.gridbag;

import java.awt.Dimension;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;

public class Bag {

    public Bag() {
        // TODO Auto-generated constructor stub
        JFrame jFrm = new JFrame("grid Bag");
        jFrm.setSize(new Dimension(500,600));
        jFrm.setVisible(true);
        jFrm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        jFrm.getContentPane().setLayout(new GridBagLayout());

        GridBagConstraints gbc = new GridBagConstraints();

        JLabel label1 = new JLabel("Name");
        JLabel label2 = new JLabel("EMail");
        JLabel label3 = new JLabel("Contact No");
        JLabel label4 = new JLabel("Code No");
        JTextField text1 = new JTextField(10);
        JTextField text2 = new JTextField(100);
        JTextField text3 = new JTextField(500);
        JTextField text4 = new JTextField(800);
        gbc.fill= GridBagConstraints.NONE;
        gbc.weightx=1;

        gbc.gridx=0;
        gbc.gridy=0;
        jFrm.add(label1,gbc);

        gbc.gridx=1;
        gbc.gridy=0;
        jFrm.add(label2,gbc);

        gbc.gridx=2;
        gbc.gridy=0;
        jFrm.add(label3,gbc);

        gbc.gridx=3;
        gbc.gridy=0;
        jFrm.add(label4,gbc);

        gbc.gridx=0;
        gbc.gridy=1;

        jFrm.add(text1,gbc);

        gbc.gridx=1;
        gbc.gridy=1;
        jFrm.add(text2,gbc);

        gbc.gridx=2;
        gbc.gridy=1;
        jFrm.add(text3,gbc);

        gbc.gridx=3;
        gbc.gridy=1;
        jFrm.add(text4,gbc);

}

    /**
     * @param args
     */
    public static void main(String[] args) {
        // TODO Auto-generated method stub

        Bag reference = new Bag();

    }

}

[JamesCherrill]

Sorry - no time to study code now, but you seem to be defaulting to centering, try setting NORTH or NORTHEAST to put things in the top left corner

[Vaspar]

I would Prefer use Netbeans/Eclipse Designer and Use Null Layout/Group Layout
They will actually place your controls at provided x,y axies :)

You will be able to drag drop etc

https://netbeans.org/kb/docs/java/quickstart-gui.html

https://netbeans.org/kb/docs/java/gui-functionality.html

[JamesCherrill]

Null layout is a TERRIBLE idea. It guarantees that your UI will not fit properly when running on any system that has a different pixel density or fonts, and cannot respond to window resizes properly.
Group layout with a GUI builder is a reasonable option, but falls down as soon as you have any kind of dynamic content (variable number of components etc).
I'm going to stick with my preferred approach of using GridBagLayout so I have personal direct control over the whole thing, including its exact behaviour on resizes etc.
But each to his own...

ps Murali: don't forgat to pack() after adding (or removing) components so the layout manager can do its job.

[murali2489]

Hi Vaspar,

Thanks, I will try that. As im a learner i also need to know how to code to get my display :) ...

Hi James,

I gave Gbc.fill=gbc.NORTH ,after creating the instance gbc. But still components are grouped at the centre.

[JamesCherrill]

OK, I've got a moment or two now...

Adding things directly to the JFrame's content pane often leaves them centered - the default layout for a JFrame itself is a BorderLayout. You also have some issues around setting the overall size and packing (or not).

Here's a quick recipe for screen building that works most of the time...
Create new JPanel to hold your content
Use a GridBagLayout for that panel, and add all your components to it.
Add the panel to the JFrame - use jFrm.add(panel, BorderLayout.PAGE_START); if you want the panel always at the top of the frame instead of being centered
Set a minimum size for the JFrame (instead of trying to setSize, which will be ignored when you pack)
pack() the JFrame
Center on screen (if desired)
Make JFrame visible

ps Your text fields have sizes that makes it impossible to fit them on the screen with your layout - the size is in text columns, not pixels!

[JamesCherrill]

Here's a version of your code that illustrates all the above (plus some shorter technique for using GBCs)

     void initBag() {

        JFrame jFrm = new JFrame("grid Bag");
        jFrm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        JLabel label1 = new JLabel("Name");
        JLabel label2 = new JLabel("EMail");
        JLabel label3 = new JLabel("Contact No");
        JLabel label4 = new JLabel("Code No");

        JTextField text1 = new JTextField(10);
        JTextField text2 = new JTextField(10);
        JTextField text3 = new JTextField(5);
        JTextField text4 = new JTextField(8);

        JPanel panel = new JPanel();
        panel.setLayout(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        // gbc.gridx = GridBagConstraints.RELATIVE; // not needed (default)
        // places components one after another - the default for gridx and gridy

        gbc.gridy = 0;
        panel.add(label1, gbc);
        panel.add(label2, gbc);
        panel.add(label3, gbc);
        panel.add(label4, gbc);

        gbc.gridy = 1;
        panel.add(text1, gbc);
        panel.add(text2, gbc);
        panel.add(text3, gbc);
        panel.add(text4, gbc);

        jFrm.setMinimumSize(new Dimension(500, 400));
        jFrm.add(panel, BorderLayout.PAGE_START);
        jFrm.pack();
        jFrm.setLocationRelativeTo(null);
        jFrm.setVisible(true);
    }

[murali2489]

Hi James,

Thanks verymuch, i understand. By the way, what is pack().
I never used pack before while constructiong GUI and as you said i use setSize instead of setMinimum Size.

It means when i use pack() in my program i should use SetMinimumSize otherwise i can use setSize(), am i getting it right ?

[JamesCherrill]

pack() lays out all the components you have added according to the layout manager settings. You need to call it after doing anything that affects the layout, eg adding components. It makes the JFrame just big enough, and ignores any setSize you previously executed. setMinimumSize does what you expect, and mostly seems to work with GridBagLayout.

[murali2489]

got it, thanks :)