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.

Having a nightmare making a JButton Visible

I'm having a problem were a can't make any of the created buttons visible in my frame.
I am trying to create a Frame with 2 layouts the top part is a blank layout and the bottom layout will have three buttons.
import java.awt.BorderLayout;
import java.awt.Color;
import javax.swing.*;
public class Game_Initiliasation extends JFrame {
int Time;
int Difficulty;
JPanel TopPanel;
JPanel BottomPanel;
Game_Initiliasation(){
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
this.setSize(300, 300);
this.setVisible(true);
TopPanel = new JPanel();
BottomPanel = new JPanel();
TopPanel.setLayout(new BorderLayout());
add(TopPanel, BorderLayout.CENTER);
add(BottomPanel, BorderLayout.SOUTH);
JButton Easy = new JButton("Easy");
JButton Medium = new JButton("Medium");
JButton Difficult = new JButton("Difficult");
/*Easy.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent evt) {
actionPerformed(evt);
}
});*/
Easy.setVisible(true);
BottomPanel.add(Easy);
BottomPanel.add(Medium);
BottomPanel.add(Difficult);
}
}

this.add(BottomPanel); // Add this line, you will be able to see the buttons
import java.awt.BorderLayout;
import java.awt.Color;
import javax.swing.*;
public class Game_Initiliasation extends JFrame {
int Time;
int Difficulty;
JPanel TopPanel;
JPanel BottomPanel;
Game_Initiliasation(){
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
this.setSize(300, 300);
this.setVisible(true);
TopPanel = new JPanel();
BottomPanel = new JPanel();
TopPanel.setLayout(new BorderLayout());
add(TopPanel, BorderLayout.CENTER);
add(BottomPanel, BorderLayout.SOUTH);
JButton Easy = new JButton("Easy");
JButton Medium = new JButton("Medium");
JButton Difficult = new JButton("Difficult");
/*Easy.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent evt) {
actionPerformed(evt);
}
});*/
Easy.setVisible(true);
BottomPanel.add(Easy);
BottomPanel.add(Medium);
BottomPanel.add(Difficult);
this.add(BottomPanel); // Add this line, you will be able to see the buttons
}
}

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);

PictureCount does not change

the code is used to create an application which shows picture and if your anwser is correct your supposed to see the next picture but the pictureCount does not go up. all of the variables ar declared after the main class and i created an Actionlistener to check if the awnser is correct.
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
public class Main {
public static void main(String[] args) {new Main().test();}
public int pictureCount = 1;
JFrame frame = new JFrame();
JButton button1 = new JButton("Submit");
JTextField text = new JTextField();
JPanel panel1 = new JPanel();
JPanel panel2 = new JPanel();
JPanel panel3 = new JPanel();
JLabel label = new JLabel(new ImageIcon("C:\\Users\\Admin\\Desktop\\practicum 3\\" + pictureCount + ".jpg"));
void test(){
button1.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e)
{
if(text.getText().equals("5")){
pictureCount++;
new Main().test();
}
}
});
panel1.add(button1);
panel2.add(text);
panel3.add(label);
text.setPreferredSize(new Dimension(100,50));
panel1.setPreferredSize(new Dimension(1000, 200));
panel2.setPreferredSize(new Dimension(1000, 100));
panel3.setPreferredSize(new Dimension(1000, 450));
frame.getContentPane().add(BorderLayout.SOUTH, panel1);
frame.getContentPane().add(BorderLayout.CENTER, panel2);
frame.getContentPane().add(BorderLayout.NORTH, panel3);
frame.setSize(1000,750);
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setTitle("Operation Screen");
frame.setLocationRelativeTo(null);
}
}

You need to read in all the pictures as ImageIcons into an array or ArrayList, say called imageIconArray and then display imageIconArray[0] in your JLabel when you start.
When the button is pressed, increment pictureCount, and then reset the JLabel's icon via its setIcon(...) method:
// in the ActionListener code:
pictureCount++;
label.setIcon(imageIconArray[pictureCount];
Whatever you do, don't create a new Main object, despite what others might say. Why create a new GUI when all you need to do is swap displayed images?

Java Swing Removing Jpanel while clicking on Jbutton which is present in that jpanel which I want to remove

I am creating a GUI using Netbeans and my question is "how to remove the jpanel"...the hierarchical order as it is present Jframe->Jscrollpane->Jpanel->Jbutton. By clicking on the Jbutton I want to remove all components of the jpanel including the Jbutton(on which I am clicking) and the panel itself. Please do help.Urgent.THanks in advance
-Sayantan
private void b4ActionPerformed(java.awt.event.ActionEvent evt) {
final JPanel jp;
JTextField tf,of1,of2,xf,yf;
int i=1;
int m=(int)sp3.getValue();
JButton jb;
jp=new JPanel();
//jp.setLayout(new GridBagLayout());
DesignGridLayout layout = new DesignGridLayout(jp);
jsp2.getViewport().add(jp);
while(i<=m){
tf=new JTextField(5);
of1=new JTextField(5);
of2=new JTextField(5);
layout.row().grid(new JLabel("Type:")).indent(9).add(tf).grid(new JLabel("Length:")).indent().add(of1).grid(new JLabel("Breadth:")).indent().add(of2).empty();
fields1.add(tf);
fields1.add(of1);
fields1.add(of2);
xf=new JTextField(5);
yf=new JTextField(5);
layout.row().grid(new JLabel("X-axis:")).indent(9).add(xf).grid(new JLabel("Y-axis:")).indent().add(yf).empty(2);
fields1.add(xf);
fields1.add(yf);
i++;
}
jb=new JButton("Submit");
jb.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e)
{
for(JTextField field: fields1){
String s=field.getText();
lbr.setText(lbr.getText()+s);
}
lb3.setVisible(false);
sp3.setVisible(false);
b4.setVisible(false);
//jp.setVisible(false);
//jp.removeAll();
// jp.revalidate();
//jp.repaint();
// jsp2.remove(jp);
//jsp2.revalidate();
//jsp2.repaint();
}
});
layout.emptyRow();
layout.row().right().add(jb);
jp.revalidate();
jp.repaint();
// jsp2.revalidate();
//jsp2.repaint();
}
Note: I am using DesignGridLayout package.

This works:
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
public class ScratchSpace {
public static void main(String[] args) {
final JPanel panel = new JPanel();
panel.setOpaque(true);
panel.setBackground(Color.YELLOW);
panel.add(new JButton(new AbstractAction("Kill me") {
#Override
public void actionPerformed(ActionEvent e) {
panel.removeAll();
panel.revalidate();
panel.repaint();
}
}));
final JFrame frame = new JFrame();
frame.setContentPane(panel);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
frame.setVisible(true);
}
}

I want to remove all components of the jpanel including the Jbutton(on which I am clicking) and the panel itself.
Then you need code something like:
JButton button = (JButtton)event.getSource();
JPanel grandparent = button.getParent().getParent();
grandparent.removeAll();
grandparent.revalidate();
grandparent.repaint();
Although I question any code where I see a removeAll(). You might look into using a Card Layout.