Box Layout moves components, alignment

Question

I would like to create the following GUI:

https://www.dropbox.com/s/ebm057jfevwe532/result.png?dl=0

Here is my code:

public class TypingTutor extends JFrame{
private JPanel mainPanel;
private JPanel[] keyboardPanel;
private JLabel instructionsLabel;
private JLabel noteLabel;
private JTextArea typingTextArea;
private JButton[] buttonKeysFirstRow;
private JButton[] buttonKeysSecondRow;
private JButton[] buttonKeysThirdRow;
private JButton[] buttonKeysFourthRow;
private JButton[] buttonKeysFifthRow;
//TypingTutor no-argument constructor
public TypingTutor(){
    super("Typing Application");
    setLayout(new BoxLayout(getContentPane(), BoxLayout.Y_AXIS));

    instructionsLabel = new JLabel("Type some text using your keyboard. The keys you press " +
        "will be highlighted and the text will be displayed.");
    noteLabel = new JLabel("Note: Clicking the buttons with your mouse will not perform any " +
        "action.");
    add(instructionsLabel);
    add(noteLabel);

    typingTextArea = new JTextArea();
    add(typingTextArea);

    //each row represents each row in the keyboard
    buttonKeysFirstRow = new JButton[14];
    buttonKeysSecondRow = new JButton[13];
    buttonKeysThirdRow = new JButton[14];
    buttonKeysFourthRow = new JButton[12];
    buttonKeysFifthRow = new JButton[4];
    initializeKeys(1);
    initializeKeys(2);
    initializeKeys(3);
    initializeKeys(4);
    initializeKeys(5);
    Box[] keyboard = new Box[5];
    for(int i = 0; i < keyboard.length; i++){
        keyboard[i] = Box.createHorizontalBox();
        switch(i){
            case 0:
                for(int j = 0; j < buttonKeysFirstRow.length; j++){
                    keyboard[i].add(buttonKeysFirstRow[j]);
                } //end for
                break;
            case 1:
                for(int j = 0; j < buttonKeysSecondRow.length; j++){
                    keyboard[i].add(buttonKeysSecondRow[j]);
                } //end for
                break;
            case 2:
                for(int j = 0; j < buttonKeysThirdRow.length; j++){
                        keyboard[i].add(buttonKeysThirdRow[j]);
                } //end for
                break;
            case 3:
                for(int j = 0; j < buttonKeysFourthRow.length; j++){
                    keyboard[i].add(buttonKeysFourthRow[j]);
                } //end for
                break;
            case 4:
                for(int j = 0; j < buttonKeysFifthRow.length; j++){
                    keyboard[i].add(buttonKeysFifthRow[j]);
                } //end for
                break;
        } //end switch
        add(keyboard[i]);
    } //end for
} //end TypingTutor no-argument constructor

//initializes button keys with their values
private void initializeKeys(int keys){
    switch(keys){
        case 1:
            buttonKeysFirstRow[0] = new JButton("|\n°");
            buttonKeysFirstRow[1] = new JButton("1");
            buttonKeysFirstRow[2] = new JButton("2");
            buttonKeysFirstRow[3] = new JButton("3");
            buttonKeysFirstRow[4] = new JButton("4");
            buttonKeysFirstRow[5] = new JButton("5");
            buttonKeysFirstRow[6] = new JButton("6");
            buttonKeysFirstRow[7] = new JButton("7");
            buttonKeysFirstRow[8] = new JButton("8");
            buttonKeysFirstRow[9] = new JButton("9");
            buttonKeysFirstRow[10] = new JButton("0");
            buttonKeysFirstRow[11] = new JButton("'\n?");
            buttonKeysFirstRow[12] = new JButton("¿\n¡");
            buttonKeysFirstRow[13] = new JButton("Backspace");
            break;
        case 2:
            buttonKeysSecondRow[0] = new JButton("  Tab  ");
            buttonKeysSecondRow[1] = new JButton("Q");
            buttonKeysSecondRow[2] = new JButton("W");
            buttonKeysSecondRow[3] = new JButton("E");
            buttonKeysSecondRow[4] = new JButton("R");
            buttonKeysSecondRow[5] = new JButton("T");
            buttonKeysSecondRow[6] = new JButton("Y");
            buttonKeysSecondRow[7] = new JButton("U");
            buttonKeysSecondRow[8] = new JButton("I");
            buttonKeysSecondRow[9] = new JButton("O");
            buttonKeysSecondRow[10] = new JButton("P");
            buttonKeysSecondRow[11] = new JButton("´\n¨");
            buttonKeysSecondRow[12] = new JButton("+\n*");
            break;
        case 3:
            buttonKeysThirdRow[0] = new JButton("  Caps  ");
            buttonKeysThirdRow[1] = new JButton("A");
            buttonKeysThirdRow[2] = new JButton("S");
            buttonKeysThirdRow[3] = new JButton("D");
            buttonKeysThirdRow[4] = new JButton("F");
            buttonKeysThirdRow[5] = new JButton("G");
            buttonKeysThirdRow[6] = new JButton("H");
            buttonKeysThirdRow[7] = new JButton("J");
            buttonKeysThirdRow[8] = new JButton("K");
            buttonKeysThirdRow[9] = new JButton("L");
            buttonKeysThirdRow[10] = new JButton("Ñ");
            buttonKeysThirdRow[11] = new JButton("{\n[");
            buttonKeysThirdRow[12] = new JButton("}\n]");
            buttonKeysThirdRow[13] = new JButton(" Enter ");
            break;
        case 4:
            buttonKeysFourthRow[0] = new JButton("   Shift   ");
            buttonKeysFourthRow[1] = new JButton("<\n>");
            buttonKeysFourthRow[2] = new JButton("Z");
            buttonKeysFourthRow[3] = new JButton("X");
            buttonKeysFourthRow[4] = new JButton("C");
            buttonKeysFourthRow[5] = new JButton("V");
            buttonKeysFourthRow[6] = new JButton("B");
            buttonKeysFourthRow[7] = new JButton("N");
            buttonKeysFourthRow[8] = new JButton("M");
            buttonKeysFourthRow[9] = new JButton(",\n;");
            buttonKeysFourthRow[10] = new JButton(".\n:");
            buttonKeysFourthRow[11] = new JButton("^");
            break;
        case 5:
            buttonKeysFifthRow[0] = new JButton("");
            buttonKeysFifthRow[1] = new JButton("<");
            buttonKeysFifthRow[2] = new JButton("v");
            buttonKeysFifthRow[3] = new JButton(">");

            buttonKeysFifthRow[0].setMinimumSize(new Dimension(50, 10));
            break;
    } //end switch
  } //end method initializeKeys
} //end class TypingTutor

And here is my result:

https://www.dropbox.com/s/dx99npirnl0v1wd/sample.png?dl=0

I have tried using the class javax.swing.Box and adding a main Box with Box.createVerticalBox() to the center in the JFrame BorderLayout and then adding other boxes with Box.createHorizontalBox() and I get the same result, everything is ok until I add the JButtons after the JTextArea, after that, the JButtons shrink and the JLabel aligns to the right.

Am I correct in assuming that you have your image URLs backwards? It looks like the first is your actual result and the second is the desired result. — VGR, Jan 08 '15 at 20:08
Are your links the wrong way round? The one you say you want seems worse than the one you say you've got. — J Richard Snape, Jan 08 '15 at 20:08

Gilbert Le Blanc · Answer 1 · 2015-01-08T20:43:42.973

I made some modifications to your code to make it runnable. Here's an image of the typing tutor GUI now.

Typing Tutor

I centered the instruction text, made the typing area a reasonable size, and put the typing area into a scroll pane. I fixed the space bar somewhat.

Here's the runnable code.

package com.ggl.testing;

import java.awt.Dimension;

import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.SwingUtilities;

public class TypingTutor extends JFrame {

    private static final long serialVersionUID = -7372491882460254385L;

    private JLabel instructionsLabel;
    private JLabel noteLabel;
    private JTextArea typingTextArea;
    private JButton[] buttonKeysFirstRow;
    private JButton[] buttonKeysSecondRow;
    private JButton[] buttonKeysThirdRow;
    private JButton[] buttonKeysFourthRow;
    private JButton[] buttonKeysFifthRow;

    // TypingTutor no-argument constructor
    public TypingTutor() {
        super("Typing Application");
        setLocationByPlatform(true);
        setLayout(new BoxLayout(getContentPane(), BoxLayout.PAGE_AXIS));

        JPanel instructionPanel = new JPanel();
        instructionPanel.setLayout(
                new BoxLayout(instructionPanel, BoxLayout.PAGE_AXIS));

        instructionsLabel = new JLabel(
                "Type some text using your keyboard. The keys you press "
                        + "will be highlighted and the text will be displayed.");
        instructionsLabel.setAlignmentX(JLabel.CENTER_ALIGNMENT);
        instructionPanel.add(instructionsLabel);
        noteLabel = new JLabel(
                "Note: Clicking the buttons with your mouse will not perform any "
                        + "action.");
        noteLabel.setAlignmentX(JLabel.CENTER_ALIGNMENT);
        instructionPanel.add(noteLabel);
        add(instructionPanel);

        typingTextArea = new JTextArea(10, 60);
        typingTextArea.setWrapStyleWord(true);
        JScrollPane scrollPane = new JScrollPane(typingTextArea);
        add(scrollPane);

        // each row represents each row in the keyboard
        buttonKeysFirstRow = new JButton[14];
        buttonKeysSecondRow = new JButton[13];
        buttonKeysThirdRow = new JButton[14];
        buttonKeysFourthRow = new JButton[12];
        buttonKeysFifthRow = new JButton[4];
        initializeKeys(1);
        initializeKeys(2);
        initializeKeys(3);
        initializeKeys(4);
        initializeKeys(5);
        Box[] keyboard = new Box[5];
        for (int i = 0; i < keyboard.length; i++) {
            keyboard[i] = Box.createHorizontalBox();
            switch (i) {
            case 0:
                for (int j = 0; j < buttonKeysFirstRow.length; j++) {
                    keyboard[i].add(buttonKeysFirstRow[j]);
                } // end for
                break;
            case 1:
                for (int j = 0; j < buttonKeysSecondRow.length; j++) {
                    keyboard[i].add(buttonKeysSecondRow[j]);
                } // end for
                break;
            case 2:
                for (int j = 0; j < buttonKeysThirdRow.length; j++) {
                    keyboard[i].add(buttonKeysThirdRow[j]);
                } // end for
                break;
            case 3:
                for (int j = 0; j < buttonKeysFourthRow.length; j++) {
                    keyboard[i].add(buttonKeysFourthRow[j]);
                } // end for
                break;
            case 4:
                for (int j = 0; j < buttonKeysFifthRow.length; j++) {
                    keyboard[i].add(buttonKeysFifthRow[j]);
                } // end for
                break;
            } // end switch
            add(keyboard[i]);
        } // end for
        this.pack();
        this.setVisible(true);

    } // end TypingTutor no-argument constructor

    // initializes button keys with their values
    private void initializeKeys(int keys) {
        switch (keys) {
        case 1:
            buttonKeysFirstRow[0] = new JButton("|\n°");
            buttonKeysFirstRow[1] = new JButton("1");
            buttonKeysFirstRow[2] = new JButton("2");
            buttonKeysFirstRow[3] = new JButton("3");
            buttonKeysFirstRow[4] = new JButton("4");
            buttonKeysFirstRow[5] = new JButton("5");
            buttonKeysFirstRow[6] = new JButton("6");
            buttonKeysFirstRow[7] = new JButton("7");
            buttonKeysFirstRow[8] = new JButton("8");
            buttonKeysFirstRow[9] = new JButton("9");
            buttonKeysFirstRow[10] = new JButton("0");
            buttonKeysFirstRow[11] = new JButton("'\n?");
            buttonKeysFirstRow[12] = new JButton("¿\n¡");
            buttonKeysFirstRow[13] = new JButton("Backspace");
            break;
        case 2:
            buttonKeysSecondRow[0] = new JButton("  Tab  ");
            buttonKeysSecondRow[1] = new JButton("Q");
            buttonKeysSecondRow[2] = new JButton("W");
            buttonKeysSecondRow[3] = new JButton("E");
            buttonKeysSecondRow[4] = new JButton("R");
            buttonKeysSecondRow[5] = new JButton("T");
            buttonKeysSecondRow[6] = new JButton("Y");
            buttonKeysSecondRow[7] = new JButton("U");
            buttonKeysSecondRow[8] = new JButton("I");
            buttonKeysSecondRow[9] = new JButton("O");
            buttonKeysSecondRow[10] = new JButton("P");
            buttonKeysSecondRow[11] = new JButton("´\n¨");
            buttonKeysSecondRow[12] = new JButton("+\n*");
            break;
        case 3:
            buttonKeysThirdRow[0] = new JButton("  Caps  ");
            buttonKeysThirdRow[1] = new JButton("A");
            buttonKeysThirdRow[2] = new JButton("S");
            buttonKeysThirdRow[3] = new JButton("D");
            buttonKeysThirdRow[4] = new JButton("F");
            buttonKeysThirdRow[5] = new JButton("G");
            buttonKeysThirdRow[6] = new JButton("H");
            buttonKeysThirdRow[7] = new JButton("J");
            buttonKeysThirdRow[8] = new JButton("K");
            buttonKeysThirdRow[9] = new JButton("L");
            buttonKeysThirdRow[10] = new JButton("Ñ");
            buttonKeysThirdRow[11] = new JButton("{\n[");
            buttonKeysThirdRow[12] = new JButton("}\n]");
            buttonKeysThirdRow[13] = new JButton(" Enter ");
            break;
        case 4:
            buttonKeysFourthRow[0] = new JButton("   Shift   ");
            buttonKeysFourthRow[1] = new JButton("<\n>");
            buttonKeysFourthRow[2] = new JButton("Z");
            buttonKeysFourthRow[3] = new JButton("X");
            buttonKeysFourthRow[4] = new JButton("C");
            buttonKeysFourthRow[5] = new JButton("V");
            buttonKeysFourthRow[6] = new JButton("B");
            buttonKeysFourthRow[7] = new JButton("N");
            buttonKeysFourthRow[8] = new JButton("M");
            buttonKeysFourthRow[9] = new JButton(",\n;");
            buttonKeysFourthRow[10] = new JButton(".\n:");
            buttonKeysFourthRow[11] = new JButton("^");
            break;
        case 5:
            buttonKeysFifthRow[0] = new JButton("                             ");
            buttonKeysFifthRow[1] = new JButton("<");
            buttonKeysFifthRow[2] = new JButton("v");
            buttonKeysFifthRow[3] = new JButton(">");
            break;
        } // end switch
    } // end method initializeKeys

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                new TypingTutor();
            }
        });
    }

} // end class TypingTutor

This doesn't match the layout the question is trying to achieve. — VGR, Jan 09 '15 at 02:34
Centering the JLabels was the solution to my problem, thank you very much. — Dazt, Jan 09 '15 at 22:14

score 0 · Accepted Answer · edited May 23 '17 at 11:50

Non-intuitively - you are running into a problem with the default label alignment. This comes to light when you combine labels with certain other components in a BoxLayout - see the Java tutorial on alignment in BoxLayout

Try this for your your JLabels (note the two new lines):

instructionsLabel = new JLabel("Type some text using your keyboard. The keys you press " +
   "will be highlighted and the text will be displayed.");
noteLabel = new JLabel("Note: Clicking the buttons with your mouse will not perform any " +
    "action.");
instructionsLabel.setAlignmentX(Component.CENTER_ALIGNMENT);
noteLabel.setAlignmentX(Component.CENTER_ALIGNMENT);
add(instructionsLabel);
add(noteLabel);

You might have to play around a bit to get the size of your spacebar right - 50 x 10 displays very small on my computer...

EDIT:

Actually - the spacebar displaying small is also an issue with how JButtons paint - see this question. In summary, you have to set the minimum and preferred size followed by the maximum size to ensure it checks the minimum size and paint correctly. So, replace your .setMinimumSize(... with the following (dimenstions 250 x 26 worked nicely on my display)

        Dimension spaceDimension = new Dimension(250, 26);
        buttonKeysFifthRow[0].setMinimumSize(spaceDimension);
        buttonKeysFifthRow[0].setPreferredSize(spaceDimension);
        buttonKeysFifthRow[0].setMaximumSize(spaceDimension);

This actually worked a lot. Now I just have to set the preferred size for the jbuttons, thank you very much — Dazt, Jan 09 '15 at 22:05
You've accepted it. Thanks :) up votes need 15 rep, you'll get that soon if you use SO a few times — J Richard Snape, Jan 15 '15 at 22:39

Box Layout moves components, alignment

2 Answers2