Align textView and Image on same line JAVA [closed

Question

I created the Food tab using code below

JTabbedPane tabbedPane = new JTabbedPane(JTabbedPane.TOP);
addIt(tabbedPane, "Foods");
addIt1(tabbedPane, "Drinks");
addIt1(tabbedPane, "Desserts");
tabbedPane.setBounds(10, 11, 400, 450);
frame.getContentPane().add(tabbedPane);

Here the addIt methods

static void addIt(JTabbedPane tabbedPane, String text) throws IOException {
    JPanel panel = new JPanel(new FlowLayout(FlowLayout.LEFT));
    JTextField textField = new JTextField(2);

    BufferedImage myPicture = ImageIO.read(new File("C:\\Users\\tony\\Desktop\\MedSalad.png"));
    Image scaled = myPicture.getScaledInstance(80,95,Image.SCALE_SMOOTH);
    JLabel picLabel = new JLabel("Salad",new ImageIcon(scaled),JLabel.CENTER);
    picLabel.setHorizontalTextPosition(JLabel.CENTER);
    picLabel.setVerticalTextPosition(JLabel.BOTTOM);

    JTextField textField1 = new JTextField(2);
    BufferedImage myPicture1 = ImageIO.read(new File("C:\\Users\\tony\\Desktop\\JapanesePanNoodles.png"));
    Image scaled1 = myPicture1.getScaledInstance(80,95,Image.SCALE_SMOOTH);
    JLabel picLabel1 = new JLabel("Japanese Noodles",new ImageIcon(scaled1),JLabel.CENTER);
    picLabel1.setHorizontalTextPosition(JLabel.CENTER);
    picLabel1.setVerticalTextPosition(JLabel.BOTTOM);

    JTextField textField2 = new JTextField(2);
    BufferedImage myPicture2 = ImageIO.read(new File("C:\\Users\\tony\\Desktop\\Spaghetti.png"));
    Image scaled2 = myPicture2.getScaledInstance(80,95,Image.SCALE_SMOOTH);
    JLabel picLabel2 = new JLabel("Spaghetti",new ImageIcon(scaled2),JLabel.CENTER);
    picLabel2.setHorizontalTextPosition(JLabel.CENTER);
    picLabel2.setVerticalTextPosition(JLabel.BOTTOM);

    JTextField textField3 = new JTextField(2);
    BufferedImage myPicture3 = ImageIO.read(new File("C:\\Users\\tony\\Desktop\\PadThai.png"));
    Image scaled3 = myPicture3.getScaledInstance(80,95,Image.SCALE_SMOOTH);
    JLabel picLabel3 = new JLabel("Spaghetti Meat Balls",new ImageIcon(scaled3),JLabel.CENTER);
    picLabel3.setHorizontalTextPosition(JLabel.CENTER);
    picLabel3.setVerticalTextPosition(JLabel.BOTTOM);

    JTextField textField4 = new JTextField(2);
    BufferedImage myPicture4 = ImageIO.read(new File("C:\\Users\\tony\\Desktop\\RamenNoodles.png"));
    Image scaled4 = myPicture4.getScaledInstance(80,95,Image.SCALE_SMOOTH);
    JLabel picLabel4 = new JLabel("Noodles",new ImageIcon(scaled4),JLabel.CENTER);
    picLabel4.setHorizontalTextPosition(JLabel.CENTER);
    picLabel4.setVerticalTextPosition(JLabel.BOTTOM);

    JTextField textField5 = new JTextField(2);
    BufferedImage myPicture5 = ImageIO.read(new File("C:\\Users\\tony\\Desktop\\SpaghettiAndMeatBalls.png"));
    Image scaled5 = myPicture5.getScaledInstance(80,95,Image.SCALE_SMOOTH);
    JLabel picLabel5 = new JLabel("Kids Spaghetti",new ImageIcon(scaled5),JLabel.CENTER);
    picLabel5.setHorizontalTextPosition(JLabel.CENTER);
    picLabel5.setVerticalTextPosition(JLabel.BOTTOM);

    JTextField textField6 = new JTextField(2);
    BufferedImage myPicture6 = ImageIO.read(new File("C:\\Users\\tony\\Desktop\\chickenRice.jpg"));
    Image scaled6 = myPicture6.getScaledInstance(80,95,Image.SCALE_SMOOTH);
    JLabel picLabel6 = new JLabel("Chicken Rice",new ImageIcon(scaled6),JLabel.CENTER);
    picLabel6.setHorizontalTextPosition(JLabel.CENTER);
    picLabel6.setVerticalTextPosition(JLabel.BOTTOM);

    JTextField textField7 = new JTextField(2);
    BufferedImage myPicture7 = ImageIO.read(new File("C:\\Users\\tony\\Desktop\\thaiFood.jpeg"));
    Image scaled7 = myPicture7.getScaledInstance(80,95,Image.SCALE_SMOOTH);
    JLabel picLabel7 = new JLabel("Thai Food",new ImageIcon(scaled7),JLabel.CENTER);
    picLabel7.setHorizontalTextPosition(JLabel.CENTER);
    picLabel7.setVerticalTextPosition(JLabel.BOTTOM);

    JTextField textField8 = new JTextField(2);
    BufferedImage myPicture8 = ImageIO.read(new File("C:\\Users\\tony\\Desktop\\vietnamFood.jpg"));
    Image scaled8 = myPicture8.getScaledInstance(80,95,Image.SCALE_SMOOTH);
    JLabel picLabel8 = new JLabel("Vietnam Food",new ImageIcon(scaled8),JLabel.CENTER);
    picLabel8.setHorizontalTextPosition(JLabel.CENTER);
    picLabel8.setVerticalTextPosition(JLabel.BOTTOM);   
    panel.add(picLabel);
    panel.add(textField);   
    panel.add(picLabel1);
    panel.add(textField1);
    panel.add(picLabel2);
    panel.add(textField2);
    panel.add(picLabel3);
    panel.add(textField3);
    panel.add(picLabel4);
    panel.add(textField4);
    panel.add(picLabel5);
    panel.add(textField5);
    panel.add(picLabel6);
    panel.add(textField6);
    panel.add(picLabel7);
    panel.add(textField7);
    panel.add(picLabel8);
    panel.add(textField8);
    tabbedPane.addTab(text, panel);
}

And here the screen shot of Food Tab

MainClass

public class FoodOrdering {

    private JFrame frame;
    private JTextField textField;

    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            public void run() {
                try {
                    FoodOrdering window = new FoodOrdering();
                    window.frame.setVisible(true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }

    public FoodOrdering() throws IOException {
        initialize();
    }

    private void initialize() throws IOException {
        frame = new JFrame();
        frame.setBounds(100, 100, 700, 550);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().setLayout(null);
        frame.setLocationRelativeTo(null);

        JLabel lblFoodOrdered = new JLabel("Food Ordered");
        lblFoodOrdered.setBounds(529, 11, 81, 14);
        frame.getContentPane().add(lblFoodOrdered);

        TextArea textArea = new TextArea();
        textArea.setBounds(462, 31, 199, 275);
        frame.getContentPane().add(textArea);

        JLabel lblTotal = new JLabel("Total  : ");
        lblTotal.setBounds(519, 315, 46, 14);
        frame.getContentPane().add(lblTotal);

        textField = new JTextField();
        textField.setBounds(575, 312, 86, 20);
        frame.getContentPane().add(textField);
        textField.setColumns(10);

        JButton btnOrder = new JButton("Order");
        btnOrder.setBounds(521, 352, 89, 23);
        frame.getContentPane().add(btnOrder);

        JTabbedPane tabbedPane = new JTabbedPane(JTabbedPane.TOP);
        addIt(tabbedPane, "Foods");
        addIt1(tabbedPane, "Drinks");
        addIt1(tabbedPane, "Desserts");
        tabbedPane.setBounds(23, 11, 400, 450);
        frame.getContentPane().add(tabbedPane);
    }

How can I align the picture, JTextField in the same line ?

Answer 1

I don't have images to test, there's no valid MCVE in the question, however from what I see in it you could try (in order of preference)

• Using GridBagLayout instead of FlowLayout that you're currently using, this will help placing your images in a grid and align them in it.

• Using GridLayout which will make your images and JTextFields the same size and placing them in a grid of the same size, each component.

• Resizing your images to be all the same size, before getting their getScaledInstance(...)

BTW, this tabbedPane.setBounds(10, 11, 400, 450); suggests that in some point of your code, you're using null layout, you should know that null layout is evil and thus it's use is frowned upon. If you're not using null layout anywhere (we can't know because we don't have that code in the question), then, that line is needed.

Also, you could improve your code by wrapping all the same functionality like this:

JTextField textField1 = new JTextField(2);
BufferedImage myPicture1 = ImageIO.read(new File("C:\\Users\\tony\\Desktop\\JapanesePanNoodles.png"));
Image scaled1 = myPicture1.getScaledInstance(80,95,Image.SCALE_SMOOTH);
JLabel picLabel1 = new JLabel("Japanese Noodles",new ImageIcon(scaled1),JLabel.CENTER);
picLabel1.setHorizontalTextPosition(JLabel.CENTER);
picLabel1.setVerticalTextPosition(JLabel.BOTTOM);

inside a method where it receives the image name and label text, as the rest of the code is identical to the other ones, and then you could call that method inside a loop, that could really improve the code written by you, legibility and simplicity.

---

From my above recommendations, you can use GridBagLayout using the GridBagConstraints to place your elements where you want, avoiding the use of null layout:

frame.getContentPane().setLayout(null); //COMPLETELY WRONG!!!!!!

In this example, I used two images of different sizes, so, you can see, that even like that, your fields will stay the same size.

The following code is a MCVE, the one you posted isn't (and I'm surprised of you having almost 3K rep not knowing how to make a proper MCVE)

import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;

import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;

public class FoodMenu {
    private JFrame frame;
    private JPanel pane;
    private GridBagConstraints gbc;
    private JLabel[] foodLabel;
    private JTextField[] qtyField;

    private static final int ELEMENTS = 9;

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> new FoodMenu().createAndShowGui());
    }

    private void createAndShowGui() {
        frame = new JFrame(getClass().getSimpleName());

        pane = new JPanel();
        pane.setLayout(new GridBagLayout());

        gbc = new GridBagConstraints();

        foodLabel = new JLabel[ELEMENTS];
        qtyField = new JTextField[ELEMENTS];

        ImageIcon icon = null, icon2 = null;
        try {
            URL url = new URL("https://image.flaticon.com/icons/png/128/148/148836.png");
            URL url2 = new URL("https://i.stack.imgur.com/IucNt.png");
            BufferedImage img = ImageIO.read(url);
            icon = new ImageIcon(img);
            BufferedImage img2 = ImageIO.read(url2);
            icon2 = new ImageIcon(img2);
        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        for (int i = 0; i < ELEMENTS; i++) {
            foodLabel[i] = new JLabel(i % 2 == 0 ? icon : icon2);
            qtyField[i] = new JTextField(3);
        }

        gbc.gridx = 0;
        for (int i = 0; i < ELEMENTS; i++) {
            if (i % 3 == 0) {
                gbc.gridy++;
                gbc.gridx = 0;
            }
            pane.add(foodLabel[i], gbc);

            gbc.gridx++;
            pane.add(qtyField[i], gbc);
            gbc.gridx++;
        }

        frame.add(pane);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.pack();
        frame.setVisible(true);
    }
}

But how can I display the food label below the food image ?

Change the for loop as below

gbc.gridx = 0;
for (int i = 0; i < ELEMENTS; i++) {
    if (i % 3 == 0) {
        gbc.gridy += 2;
        gbc.gridx = 0;
    }
    pane.add(foodLabel[i], gbc);
    gbc.gridy++;
    pane.add(qtyField[i], gbc);
    gbc.gridx++;
    gbc.gridy--;
}