Develop Reference

Java Swing show icon button and JLabel [duplicate]

So, i created an object of class "CustomPanel" that creates a JPanel with a GridLayout and a label inside of it then I added it to my JFrame. It works fine showing the label "HELLO", but when I change the layout manager of the jpanel to (null) it doesn't show anything. I know, I know using null layout is a very bad practice but I just want to know why it isn't showing the components.
Main class:
import javax.swing.JFrame;
public class MainMenu extends javax.swing.JFrame{
private static void createAndShowGUI() {
//Create and set up the window.
JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//Size the window.
frame.setSize(500, 500);
CustomPanel panel = new CustomPanel();
frame.getContentPane().add(panel);
frame.setVisible(true);
}
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(new Runnable() {
public void run() {
createAndShowGUI();
}
});
}
}
CustomPanel class with GridLayout (This works fine):
import java.awt.GridLayout;
import javax.swing.JLabel;
import javax.swing.JPanel;
public class CustomPanel extends JPanel{
public CustomPanel() {
initUI();
}
public final void initUI() {
// create the panel and set the layout
JPanel main = new JPanel();
main.setLayout(new GridLayout());
// create the labels
JLabel myLabel = new JLabel("HELLO");
// add componets to panel
main.add(myLabel);
this.add(main);
}
}
CustomPanel class with Null layout (This doesn't work):
import javax.swing.JLabel;
import javax.swing.JPanel;
public class CustomPanel extends JPanel{
public CustomPanel() {
initUI();
}
public final void initUI() {
// create the panel and set the layout
JPanel main = new JPanel();
main.setLayout(null);
// create the labels
JLabel myLabel = new JLabel("HELLO");
myLabel.setBounds(10, 10, myLabel.getPreferredSize().width, myLabel.getPreferredSize().height);
// add componets to panel
main.add(myLabel);
this.add(main);
}
}
The jlabel is correctly set inside the jpanel so it should be showing in the upper-left side of the jframe, but it doesn't.
What is causing this? what am I missing?.

The problem is that when you don't use a proper layout manager the main JPanel has a preferred size of 0,0, and won't display within the container that it is placed within. The CustomPanel that holds the main JPanel uses FlowLayout and will use its contained component's preferred sizes to help size and position these components, but since main has no layout, adding the JLabel to main does not increase the preferred size as it should -- yet another reason to use layouts, and CustomPanel will display main as just a sizeless dot. You could of course get around this by giving main a preferred size via main.setPreferredSize(...), but then you'd be solving a kludge with a kludge -- not good. Another possible solution is to change CustomPanel's layout to something else that might expand the main JPanel that it holds, perhaps giving CustomPanel a BorderLayout. In this situation, adding main to CustomPanel in a default fashion will place the main JPanel into the BorderLayout.CENTER position, expanding it to fill CustomPanel, and the JLabel will likely be seen.
The proper solution, of course, is to avoid use of null layouts whenever possible.

Is there a way to put JPanel on a JPanel?

I'm trying to put a JPanel inside OR on a JPanel, whichever may be the case, ultimately I just want this to work like this
As you can see on the picture, the red line is a JFrame and it has 2 JPanels inside it, on the green JPanel there are some different JPanels.
I need help with the green JPanel and the little JPanels inside it. Is there any way to make it work like this?
Any help would be greatly appreciated!
==============EDIT 1==============
So here is some code, to show you what I've done so far with the help of #hfontanez.
import javax.swing.*;
import java.awt.*;
import java.io.IOException;
public class Main
{
public static void main(String[] args)
{
//JFrame
JFrame jframe = new JFrame();
jframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
jframe.setSize(1920, 1080);
jframe.setResizable(false);
jframe.setLocationRelativeTo(null);
jframe.setVisible(true);
//parentJpanel - This is the main panel
JPanel parentJpanel = new JPanel();
parentJpanel.setBackground(Color.YELLOW);
parentJpanel.setSize(1920, 1080);
parentJpanel.setLayout(new BorderLayout());
//smallPanel - This is the little panel on the bottom
JPanel smallPanel = new JPanel();
smallPanel.setBackground(Color.GREEN);
smallPanel.setSize(1920, 300);
smallPanel.setLocation(0, 780);
smallPanel.setLayout(new BoxLayout(smallPanel, BoxLayout.PAGE_AXIS));
parentJpanel.add(smallPanel);
jframe.add(parentJpanel);
}
}
I expected the top part to be yellow, and the small part on the bottom to be green, yet the whoel thing turned green. What did I do wrong?

The pictured GUI is created using three panels.
The YELLOW panel is the game play area. It has no layout, no components (which define their own preferred sizes) and is custom painted, so it defines a sensible preferred size to report to the layout manager.
The GREEN panel contains controls. It uses a FlowLayout.
The RED panel uses a BorderLayout, and puts the YELLOW panel in the CENTER and the GREEN panel in the PAGE_END.
Code
This is the code that made the screenshot seen above.
import javax.swing.*;
import javax.swing.border.EmptyBorder;
import java.awt.*;
public class GameLayout {
GameLayout() {
// The main GUI. Everything else is added to this panel
JPanel gui = new JPanel(new BorderLayout(5, 5));
gui.setBorder(new EmptyBorder(4, 4, 4, 4));
gui.setBackground(Color.RED);
// The custom painted area - it is a panel that defines its preferred size.
gui.add(new GamePanel());
JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.LEADING));
buttonPanel.setBackground(Color.GREEN);
for (int ii = 1; ii<5; ii++) {
buttonPanel.add(new JButton("B " + ii));
}
gui.add(buttonPanel,BorderLayout.PAGE_END);
JFrame f = new JFrame("Game Layout");
f.setContentPane(gui);
f.setLocationByPlatform(true);
f.pack();
f.setVisible(true);
}
public static void main(String[] args) {
Runnable r = () -> new GameLayout();
SwingUtilities.invokeLater(r);
}
}
class GamePanel extends JPanel {
GamePanel() {
setBackground(Color.YELLOW);
}
#Override
public Dimension getPreferredSize() {
return new Dimension(400, 100);
}
}

You need to use a LayoutManager so when you put the JPanel inside the other JPanel it will have the correct look. If you simply put panels inside the others, the parent JPanel will use its default layout manager, which is FlowLayout.
For the look of it, it seems you need to use Border Layout for the parent (yellow) panel. For the green, you have options, but I think your best bet is to use Box Layout with a PAGE_AXIS Component Orientation.
In general, you need to be familiarized with two things: 1) Layout Managers and how they behave, and 2) the default layout behavior of JComponents.

ImageIcon extends beyond window, resizing window expands all of components instead of showing more

private void setupGUI(){
// Setup Frame
f = new JFrame("Shape Image Generator");
f.setBounds(500, 150, 450, 350);
f.setLayout(new GridLayout(8,1));
f.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent windowEvent){
System.exit(0);
}
});
}
I create the frame above, then 8 panels. I create various components and add them to the panels and everything works fine. Until I created an ImageIcon and added it to a label and added that label to the 8th panel. The image used is 140x129 pixels. The problem is, only the top.... maybe 1/4 of the image is showing. If I change the frames dimensions in the code, more empty space is created between each panel, but only a slight bit more of the image is shown, so the image is still off of the screen. I'd say the window is easily adding 10 pixels of spacing for every 1 more pixel of the image it shows. If I drag the corners of the window to expand it, the same thing happens. If the window is maximized I still can only see a little over half of my now very stretched image.
Things I tried:
None of my components have preferred dimensions set, but I tried setting a preferred dimension for the label then panel that contains the ImageIcon and it only added the difference between the image and preferred size in gray space above the image, pushing it further offscreen. So, I undid that.
Adding the label containing the ImageIcon to a different panel which was not the 8th and last panel, in this case, the image is still cut off, but at the point that it gets cut off, the components on the panel underneath it appear (over top of the background coloring which cuts off the image).
Exhaustively Googling this situation with about 30 different ways of phrasing it and not finding a solution.
(row1 - row8 are JPanels, I didn't include the coding for them)
ImageIcon iconStart = createImageIcon("/images/ShapeClipart.png", "Shapes");
JLabel imgLabel = new JLabel();
row8.add(imgLabel);
// Add image to image label
imgLabel.setIcon(iconStart);
// Add panels to frame
f.add(row1);
f.add(row2);
f.add(row3);
f.add(row4);
f.add(row5);
f.add(row6);
f.add(row7);
f.add(row8);
f.setVisible(true);
Window at execution
Window when stretched
edit:
adding f.pack() makes a very tall skinny window (the windows height taller than my screen) but it still looks like when I manually expand the window (empty space between panels, image partially offscreen), even if I take out f.setBounds and only use f.setLocation.

You are using a GridLayout. This gives all of the enclosed panels the same amount of space. In this case it is a vertical grid.
You should probably use something a bit different. I might try a BorderLayout in the JFrame and put the a panel containing the top seven panels (in a GridLayout) into the CENTER, and then put the JLabel into the SOUTH portion of the JFrame.
There are other ways to lay it out, but this is the first I could think of.

GridLayout makes each cell in the grid the same size and the size of each cell is determined by the largest Component contained in the grid.
In your code, the icon is the largest component and you also have only one column in your grid so every row has the same height as your icon.
Since you also limit the size of your JFrame by calling method setBounds(), the Swing infrastructure cuts off the icon so that all the components fit into the bounds you specified.
One alternative, but not the only one, is to use BoxLayout since it uses the preferred size of each of its contained components.
Here is a sample GUI that matches the screen capture that you posted and uses BoxLayout.
import static javax.swing.WindowConstants.EXIT_ON_CLOSE;
import java.awt.BorderLayout;
import java.awt.EventQueue;
import java.net.URL;
import javax.swing.BoxLayout;
import javax.swing.Icon;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JRadioButton;
import javax.swing.JTextField;
public class Shapes23 implements Runnable {
private JFrame frame;
#Override // java.lang.Runnable
public void run() {
showGui();
}
private JPanel createEighthRow() {
JPanel eighthRow = new JPanel();
URL url = getClass().getResource("paint-bursht.jpg");
Icon ico = new ImageIcon(url);
JLabel label = new JLabel(ico);
eighthRow.add(label);
return eighthRow;
}
private JPanel createFifthRow() {
JPanel fifthRow = new JPanel();
JTextField textField = new JTextField(20);
fifthRow.add(textField);
return fifthRow;
}
private JPanel createFirstRow() {
JPanel firstRow = new JPanel();
JLabel label = new JLabel("2D Shapes");
firstRow.add(label);
return firstRow;
}
private JPanel createFourthRow() {
JPanel fourthRow = new JPanel();
fourthRow.add(createRadioButton("Sphere"));
fourthRow.add(createRadioButton("Cube"));
fourthRow.add(createRadioButton("Cone"));
fourthRow.add(createRadioButton("Cylinder"));
fourthRow.add(createRadioButton("Torus"));
return fourthRow;
}
private JPanel createMainPanel() {
JPanel mainPanel = new JPanel();
BoxLayout layout = new BoxLayout(mainPanel, BoxLayout.PAGE_AXIS);
mainPanel.setLayout(layout);
mainPanel.add(createFirstRow());
mainPanel.add(createSecondRow());
mainPanel.add(createThirdRow());
mainPanel.add(createFourthRow());
mainPanel.add(createFifthRow());
mainPanel.add(createSixthRow());
mainPanel.add(createSeventhRow());
mainPanel.add(createEighthRow());
return mainPanel;
}
private JRadioButton createRadioButton(String text) {
JRadioButton radioButton = new JRadioButton(text);
return radioButton;
}
private JPanel createSecondRow() {
JPanel secondRow = new JPanel();
secondRow.add(createRadioButton("Circle"));
secondRow.add(createRadioButton("Rectangle"));
secondRow.add(createRadioButton("Square"));
secondRow.add(createRadioButton("Triangle"));
return secondRow;
}
private JPanel createSeventhRow() {
JPanel seventhRow = new JPanel();
JButton button = new JButton("Enter");
seventhRow.add(button);
return seventhRow;
}
private JPanel createSixthRow() {
JPanel sixthRow = new JPanel();
JTextField textField = new JTextField(20);
sixthRow.add(textField);
return sixthRow;
}
private JPanel createThirdRow() {
JPanel thirdRow = new JPanel();
JLabel label = new JLabel("3D Shapes");
thirdRow.add(label);
return thirdRow;
}
private void showGui() {
frame = new JFrame("Shape Image Generator");
frame.setDefaultCloseOperation(EXIT_ON_CLOSE);
frame.add(createMainPanel(), BorderLayout.CENTER);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public static void main(String[] args) {
EventQueue.invokeLater(new Shapes23());
}
}
Here is a screen capture of how it looks. Note that I couldn't find the same icon as in your screen capture so I just used a different one.

How do I place JComponents on a Jframe background image?,

I'm new here
I need help in placing components on a background image in Jframe using BorderLayout.
I tried adding the components to the label then the label to the frame but it hasn't worked so far
Here's my code:
package com.hosp;
import javax.swing.*;
import java.awt.*;
public class BackgroundImage extends JFrame {
BackgroundImage() {
//get image from package
ImageIcon img=new ImageIcon(getClass().getResource("backgroundimage.jpg"));
//add image to Label
JLabel imageLabel =new JLabel(img,JLabel.CENTER);
//button on screen
JButton btn =new JButton("Save");
//
add(imageLabel);
imageLabel.add(btn,BorderLayout.SOUTH);
}
public static void main(String []args) {
BackgroundImage frame = new BackgroundImage ();
frame.setVisible(true);
frame.setSize(300,300);
frame.setResizable(false);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}

public class backgroundImage extends JFrame{
Class names should start with an upper case character
add(imageLabel);
imageLabel.add(btn,BorderLayout.SOUTH);
validate();
Unlike a JPanel, a JLabel isn't designed to be a "container" to hold other components so it doesn't have a default layout manager so you can't just add the component to it using a BorderLayout constraint.
There is not need for the validate() method. You would only use revalidate() and repaint() when you add a component to a panel AFTER the frame is visible.
So your code should look something like:
add(imageLabel);
imageLabel.setLayout( new BorderLayout() );
imageLabel.add(btn,BorderLayout.SOUTH);
//validate();
Note this will only work if the components you add to the label are smaller than the size of the image, otherwise the component will be truncated to fit in the area of the label.
Check out Background Panel for a more flexible solution.

How to remove the padding between in the JPanel still using a flow layout?

Here's the portion of my java application GUI that I have a question about.
What this GUI consists is a blue JPanel(container) with default FlowLayout as LayoutManager that contains a Box which contains two JPanels(to remove the horizontal spacing or i could have used setHgaps to zero for that matter instead of a Box) that each contains a JLabel.
Here's my code for creating that part of the GUI.
private void setupSouth() {
final JPanel southPanel = new JPanel();
southPanel.setBackground(Color.BLUE);
final JPanel innerPanel1 = new JPanel();
innerPanel1.setBackground(Color.ORANGE);
innerPanel1.setPreferredSize(new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT));
innerPanel1.add(new JLabel("Good"));
final JPanel innerPanel2 = new JPanel();
innerPanel2.setBackground(Color.RED);
innerPanel2.setPreferredSize(new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT));
innerPanel2.add(new JLabel("Luck!"));
final Box southBox = new Box(BoxLayout.LINE_AXIS);
southBox.add(innerPanel1);
southBox.add(innerPanel2);
myFrame.add(southPanel, BorderLayout.SOUTH);
}
My question is how would i get rid the vertical padding between the outer JPanel(the blue one) and the Box?
I know this is padding because i read on Difference between margin and padding? that "padding = space around (inside) the element from text to border."
This wouldn't work because this has to due with gaps(space) between components.- How to remove JPanel padding in MigLayout?
I tried this but it didn't work either. JPanel Padding in Java

You can just set the gaps in the FlowLayout, i.e.
FlowLayout layout = (FlowLayout)southPanel.getLayout();
layout.setVgap(0);
The default FlowLayout has a 5-unit horizontal and vertical gap. Horizontal doesn't matter in this case as the BorderLayout is stretching the panel horizontally.
Or simple initialize the panel with a new FlowLayout. It'll be the same result.
new JPanel(new FlowLayout(FlowLayout.CENTER, 0, 0));
Edit:
"I tried that, didn't work.."
Works for me...
Setting the gap ↑ Not setting the gap ↑
import java.awt.*;
import javax.swing.*;
public class Test {
public void init() {
final JPanel southPanel = new JPanel();
FlowLayout layout = (FlowLayout)southPanel.getLayout();
layout.setVgap(0);
southPanel.setBackground(Color.BLUE);
final JPanel innerPanel1 = new JPanel();
innerPanel1.setBackground(Color.ORANGE);
innerPanel1.add(new JLabel("Good"));
final JPanel innerPanel2 = new JPanel();
innerPanel2.setBackground(Color.RED);
innerPanel2.add(new JLabel("Luck!"));
final Box southBox = new Box(BoxLayout.LINE_AXIS);
southBox.add(innerPanel1);
southBox.add(innerPanel2);
southPanel.add(southBox); // <=== You're also missing this
JFrame myFrame = new JFrame();
JPanel center = new JPanel();
center.setBackground(Color.yellow);
myFrame.add(center);
myFrame.add(southPanel, BorderLayout.SOUTH);
myFrame.setSize(150, 100);
myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
myFrame.setLocationByPlatform(true);
myFrame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable(){
public void run() {
new Test().init();
}
});
}
}
Note: Always post a runnable example (as I have done) for better help. You say it doesn't work, but it always works for me, so how would we know what you're doing wrong without some code that will run and demonstrate the problem?