How to move button to exact location?

Question

I want the buttons and textfield to go in the spaces marked red in the same layout as they are in. look at the picture to understand what I mean.

update: the buttons are in the place now, but the image wont appear on the second panel

how can I move them to there? heres my code so far

package gasindicator;

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
import javax.swing.border.*;
import javax.swing.plaf.basic.*;
import java.io.*;
import javax.imageio.*;
import java.net.*;

public class GasIndicator extends JPanel
 {
private Image image;


GasIndicator()
{
    try
    {
        image = ImageIO.read(new URL("http://i68.tinypic.com/2ceja8i.png"));

    }
    catch (IOException ioe)
    {
        System.out.println("Unable to fetch image.");
        ioe.printStackTrace();
    }

    setLayout( new BorderLayout() );

    JLabel background = new JLabel( new ImageIcon(image) );
    background.setLayout( new FlowLayout(FlowLayout.LEFT) );
    add( background );

    JPanel buttonPanel = new JPanel( new GridLayout(0, 3, 6, 5) );
    buttonPanel.setBorder( new EmptyBorder(338, 233, 0, 0) );

    buttonPanel.setOpaque( false );


    //for (int i = 0; i < 7; i++)
    {
        JButton button = new JButton("Button");
        JButton button1 = new JButton("Button");
        JButton button2 = new JButton("Button");
        JButton button3 = new JButton("Button");
        JButton button4 = new JButton("Button");
        JButton button5 = new JButton("Button");

        button.setPreferredSize( new Dimension(160, 45) );
        buttonPanel.add(button);
        buttonPanel.add(button1);
        buttonPanel.add(button2);
        buttonPanel.add(button3);
        buttonPanel.add(button4);
        buttonPanel.add(button5);

         button.addActionListener(new Action());
    }

    background.add( buttonPanel );
}

static class Action implements ActionListener {

        public void actionPerformed(ActionEvent e) {
            JFrame frame2 = new JFrame("Museums in London");
            frame2.setVisible(true);
            frame2.setSize(550, 650);
            JPanel panel = new JPanel();
            frame2.add(panel);
            Custom contentPane;

            // JFrame frame = new JFrame("JTextField");
            contentPane = new Custom();
            frame2.setContentPane(contentPane);

        }
    }

private static void ShowGUI()
{
    JFrame frame = new JFrame("SSCCE");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.add(new GasIndicator());
    frame.pack();
    frame.setLocationByPlatform( true );
    frame.setVisible( true );
}

public static void main(String[] args)
{
    EventQueue.invokeLater( () -> ShowGUI() );
/*
    EventQueue.invokeLater(new Runnable()
    {
        public void run()
        {
            createAndShowGUI();
        }
    });
*/
}

class Custom extends JPanel {

public BufferedImage image;

public Custom() {
    try {

        image = ImageIO.read(new URL 
("http://www.destination360.com/europe/uk/images/s/museums.jpg"));
    } catch (IOException ioe) {
        System.out.println("Unable to fetch image.");
        ioe.printStackTrace();
    }
}

public Dimension getPreferredSize() {
    return (new Dimension(image.getWidth(), image.getHeight()));
}

public void paintComponent(Graphics x) {
    super.paintComponent(x);
    x.drawImage(image, 10, 10, this);
}
  }
}

Answer 1

Simple example to demonstrate the concept of using a layout manager with a Border. The size of the buttons has also been tweaked to the size of the buttons in the image:

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.border.*;
import javax.swing.plaf.basic.*;
import java.io.*;
import javax.imageio.*;
import java.net.*;

public class SSCCE extends JPanel
{
    private Image image;

    SSCCE()
    {
        try
        {
            image = ImageIO.read(new URL("http://i68.tinypic.com/2ceja8i.png"));

        }
        catch (IOException ioe)
        {
            System.out.println("Unable to fetch image.");
            ioe.printStackTrace();
        }

        setLayout( new BorderLayout() );

        JLabel background = new JLabel( new ImageIcon(image) );
        background.setLayout( new FlowLayout(FlowLayout.LEFT) );
        add( background );

        JPanel buttonPanel = new JPanel( new GridLayout(0, 3, 6, 5) );
        buttonPanel.setBorder( new EmptyBorder(338, 233, 0, 0) );

        buttonPanel.setOpaque( false );

        for (int i = 0; i < 6; i++)
        {
            JButton button = new JButton("Button " + i);
            button.setPreferredSize( new Dimension(160, 45) );
            buttonPanel.add(button);
        }

        background.add( buttonPanel );
    }

    private static void createAndShowGUI()
    {
        JFrame frame = new JFrame("SSCCE");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new SSCCE());
        frame.pack();
        frame.setLocationByPlatform( true );
        frame.setVisible( true );
    }

    public static void main(String[] args)
    {
        EventQueue.invokeLater( () -> createAndShowGUI() );
/*
        EventQueue.invokeLater(new Runnable()
        {
            public void run()
            {
                createAndShowGUI();
            }
        });
*/
    }
}

Yes, there is still some tweaking of the values. But it is easier to adjust the location of the entire panel with one EmptyBorder and all the buttons move at the same time than it is to adjust the location of each button individually.

Note: Don't use the JLabel to display the image as the components will shift if the frame is resized. Instead use your custom panel to paint the image.

Answer 2

The problem here is that your panel has the standart Layoutmanager set onto it. Try disable it with

contentPane.setLayout(null);

Then you can move the buttons around like you want with button.setBountds(x,y,w,h);

I always draw directly on the Frame, not using a custom panel like you do, but I see that there are use cases where this would be the better way.

If you write

new JFrame.getContentPane().setLayout(null);

your frame gets the default pane and still has it's layout set to null.

The difference is you can add directly to the frame instead of using a panel where you drop your stuff on.

frame.add(new Button().setBounds(x,y,w,h));

Try out this version of the code I tried to debugg:

Custom1 contentPane;


//at first create and set the frame
JFrame frame = new JFrame("Windowname goes here");
frame.setSize(1160, 700);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null);

//next add your custom panel
contentPane = new Custom1();
frame.setContentPane(contentPane);

//better add this to the panel instead of the frame
JTextField textfield = new JTextField(20);
frame.add(textfield);

textfield.setBackground(Color.black);
textfield.setForeground(Color.white);

//you are using 2 panels with null layout here
JPanel panel = new JPanel();
panel.setSize(frame.getHeight(),frame.getWidth());      //give the panel some bounds!
panel.setOpaque(false); //unnecesary
panel.setLayout(null);
panel.setBackground(Color.BLACK);
frame.add(panel);

JButton button = new JButton("London");
JButton button1 = new JButton("Oxford");
JButton button2 = new JButton("Cambridge");

//you seemed to not have added these before
JButton button4 = new JButton("Click");
JButton button5 = new JButton("Click");
JButton button6 = new JButton("Click");

button.setBounds(60, 400, 220, 30);
button.setBackground(Color.black);
button.setForeground(Color.WHITE);

button1.setBounds(x,y,w,h);                         // !!!! <------
button1.setBackground(Color.black);
button1.setForeground(Color.WHITE);

button2.setBounds(x,y,w,h);                         // !!!! <------
button2.setBackground(Color.black);
button2.setForeground(Color.WHITE);

button4.setBounds(80, 50, 100, 30);
button5.setBounds(x,y,w,h);                         // !!!! <------
button6.setBounds(x,y,w,h);                         // !!!! <------

panel.add(button);
panel.add(button1);
panel.add(button2);
panel.add(button3);
panel.add(button4);
panel.add(button5);
panel.add(button6);

//SETVISIBLE ALWAYS GOES LAST
frame.setVisible(true);

I patched your code and wrote some comments in it. I marked the spots where you need to set the bounds for the buttons with !!!!<----,
you seemed to have made this for button4 but not for the other ones. Also you should get a better structure in your code, I don't want to insult you but I would call this "spaghetti code". There are aswell some things that where a problem, for example you seemed to not have added the buttons at all but they where present in your picture...

Let me know if it would work or not after playing around with the bounds value and investigating for eventual mistakes in the code. Also if you sent me the whole project I could watch over it, but better try it yourself, it won't give you anything if someone else made your work.

Good luck and happy coding ( ͡° ͜ʖ ͡°)