Swing - Trouble with layout managers

Question

I'm trying to make a chat application using Java Swing and I'm having trouble with the chat bubbles. I managed to do the bubbly part but I can't seem to place them right. Here is my code

            package messagebubble;

import java.awt.BorderLayout;

import javax.swing.BoxLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextArea;

import messagebubble.RoundedBorder;

public class Main {

public static void main(String[] args) {

    JFrame window = new JFrame();

    JPanel chat = new JPanel();
    chat.setLayout(new BoxLayout(chat, BoxLayout.PAGE_AXIS));

    JPanel painel = new JPanel(new BorderLayout());
    JPanel painel2 = new JPanel(new BorderLayout());

    JTextArea msg = new JTextArea();
    msg.setLineWrap(true);
    msg.setWrapStyleWord(true);

    msg.setText("ola tudo bem meus caros amigos, como estão? há muito que não vos via por estas bandas haha lol");
    msg.setBorder(new RoundedBorder());
    msg.setColumns(msg.getLineCount());

    JTextArea msg2 = new JTextArea();
    msg2.setLineWrap(true);
    msg2.setWrapStyleWord(true);

    msg2.setText("ola tudo bem");
    msg2.setBorder(new RoundedBorder());

    painel.add(msg,BorderLayout.NORTH);

    chat.add(painel);
    painel2.add(msg2,BorderLayout.NORTH);

    chat.add(painel2);

    window.add(chat);

    window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    window.setSize(400, 500);
    window.setVisible(true);



    }

}

Here is the Rounded Border

package GUI;

import java.awt.Color;
import java.awt.Component;
import java.awt.Container;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Insets;
import java.awt.geom.Area;
import java.awt.geom.Rectangle2D;
import java.awt.geom.RoundRectangle2D;

import javax.swing.border.AbstractBorder;

public class RoundedBorder extends AbstractBorder {



@Override
public void paintBorder(Component c, Graphics g, int x, int y, int width,
        int height) {

    Graphics2D graph = (Graphics2D) g.create();
    RoundRectangle2D round = new RoundRectangle2D.Float(x, y, width - 1,
            height - 1, 30, 30);
    Container parent = c.getParent();

    if (parent != null) {
        graph.setColor(parent.getBackground());
        Area canto = new Area(new Rectangle2D.Float(x,y,width,height));
        canto.subtract(new Area(round));
        graph.fill(canto);
    }

    graph.setColor(Color.GRAY);
    graph.draw(round);
    graph.dispose();

}

@Override
public Insets getBorderInsets(Component c) {
    return new Insets(5, 10, 5, 10);
}

@Override
public Insets getBorderInsets(Component c, Insets insets) {
    insets.left = 10;
    insets.right = insets.left;
    insets.top = 5;
    insets.bottom = insets.top;
    return insets;
}

}

The output looks like this Output. I can't get rid of the empty space between the messages or the empty whitespace in the bottom JTextArea.

I also tried setting the panels' maximum size to their prefered size and it looks like this Output2 which is too narrow.

Any idea how I can fix this? What I'm trying to achieve is something like this ideal

Answer 1

import java.awt.Component;
import java.awt.Dimension;
import java.awt.Graphics;

import javax.swing.BoxLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextArea;
import javax.swing.border.Border;
import javax.swing.border.CompoundBorder;
import javax.swing.border.EmptyBorder;

public class Main {

    public static void main(String[] args) {

    Border left = new CompoundBorder(new EBorder(0, 0, 0, 100), new RoundedBorder());
    Border right = new CompoundBorder(new EBorder(0, 100, 0, 0), new RoundedBorder());

    JFrame window = new JFrame();

    JPanel chat = new JPanel();
    chat.setLayout(new BoxLayout(chat, BoxLayout.Y_AXIS));

    JTextArea msg = new Message();
    msg.setLineWrap(true);
    msg.setWrapStyleWord(true);

    msg.setText("ola tudo bem meus caros amigos, como estão? há muito que não vos via por estas bandas haha lol");
    msg.setBorder(left);

    JTextArea msg2 = new Message();
    msg2.setLineWrap(true);
    msg2.setWrapStyleWord(true);

    msg2.setText("ola tudo bem");
    msg2.setBorder(right);

    chat.add(msg);
    chat.add(msg2);

    window.add(chat);

    window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    window.setSize(400, 500);
    window.setVisible(true);

    }

    static class Message extends JTextArea {
    private static final long serialVersionUID = -2226104809841941057L;

    @Override
    public Dimension getMaximumSize() {
        return new Dimension(super.getMaximumSize().width, getPreferredSize().height);
    }
    }

    static class EBorder extends EmptyBorder {

    private static final long serialVersionUID = 1265703863790826185L;

    public EBorder(int top, int left, int bottom, int right) {
        super(top, left, bottom, right);
    }

    @Override
    public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
        g.setColor(c.getParent().getBackground());
        g.fillRect(x, y, left, height);
        g.fillRect(x + width - right, y, right, height);
    }
    }
}

Answer 2

I would recommend

• using a single BorderLayout to hold all components
• Have it hold another JPanel that uses BoxLayout PAGE_AXIS in the BorderLayout.PAGE_START position.
• Add your chats to the BoxLayout JPanel.
• Note that most of us don't have your round rectangle border utility and so cannot test this.

For example:

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import javax.swing.*;


public class MainPanel extends JPanel {

    private static final int PREF_W = 400;
    private static final int PREF_H = 500;
    private JPanel msgHoldingPanel = new JPanel();


    public MainPanel() {
        JTextArea msg = new JTextArea();
        msg.setLineWrap(true);
        msg.setWrapStyleWord(true);

        msg.setText("ola tudo bem meus caros amigos, como estão? há muito que não vos via por estas bandas haha lol");

        // !! msg.setBorder(new RoundedBorder());
        msg.setBorder(BorderFactory.createLineBorder(Color.blue));

        msg.setColumns(msg.getLineCount());

        JTextArea msg2 = new JTextArea();
        msg2.setLineWrap(true);
        msg2.setWrapStyleWord(true);

        msg2.setText("ola tudo bem");
        msg2.setBorder(BorderFactory.createLineBorder(Color.blue));

        msgHoldingPanel.setLayout(new BoxLayout(msgHoldingPanel, BoxLayout.PAGE_AXIS));
        msgHoldingPanel.add(msg);
        msgHoldingPanel.add(Box.createVerticalStrut(3));
        msgHoldingPanel.add(msg2);

        setLayout(new BorderLayout());
        add(msgHoldingPanel, BorderLayout.PAGE_START);
    }


    @Override
    public Dimension getPreferredSize() {
        if (isPreferredSizeSet()) {
            return super.getPreferredSize();
        }
        return new Dimension(PREF_W, PREF_H);
    }

    private static void createAndShowGui() {
        JFrame frame = new JFrame("MainPanel");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(new MainPanel());
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGui();
            }
        });
    }
}

Answer 3

You will probably be better of using GridBagLayout on the Chat JPanel, and lose the 2 other JPanels they are not needed.

Something like this

JPanel pane = new JPanel(new GridBagLayout());
GridBagConstraints c = new GridBagConstraints();
c.anchor = GridBagConstraints.LINE_START;
JTextArea msg = new JTextArea();
msg.setText("ola tudo bem meus caros amigos, como estão? há muito que não vos via por estas bandas haha lol");
pane.add(msg , c);

// Now change the side of the placement on the layout manager
c.anchor = GridBagConstraints.LINE_END;
JTextArea msg2 = new JTextArea();
msg.setText("AGORA VAI RAPÁ!");
pane.add(msg , c);