How do I get letters spaced after eachother on virtual keyboard

Question

I've only recently learnt how to use JButton, JFrame, and so on and am trying to make a keyboard. I've got so far as that when I click on the letter the JLabel appears, but I'm having difficulty with having them spaced next to eachother, as they're all appearing on top of eachother. I'm was wondering if anyone could help me with this. I know my code isn't ideal but whilst I'm still inexperienced it's currently the only way I know how to do it. Here's my code so far (excluding the 'Run' method used to run the entire code):

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

public class Frame extends JFrame {

    JButton a;
    JButton b;
    JButton c;
    JButton d;
    JButton e;
    JButton f;
    JButton g;
    JButton h;
    JButton i;
    JButton j;
    JButton k;
    JButton l;
    JButton m;
    JButton n;
    JButton o;
    JButton p;
    JButton q;
    JButton r;
    JButton s;
    JButton t;
    JButton u;
    JButton v;
    JButton w;
    JButton x;
    JButton y;
    JButton z;
    JButton space;
    JPanel panel;

    public Frame() {

        panel = new JPanel();
        panel.setBackground(Color.WHITE);
        panel.setLayout(null);
        add(panel);

        a = new JButton("A");
        a.setBounds(100, 0, 50, 37);
        b = new JButton("B");
        b.setBounds(200, 0, 50, 37);
        c = new JButton("C");
        c.setBounds(300, 0, 50, 37);
        d = new JButton("D");
        d.setBounds(400, 0, 50, 37);
        e = new JButton("E");
        e.setBounds(500, 0, 50, 37);
        f = new JButton("F");
        f.setBounds(600, 0, 50, 37);
        g = new JButton("G");
        g.setBounds(100, 50, 50, 37);
        h = new JButton("H");
        h.setBounds(200, 50, 50, 37);
        i = new JButton("I");
        i.setBounds(300, 50, 50, 37);
        j = new JButton("J");
        j.setBounds(400, 50, 50, 37);
        k = new JButton("K");
        k.setBounds(500, 50, 50, 37);
        l = new JButton("L");
        l.setBounds(600, 50, 50, 37);
        m = new JButton("M");
        m.setBounds(100, 100, 50, 37);
        n = new JButton("N");
        n.setBounds(200, 100, 50, 37);
        o = new JButton("O");
        o.setBounds(300, 100, 50, 37);
        p = new JButton("P");
        p.setBounds(400, 100, 50, 37);
        q = new JButton("Q");
        q.setBounds(500, 100, 50, 37);
        r = new JButton("R");
        r.setBounds(600, 100, 50, 37);
        s = new JButton("S");
        s.setBounds(100, 150, 50, 37);
        t = new JButton("T");
        t.setBounds(200, 150, 50, 37);
        u = new JButton("U");
        u.setBounds(300, 150, 50, 37);
        v = new JButton("V");
        v.setBounds(400, 150, 50, 37);
        w = new JButton("W");
        w.setBounds(500, 150, 50, 37);
        x = new JButton("X");
        x.setBounds(600, 150, 50, 37);
        y = new JButton("Y");
        y.setBounds(100, 200, 50, 37);
        z = new JButton("Z");
        z.setBounds(200, 200, 50, 37);

        space = new JButton("SPACE");
        space.setBounds(300, 200, 100, 37);

        panel.add(a);
        panel.add(b);
        panel.add(c);
        panel.add(d);
        panel.add(e);
        panel.add(f);
        panel.add(g);
        panel.add(h);
        panel.add(i);
        panel.add(j);
        panel.add(k);
        panel.add(l);
        panel.add(m);
        panel.add(n);
        panel.add(o);
        panel.add(p);
        panel.add(q);
        panel.add(r);
        panel.add(s);
        panel.add(t);
        panel.add(u);
        panel.add(v);
        panel.add(w);
        panel.add(x);
        panel.add(y);
        panel.add(z);
        panel.add(space);

        Handler handler = new Handler();
        a.addActionListener(handler);
        b.addActionListener(handler);
        c.addActionListener(handler);
        d.addActionListener(handler);
        e.addActionListener(handler);
        f.addActionListener(handler);
        g.addActionListener(handler);
        h.addActionListener(handler);
        i.addActionListener(handler);
        j.addActionListener(handler);
        k.addActionListener(handler);
        l.addActionListener(handler);
        m.addActionListener(handler);
        n.addActionListener(handler);
        o.addActionListener(handler);
        p.addActionListener(handler);
        q.addActionListener(handler);
        r.addActionListener(handler);
        s.addActionListener(handler);
        t.addActionListener(handler);
        u.addActionListener(handler);
        v.addActionListener(handler);
        w.addActionListener(handler);
        x.addActionListener(handler);
        y.addActionListener(handler);
        z.addActionListener(handler);

        space.addActionListener(handler);
    }

    class Handler implements ActionListener {
        public void actionPerformed(ActionEvent event) {
            if (event.getSource() == a) {
                JLabel text = new JLabel("A");
                text.setBounds(100, 250, 100, 100);
                text.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == b) {
                JLabel text2 = new JLabel("B");
                text2.setBounds(100, 250, 100, 100);
                text2.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text2);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == c) {
                JLabel text3 = new JLabel("C");
                text3.setBounds(100, 250, 100, 100);
                text3.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text3);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == d) {
                JLabel text4 = new JLabel("D");
                text4.setBounds(100, 250, 100, 100);
                text4.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text4);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == e) {
                JLabel text5 = new JLabel("E");
                text5.setBounds(100, 250, 100, 100);
                text5.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text5);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == f) {
                JLabel text6 = new JLabel("F");
                text6.setBounds(100, 250, 100, 100);
                text6.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text6);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == g) {
                JLabel text7 = new JLabel("G");
                text7.setBounds(100, 250, 100, 100);
                text7.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text7);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == h) {
                JLabel text8 = new JLabel("H");
                text8.setBounds(100, 250, 100, 100);
                text8.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text8);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == i) {
                JLabel text9 = new JLabel("I");
                text9.setBounds(100, 250, 100, 100);
                text9.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text9);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == j) {
                JLabel text10 = new JLabel("J");
                text10.setBounds(100, 250, 100, 100);
                text10.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text10);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == k) {
                JLabel text11 = new JLabel("K");
                text11.setBounds(100, 250, 100, 100);
                text11.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text11);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == l) {
                JLabel text12 = new JLabel("L");
                text12.setBounds(100, 250, 100, 100);
                text12.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text12);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == m) {
                JLabel text13 = new JLabel("M");
                text13.setBounds(100, 250, 100, 100);
                text13.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text13);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == n) {
                JLabel text14 = new JLabel("N");
                text14.setBounds(100, 250, 100, 100);
                text14.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text14);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == o) {
                JLabel text15 = new JLabel("O");
                text15.setBounds(100, 250, 100, 100);
                text15.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text15);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == p) {
                JLabel text16 = new JLabel("P");
                text16.setBounds(100, 250, 100, 100);
                text16.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text16);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == q) {
                JLabel text17 = new JLabel("Q");
                text17.setBounds(100, 250, 100, 100);
                text17.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text17);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == r) {
                JLabel text18 = new JLabel("R");
                text18.setBounds(100, 250, 100, 100);
                text18.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text18);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == s) {
                JLabel text19 = new JLabel("S");
                text19.setBounds(100, 250, 100, 100);
                text19.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text19);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == t) {
                JLabel text20 = new JLabel("T");
                text20.setBounds(100, 250, 100, 100);
                text20.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text20);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == u) {
                JLabel text21 = new JLabel("U");
                text21.setBounds(100, 250, 100, 100);
                text21.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text21);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == v) {
                JLabel text22 = new JLabel("V");
                text22.setBounds(100, 250, 100, 100);
                text22.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text22);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == w) {
                JLabel text23 = new JLabel("W");
                text23.setBounds(100, 250, 100, 100);
                text23.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text23);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == x) {
                JLabel text24 = new JLabel("X");
                text24.setBounds(100, 250, 100, 100);
                text24.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text24);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == y) {
                JLabel text25 = new JLabel("Y");
                text25.setBounds(100, 250, 100, 100);
                text25.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text25);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == z) {
                JLabel text26 = new JLabel("Z");
                text26.setBounds(100, 250, 100, 100);
                text26.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text26);
                panel.repaint();
                panel.revalidate();
            }
            if (event.getSource() == space) {
                JLabel text27 = new JLabel(" ");
                text27.setBounds(100, 250, 100, 100);
                text27.setFont(new Font("Serif", Font.BOLD, 50));
                panel.add(text27);
                panel.repaint();
                panel.revalidate();
            }
        }
    }
}

Answer 1

There are a couple of errors in your code:

1. You're calling Frame to your JFrame, this may be confusing due to the AWT Frame class.

2. You're extending JFrame, but you're not changing its behavior anywhere, so there's no need for it. Build your GUI based on JPanels not on JFrames. See: Extends JFrame vs. creating it inside the program for more information about this.

3. You're creating a new variable for each letter. You can change that to an array and use for loops and iterate over them, this way your code is easier to read, maintain and understand.

4. Maybe the most important and dangerous error in your code: You're usign null-layout and positioning every component manually which may lead you to strange outputs in different OS / PLAFs / screen sizes and resolutions!, See this example for an quick check of why it's discouraged to use null-layout to build your GUI. See Null layout is evil and Why is it frowned upon to use a null layout in Swing? for more information about this. To correct it make proper use of the various Layout managers and use them along with others and omit the calls to .setBounds(...).

5. Don't compare objects with ==: if (event.getSource() == a) { should be if (event.getSource().equals(a)) { instead or as shown in the code below ife.getActionCommand().equals("TextInsideYourJButton") { ... }

6. Last but not less important, use meaningful names for your variables: a if someone reads your code for the first time, it will be hard for him/her to determine that a is a JButton! Follow Java naming conventions.

Now, the code I made, was before you posting your image link, so the GUI may vary here:

import java.awt.Component;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.GridLayout;
import java.awt.Insets;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingConstants;
import javax.swing.SwingUtilities;

public class VirtualKeyBoard {
    private JFrame frame;
    private JPanel mainPane;
    private GridBagConstraints c;
    private JLabel label;

    private static final String[] NUMBERS = new String[] {"1", "2", "3", "4", "5", "6", "7", "8", "9", "0"};
    private static final String[] FIRST_ROW_LETTERS = new String[] {"Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"};
    private static final String[] SECOND_ROW_LETTERS = new String[] {"A", "S", "D", "F", "G", "H", "J", "K", "L"};
    private static final String[] THIRD_ROW_LETTERS = new String[] {"Z", "X", "C", "V", "B", "N", "M"};

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new VirtualKeyBoard()::createAndShowGui);
    }

    private void createAndShowGui() {
        frame = new JFrame();
        mainPane = new JPanel();
        mainPane.setLayout(new GridLayout(6, 1, 5, 5));

        label = new JLabel("");
        label.setHorizontalAlignment(SwingConstants.CENTER);

        c = new GridBagConstraints();
        c.insets = new Insets(5, 5, 5, 5);
        c.fill = GridBagConstraints.BOTH;

        mainPane.add(addRow(NUMBERS));
        mainPane.add(addRow(FIRST_ROW_LETTERS));
        mainPane.add(addRow(SECOND_ROW_LETTERS));
        mainPane.add(addRow(THIRD_ROW_LETTERS));

        JButton spaceButton = new JButton("SPACE");
        spaceButton.addActionListener(listener);

        mainPane.add(spaceButton);
        mainPane.add(label);

        frame.add(mainPane);
        frame.pack();
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

    private ActionListener listener = e -> {
        if (e.getActionCommand().equals("SPACE")) {
            label.setText("");
        } else {
            label.setText(e.getActionCommand());
        }
    };

    private JPanel addRow(String[] values) {
        JPanel pane = new JPanel();
        pane.setLayout(new GridBagLayout());

        for (String s : values) {
            c.gridx++;
            JButton button = new JButton(s);
            button.addActionListener(listener);
            pane.add(button, c);
        }

        return pane;
    }
}

The above code produces this output. As you can see I never used .setBounds(), but I combined 2 layout managers such as GridLayout and GridBagLayout and I made use of a single ActionListener for all of our JButtons which just set their ActionCommand value to the JLabel on click.

To produce a similar output as the one you posted in your image:

import java.awt.BorderLayout;
import java.awt.GridLayout;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingConstants;
import javax.swing.SwingUtilities;

public class SimpleVirtualKeyBoard {
    private JFrame frame;
    private JPanel pane;
    private JButton[] buttons;
    private JButton spaceButton;
    private JLabel label;

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new SimpleVirtualKeyBoard()::createAndShowGui);
    }

    private void createAndShowGui() {
        frame = new JFrame(getClass().getSimpleName());

        pane = new JPanel();
        pane.setLayout(new GridLayout(0, 6, 10, 10));

        String[] letters = new String[26];

        spaceButton = new JButton("SPACE");
        spaceButton.addActionListener(listener);

        label = new JLabel(" ");
        label.setHorizontalAlignment(SwingConstants.CENTER);

        for (char i = 'A'; i <= 'Z'; i++) {
            letters[i - 'A'] = String.valueOf(i); //We fill our alphabet array
            System.out.println(letters[i - 'A']);
        }

        buttons = new JButton[26];

        for (int i = 0; i < buttons.length; i++) {
            buttons[i] = new JButton(letters[i]);
            buttons[i].addActionListener(listener);

            pane.add(buttons[i]);
        }

        pane.add(spaceButton);

        frame.add(pane);
        frame.add(label, BorderLayout.SOUTH);

        frame.pack();
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

    private ActionListener listener = e -> {
        label.setText(e.getActionCommand());
    };
}

Which produces this output:

Where you can see in the code above that again I didn't use .setBounds() and in this case I made use of a single LayoutManger which was GridLayout