How can I center buttons and top center a title?

Question

I am trying to center these two Start and Back buttons, but anytime I try anything such as BoxLayout, .SetLocation, SwingConstant.CENTER, .setVerticalAlignment, .setHorizonatalAlignment that doesn't work. Can anyone help me with how to set the two buttons in the middle-center and the 'Snake' title at the top-center of the Frame? Thanks.

package snake;

public class Start {
    public static void main(String[] args) {
        startScreen startFrame = new startScreen();
    }
}

  class startScreen extends JFrame {
      // constructor
      public startScreen() {
          // fonts
          Font snakeTitleFont = new Font("Arial", Font.BOLD, 50);
          Font buttonFont = new Font("Arial", Font.CENTER_BASELINE, 20);

          // text
          JLabel snakeTitle = new JLabel("Snake", SwingConstants.CENTER);
          snakeTitle.setFont(snakeTitleFont);
          add(snakeTitle);

          // start button
          JButton startButton = new JButton("Start");
          startButton.setBackground(Color.MAGENTA);
          startButton.setOpaque(true);
          startButton.setBorderPainted(false);
          startButton.setFont(buttonFont);

          this.setLayout(new BoxLayout(this.getContentPane(), BoxLayout.LINE_AXIS));

          add(startButton);

          // action listener for start btn
          startButton.addActionListener(new ActionListener() {
              // once this is clicked on, it should call the GUI
              @Override
              public void actionPerformed(ActionEvent e) {
                  new Frame();
                  dispose(); // closes the old form after start is clicked
              }
          });

          // back button
          JButton backButton = new JButton("Back");
          backButton.setLayout(null);
          backButton.setBackground(Color.YELLOW);
          backButton.setOpaque(true);
          backButton.setBorderPainted(false);
          backButton.setFont(buttonFont);
          backButton.setBounds(getBounds());
          this.setLayout(new BoxLayout(this.getContentPane(), BoxLayout.LINE_AXIS));

          add(backButton);

          // action listener for start btn
          startButton.addActionListener(new ActionListener() {
              // once this is clicked on, it should call the GUI
              @Override
              public void actionPerformed(ActionEvent e) {
                  new Frame();
                  dispose(); // closes the old form after start is clicked
              }
          });

          this.setVisible(true);
          this.setSize(800, 500);
          this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          this.setResizable(false);
          this.setLocationRelativeTo(null);
      }
  }

Answer 1

You can use BorderLayout as follows:

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Font;
import java.awt.Frame;
import java.awt.event.ActionEvent;
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;

public class Start {
    public static void main(String[] args) {
        StartScreen startFrame = new StartScreen();
    }
}

class StartScreen extends JFrame {
    // Constructor
    public StartScreen() {
        // Fonts
        Font snakeTitleFont = new Font("Arial", Font.BOLD, 50);
        Font buttonFont = new Font("Arial", Font.CENTER_BASELINE, 20);

        // Text
        JLabel snakeTitle = new JLabel("Snake", SwingConstants.CENTER);
        snakeTitle.setFont(snakeTitleFont);
        add(snakeTitle, BorderLayout.NORTH);

        // Start button
        JButton startButton = new JButton("Start");
        startButton.setBackground(Color.MAGENTA);
        startButton.setOpaque(true);
        startButton.setBorderPainted(false);
        startButton.setFont(buttonFont);

        // ActionListener for Start button
        startButton.addActionListener(new ActionListener() {
            // once this is clicked on, it should call the GUI
            @Override
            public void actionPerformed(ActionEvent e) {
                new Frame();
                // closes the old form after start is clicked
                dispose();
            }
        });

        // Back button
        JButton backButton = new JButton("Back");
        backButton.setLayout(null);
        backButton.setBackground(Color.YELLOW);
        backButton.setOpaque(true);
        backButton.setBorderPainted(false);
        backButton.setFont(buttonFont);

        // Panel for Start and Back buttons
        JPanel panel = new JPanel();
        panel.add(startButton);
        panel.add(backButton);
        add(panel, BorderLayout.CENTER);

        this.setVisible(true);
        this.setSize(800, 500);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setResizable(false);
        this.setLocationRelativeTo(null);
    }
}

Answer 2

Remember, you're not stuck to a single layout. In fact, it would be very rare to find a (complex) layout solution which could be solved with a single layout.

Instead, make use of multiple/compound layouts, for example...

This just makes use of a BorderLayout to manage the title and buttons panel and a GridBagLayout to manage the buttons themselves (as, by default, it will centre the buttons vertically and horizontally)

import java.awt.BorderLayout;
import java.awt.EventQueue;
import java.awt.GridBagLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;

public class Test {

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

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                JFrame frame = new JFrame();
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        public TestPane() {
            setLayout(new BorderLayout());

            JLabel title = new JLabel("Snake");
            title.setHorizontalAlignment(JLabel.CENTER);
            add(title, BorderLayout.NORTH);

            JPanel buttonsPane = new JPanel(new GridBagLayout());
            buttonsPane.setBorder(new EmptyBorder(50, 50, 50, 50));

            buttonsPane.add(makeButton("Start"));
            buttonsPane.add(makeButton("Back"));

            add(buttonsPane);
        }

        protected JButton makeButton(String text) {
            JButton btn = new JButton(text);
            return btn;
        }


    }

}

Answer 3

Take a quick look here. Best fits for your application would be either the BoxLayout or the FlowLayout.

Both of them are very, very powerful tools for their respective field of use.

Besides this try to take a look at layouting tutorials for Java. You should always use the "getContentPane()" method on Frames and apply layouting and adding components to the "ContentPane"!