We Keep Coding

JPanel layout - adding text box and rearranging components

I am having some issues with my Swing GUI.
It currently looks like this:
But I would like to move a couple things around.
Firstly I want the buttons underneath the keyboard
I want to add a text field on top of the keyboard with the submit button on the right hand side.
How can I accomplish this? I've tried to create a GridLayout and slot things by row,column coordinate but it doesn't seem to work.
private class Display extends JPanel {
Display() {
setPreferredSize(new Dimension(620, 420));
setBackground(new Color(250, 230, 180));
setFont(new Font("Serif", Font.BOLD, 20));
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
((Graphics2D) g).setStroke(new BasicStroke(3));
if (message != null) {
g.setColor(Color.RED);
g.drawString(message, 30, 40);
g.drawString("00:00", 30, 410);
}
}
}
private void createWindow() {
setJMenuBar(menuBarCreator());
// The ActionListener that will respond to button clicks.
ButtonHandler buttonHandler = new ButtonHandler();
// Create the subpanels and add them to the main panel.
display = new Display();
setLayout(new BorderLayout(3, 3));
add(display, BorderLayout.CENTER);
JPanel bottom = new JPanel();
bottom.setLayout(new GridLayout(1,1));
add(bottom, BorderLayout.NORTH);
// Add keyboard
JPanel keyboard = new JPanel();
JPanel keyboardHolder = new JPanel();
keyboard.setLayout(new GridLayout(2, 13));
keyboardHolder.setLayout(new GridLayout(1, 2));
for (char alphabet = 'a'; alphabet <= 'z'; alphabet++) {
JButton button = new JButton(String.valueOf(alphabet));
button.addActionListener(buttonHandler);
keyboard.add(button);
alphabetButtons.add(button);
}
keyboardHolder.add(keyboard, 0,0);
add(keyboardHolder, BorderLayout.SOUTH);
// Create three buttons, register the ActionListener to respond to clicks on the
// buttons, and add them to the bottom panel.
JButton submitButton = new JButton("Submit");
submitButton.addActionListener(buttonHandler);
keyboard.add(submitButton);
JButton startButton = new JButton(GuiText.START.toString());
startButton.addActionListener(buttonHandler);
bottom.add(startButton);
JButton nextButton = new JButton(GuiText.NEXT.toString());
nextButton.addActionListener(buttonHandler);
bottom.add(nextButton);
JButton skipButton = new JButton(GuiText.SKIP.toString());
skipButton.addActionListener(buttonHandler);
bottom.add(skipButton);
JButton quit = new JButton(GuiText.QUIT.toString());
quit.addActionListener(buttonHandler);
bottom.add(quit);
setBackground(new Color(100, 0, 0));
nextButton.setEnabled(false);
skipButton.setEnabled(false);
}

Below is a concrete example of what camickr wrote in his comment to the original question. Note that this is not the only possibility. There are many layout managers. I recommend visiting Laying Out Components Within a Container
The purpose of the code is only to show you how to achieve your desired layout.
import java.awt.BasicStroke;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.WindowConstants;
public class GuesGame implements Runnable {
private JFrame frame;
public void run() {
showGui();
}
private JPanel createBottomPanel() {
JPanel bottomPanel = new JPanel(new GridLayout(3, 1));
bottomPanel.add(createSubmitPanel());
bottomPanel.add(createKeyboardPanel());
bottomPanel.add(createButtonsPanel());
return bottomPanel;
}
private JPanel createButtonsPanel() {
JPanel buttonsPanel = new JPanel();
JButton startButton = new JButton("Start");
buttonsPanel.add(startButton);
JButton nextButton = new JButton("Next");
buttonsPanel.add(nextButton);
JButton skipButton = new JButton("Skip");
buttonsPanel.add(skipButton);
JButton quitButton = new JButton("Quit");
buttonsPanel.add(quitButton);
return buttonsPanel;
}
private JPanel createKeyboardPanel() {
JPanel keyboardPanel = new JPanel(new GridLayout(2, 13));
for (char c = 'a'; c <= 'z'; c++) {
JButton button = new JButton(String.valueOf(c));
keyboardPanel.add(button);
}
return keyboardPanel;
}
private JPanel createSubmitPanel() {
JPanel submitPanel = new JPanel();
JTextField txtFld = new JTextField(20);
submitPanel.add(txtFld);
JButton submitButton = new JButton("Submit");
submitPanel.add(submitButton);
return submitPanel;
}
private void showGui() {
frame = new JFrame("Guess Game");
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
frame.add(new Display(), BorderLayout.CENTER);
frame.add(createBottomPanel(), BorderLayout.PAGE_END);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public static void main(String[] args) {
EventQueue.invokeLater(new GuesGame());
}
}
class Display extends JPanel {
private String message;
Display() {
message = "Starting game";
setPreferredSize(new Dimension(620, 420));
setBackground(new Color(250, 230, 180));
setFont(new Font("Serif", Font.BOLD, 20));
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
((Graphics2D) g).setStroke(new BasicStroke(3));
if (message != null) {
g.setColor(Color.RED);
g.drawString(message, 30, 40);
g.drawString("00:00", 30, 410);
}
}
}
You want three "rows" below the Display panel as follows
Text field and "submit" button.
Keyboard
Other buttons.
Hence the "bottom" panel contains three panels laid out one above the other.
The first panel is the text field and "submit" panel.
Underneath that is the "keyboard".
And underneath the keyboard are the other buttons.
Note that the default layout manager for JPanel is java.awt.FlowLayout and this layout manager is suitable for the panel containing the "submit" button and also suitable for the panel containing the other buttons.
Here is a screen capture of the running app.

How can I properly adjust the size and location of a button in JFrame?

I am attempting to make a PC Application using Java and JFrame. I'm trying to format 2 transparent buttons, each sized half of the full screen shown (vertically). The top half of the screen will hold to option to debate someone and the bottom half of the screen will hold the option to spectate a debate if clicked on. Here is what I have so far:
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
class BackgroundImageJFrame extends JFrame {
JButton b1;
JButton b2;
JPanel j1;
JPanel j2;
public BackgroundImageJFrame() {
setTitle("Background Color for JFrame");
setSize(340,563);
setLocationRelativeTo(null);
setDefaultCloseOperation(EXIT_ON_CLOSE);
setVisible(true);
setLayout(null);
/*
One way
-----------------
setLayout(new BorderLayout());
JLabel background=new JLabel(new ImageIcon("C:\\Users\\Computer\\Downloads\\colorful design.png"));
add(background);
background.setLayout(new FlowLayout());
l1=new JLabel("Here is a button");
b1=new JButton("I am a button");
background.add(l1);
background.add(b1);
*/
// Another way
setLayout(new BorderLayout());
setContentPane(new JLabel(new ImageIcon("C:\\Users\\MLH-User\\Downloads\\Front.jpg")));
setLayout(new FlowLayout());
j1 = new JPanel();
j1.setLayout(null);
b1 = new JButton("Spectate");
//b1.setBounds(0,0,50,50);
b1.setOpaque(false);
b1.setContentAreaFilled(false);
b1.setBorderPainted(false);
j1.add(b1);
b2 = new JButton("Debate");
b2.setLocation(0,0);
b2.setOpaque(false);
b2.setContentAreaFilled(false);
b2.setBorderPainted(false);
j1.add(b2);
add(j1);
// Just for refresh :) Not optional!
setSize(339,562);
setSize(340,563);
}
public static void main(String args[]) {
new BackgroundImageJFrame();
}
}
This is some stuff I experimented with so far, can anyone help me out about where I went wrong?

You should use a layout manager. Here is an example with GridLayout:
public class Example extends JFrame {
private static final int SIZE = 300;
public Example() {
setLayout(new GridLayout(2, 1, 0, 5));
getContentPane().setBackground(Color.WHITE);
JButton debate = new JButton("DEBATE") {
public Dimension getPreferredSize() {
return new Dimension(SIZE, SIZE);
}
};
Font font = debate.getFont().deriveFont(30f);
debate.setFont(font);
// debate.setBorderPainted(false);
debate.setBackground(Color.BLUE.brighter());
debate.setForeground(Color.WHITE);
JButton spectate = new JButton("SPECTATE") {
public Dimension getPreferredSize() {
return new Dimension(SIZE, SIZE);
}
};
spectate.setFont(font);
// spectate.setBorderPainted(false);
spectate.setBackground(Color.RED.brighter());
spectate.setForeground(Color.WHITE);
add(debate);
add(spectate);
setDefaultCloseOperation(EXIT_ON_CLOSE);
pack();
setVisible(true);
}
public static void main(final String[] args) {
SwingUtilities.invokeLater(() -> new Example());
}
}
Notes:
You have to realize that screen sizes vary. Setting SIZE to 300 was an arbitrary choice for presentation, screens might not have the required size. You can also set the insets or an empty border instead of specifying the size of the component directly.
You can consider creating a class for these buttons if you have more of them.

This is an example of setting the sizes. I don't know about the location part though.
JFrame frame = new JFrame("test");
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
JPanel panel = new JPanel(new GridLayout(4,4,4,4));
for(int i=0 ; i<16 ; i++){
JButton btn = new JButton(String.valueOf(i));
btn.setPreferredSize(new Dimension(40, 40));
panel.add(btn);
}
frame.setContentPane(panel);
frame.pack();
frame.setVisible(true);

How do I arrange JPanels from top to bottom?

I'm currently self-studying Java. I'm learning Graphical User Interface(GUI) programming.
I want JPanels to be arranged from top to bottom in a JFrame.First of all,I have a JLabel added to the first JPanel. The second JPanel has 5 JRadioButtions. The third JPanel has a JButton and a JLabel.
When the JButton is pressed,the JLabel in the 3rd JPanel shows some text.
I used BoxLayout(BoxLayout.X_AXIS) for all the JPanels and added all 3 of them into a JFrame which has FlowLayout(). Here is a small piece of code:
class GUI extends JFrame implements ActionListener {
JPanel pan1,pan2,pan3; //3 JPanels
JRadioButton rad1,rad2,rad3,rad4,rad5; //5 RadioButtons
JButton button; //A JButton
JLabel label; //A JLabel
public GUI(String header)
{
super(header);
setLayout(new FlowLayout()); //set FlowLayout to JFrame
setBounds(350,325,600,125);
setResizable(false);
creator();
adder();
commander();
add(pan1);
add(pan2);
add(pan3); //Add all 3 panels to JFrame
}
private void adder()
{
pan1.setLayout(new BoxLayout(pan1,BoxLayout.X_AXIS));
pan2.setLayout(new BoxLayout(pan2,BoxLayout.X_AXIS));
pan3.setLayout(new BoxLayout(pan3,BoxLayout.X_AXIS)); //Layout for all 3 JPanels
pan1.add(new JLabel("Choose a Security Level"));
ButtonGroup group=new ButtonGroup();
group.add(rad1);
group.add(rad2);
group.add(rad3);
group.add(rad4);
group.add(rad5);
pan2.add(rad1);
pan2.add(rad2);
pan2.add(rad3);
pan2.add(rad4);
pan2.add(rad5);
pan3.add(button);
pan3.add(label);
}
private void creator()
{
pan1=new JPanel();
pan2=new JPanel();
pan3=new JPanel();
rad1=new JRadioButton("Security Level 1");
rad2=new JRadioButton("Security Level 2");
rad3=new JRadioButton("Security Level 3");
rad4=new JRadioButton("Security Level 4");
rad5=new JRadioButton("Security Level 5");
button=new JButton("Move On");
label=new JLabel();
}
private void commander()
{
rad1.addActionListener(this);
rad2.addActionListener(this);
rad3.addActionListener(this);
rad4.addActionListener(this);
rad5.addActionListener(this);
rad1.setActionCommand("radio1");
rad2.setActionCommand("radio2");
rad3.setActionCommand("radio3");
rad4.setActionCommand("radio4");
rad5.setActionCommand("radio5");
button.addActionListener(this);
}
public void actionPerformed(ActionEvent evt)
{
//When button is pressed,the text in label changes
if(evt.getActionCommand().equals("radio1"))
label.setText("Very Easy to bypass");
else if(evt.getActionCommand().equals("radio2"))
label.setText("Easy to bypass");
else if(evt.getActionCommand().equals("radio3"))
label.setText("Can bypass Sometimes");
else if(evt.getActionCommand().equals("radio4"))
label.setText("Hard to bypass");
else if(evt.getActionCommand().equals("radio5"))
label.setText("Very Hard to bypass");
else
{ //Code here
}
repaint();
//More code here....
}
}
This is the output I'm getting when I select the first radiobutton(Forget the green colour):
I want the "Very easy to Bypass" text to be placed above the "Move on" button and below all the JRadioButtons. I can increase the size of the JFrame so that there will be enough space. My questions are:
Which Layout should I use to achieve this?
Should this layout be applied just for the JFrame or all 3 JPanels?

you must use GridLayout
Its very easy to use it, just add it like this. Take care of the import commands. :)
JFrame frame = new JFrame(new GridLayout(3,5));

Use GridLayout
GridLayout layout = new GridLayout(0, 1, 0, 5);
setLayout(layout);
What I would do to add 5 JPanels:
import java.awt.GridLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
public class PanelAdd extends JFrame {
JPanel [] panels ;
public PanelAdd() {
GridLayout layout = new GridLayout(0, 1, 0, 5);
setLayout(layout);
setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
setSize(400, 350);
}
public static void main(String [] args) {
PanelAdd add = new PanelAdd();
add.addPanels();
add.setVisible(true);
}
private void addPanels() {
panels = new JPanel[5];
for (int i = 0 ; i < panels.length ; i++) {
panels[i] = new JPanel();
panels[i].add(new JLabel("This Is Panel "+i));
add(panels[i]);
}
}
}
In this example, I made an array of 5 JPanels and add them through a loop.
I used GridLayout for the job.
This is just a hint for your answer

when you call add method from jframe,you can also give specified position to your panel in frame
like this:
JPanel pan1,pan2,pan3; //3 JPanels
JRadioButton rad1,rad2,rad3,rad4,rad5; //5 RadioButtons
JButton button; //A JButton
JLabel label; //A JLabel
public GUI(String header)
{
super(header);
setLayout(new FlowLayout()); //set FlowLayout to JFrame
setBounds(350,325,600,125);
setResizable(false);
creator();
adder();
commander();
add(pan1,BorderLayout.NORTH);
add(pan2,BorderLayout.CENTER);
add(pan3,,BorderLayout.SOUTH); //Add all panels to JFrame
}
good luck

Moving JButtons

What would be the best way for me to move the buttons so they are under each other instead of beside each other (see image below)?
The code for this class is as follows. The Main method is in a different class.
package guiplay;
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
public class MainGUI extends JFrame {
private JButton openReportSelection = new JButton("Open Report Viewer");
private JButton closeButton = new JButton("Close Program");
private JButton getCloseButton(){
return closeButton;
}
private JButton getOpenReportSelection(){
return openReportSelection;
}
public MainGUI(){
mainInterface();
}
private void mainInterface(){
setTitle("Program Information Application");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel centerPanel = new JPanel(new FlowLayout());
centerPanel.add(openReportSelection);
openReportSelection.addActionListener(new ActionListener(){
#Override
public void actionPerformed(ActionEvent e){
JFrame reports = new JFrame();
new ReportGUI();
}
});
centerPanel.add(closeButton);
getCloseButton().addActionListener(new Listener());
add(centerPanel, BorderLayout.CENTER);
setSize(700,200);
setVisible(true);
}
}

You can use a BoxLayout as it aligns all elements either horizontally or vertically. Simply set BoxLayout's axis to BoxLayout.Y_AXIS.
Example:
import java.awt.EventQueue;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.BoxLayout;
import javax.swing.JButton;
public class BoxLayoutExample extends JFrame {
private static final long serialVersionUID = 1L;
private JPanel contentPane;
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
BoxLayoutExample frame = new BoxLayoutExample();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
public BoxLayoutExample() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 180, 150);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(contentPane);
contentPane.setLayout(new BoxLayout(contentPane, BoxLayout.Y_AXIS));
JButton btnOpenReportViewer = new JButton("Open Report Viewer");
contentPane.add(btnOpenReportViewer);
JButton btnCloseProgram = new JButton("Close Program");
contentPane.add(btnCloseProgram);
}
}
If you want to control the size so that they are similar to each other, you can use a grid layout by setting the JFrame's content pane to a GridLayout:
contentPane.setLayout(new GridLayout(0, 1, 0, 0)); // the value of 1 here means 1 column

Don't put the JButtons in a container that uses FlowLayout but rather one that uses another layout that allows stacking of components. A GridLayout comes to mind if the buttons are to be the same size, or if they need to be different sizes, a BoxLayout.
Check out the Layout Manager Tutorial.

You could try using a BoxLayout instead of a FlowLayout. In that case, you could have:
JPanel centerPanel = new JPanel(new BoxLayout());
centerPanel.setLayout(new BoxLayout(centerPanel, BoxLayout.Y_AXIS)); // Y_AXIS will cause the components to be added vertically
centerPanel.add(openReportSelection);
centerPanel.add(closeButton);
centerPanel.setMaximumSize(new Dimension(100, 60)); // Set the maximum horizontal and vertical distances used, as BoxLayouts expand to fill the provided area
Or as Hovercraft said, you could use a GridLayout, in which case you would specify it as follows:
JPanel centerPanel = new JPanel(new GridLayout(1,0); // The "0" parameter specifies as many rows as needed, but only one column
centerPanel.add(openReportSelection);
centerPanel.add(closeButton);
centerPanel.setMaximumSize(new Dimension(100, 60)); // GridLayouts will also expand to fill the entire area, so you'll probably want some size parameters.
You could also see this link for more on BoxLayouts, or this link for more on GridLayouts.

Border Layout Spacing/Margins

for my beginner Java class we made an automated Tic-Tac-Toe game, and now we are creating a GUI to play it on. However, I'm having a lot of trouble getting the spacing/margins right. So far, I've just been trying to get the general framework for the GUI, and then I'm going to go back and actually implement the Tic-Tac-Toe game I have already made. So, far, I have this:
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.border.*;
public class ITTTGUI extends JFrame implements ActionListener{
//butimport javax.swing.border.*;tons
private JPanel sizePanel;
private JPanel buttonPanel;
private JPanel displayPanel;
private JPanel bottomPanel;
private JTextField size;
private JButton rebuildButton;
private JButton[] buttons;
private JLabel output;
//constructor
public NumberChooser(){
setTitle("BitchFace");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//content pane
Container cp = getContentPane();
//add a panel for the size
sizePanel = new JPanel();
sizePanel.setBorder(new EmptyBorder(5, 5, 5, 5) );//adds margin to panel
sizePanel.setLayout(new FlowLayout());
size = new JTextField("3",5);
sizePanel.add(new JLabel("N"));
sizePanel.add(size);
rebuildButton = new JButton("Rebuild");
rebuildButton.addActionListener(this);
sizePanel.add(rebuildButton);
//add bottom panel for output
sizePanel.add(new JButton("Player:"), BorderLayout.EAST);
sizePanel.add(new JButton("Move:"), BorderLayout.EAST);
sizePanel.add(new JButton("Winner:"), BorderLayout.EAST);
//add a panel for the numbers
buttonPanel = new JPanel();
buttonPanel.setBorder(new EmptyBorder(5, 5, 5, 5) );//adds margin to panel
buildButtonsPanel();
//add bottom panel for output
JPanel bottomPanel = new JPanel();
bottomPanel.setBorder(new EmptyBorder(5, 5, 5, 5) );//adds margin to panel
bottomPanel.add(new JButton("New Game"), BorderLayout.SOUTH);
bottomPanel.add(new JButton("Advise"), BorderLayout.SOUTH);
bottomPanel.add(new JButton("Quit"), BorderLayout.SOUTH);
//add panels to main pane
cp.setLayout(new BorderLayout());
cp.add(sizePanel, BorderLayout.EAST);
cp.add(buttonPanel, BorderLayout.CENTER);
cp.add(bottomPanel, BorderLayout.SOUTH);
pack();
}
//this is a helper method to rebuild the buttons panel
private void buildButtonsPanel(){
int n = 3;
try{
n = Integer.parseInt(size.getText());
}catch(Exception e){
e.printStackTrace();
}
buttonPanel.removeAll();
buttonPanel.setLayout(new GridLayout(n,n,4,4));
buttons = new JButton[n*n];
for(int i=0; i < buttons.length; i++){
buttons[i] = new JButton("*");
buttonPanel.add(buttons[i]);
buttons[i].addActionListener(this);
}
revalidate();
repaint();
pack();
}
public void actionPerformed(ActionEvent e){
Object s = e.getSource();
//check to see if the action came from the rebuild button
if(s == rebuildButton){
buildButtonsPanel();
}
//otherwise it came from the grid
}
//entry point
public static void main(String[] args){
//create the GUI
NumberChooser nc = new NumberChooser();
nc.setVisible(true);
}
}
It doesn't have to be exact, just generally the same.
And also there is no X or winner variable since I haven't implemented that. I also tried changing the margins from (5,5,5,5) to like (1,1,1,1), but that didn't change anything at all so that also confused me.
Any help with this, or how to generally go about this assignment would be appreciated.
(And it's not accepting my images. Sorry.)
Links are:
The problem is that is looks like this:
https://i1224.photobucket.com/albums/ee362/Devolutor/COPimage1_zps459f304b.png
And it is supposed to look like this:
http://i1224.photobucket.com/albums/ee362/Devolutor/COPimage2_zps8981c846.png

To have more space between the buttons, use a number of pixels beiiger than 4 for the grid layout:
buttonPanel.setLayout(new GridLayout(n,n,4,4));
To have a grid rather than a flow at the right side, use a GridLayout (just like you did for your buttons, but with 4 rows and 2 columns) rather than a FlowLayout.