Different chat text background color for sender and receiver in java

Question

I am making a chat messenger in Java NetBeans.
It works successfully but now, I want to differentiate text background color of sender and receiver so the user can easily understand the chat conversation.
I am using JTextArea to show the chat conversation.
Tell me what technique I use there.

here I get some example from searching on google but don't know how to use this.

Following class is used to draw first chat bubble: (Arrow at the left side of bubble)

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Polygon;
import java.awt.RenderingHints;
import java.awt.geom.Area;
import java.awt.geom.RoundRectangle2D;
import javax.swing.JPanel;
/**
* @
*/
public class LeftArrowBubble extends JPanel {
   private static final long serialVersionUID = -5389178141802153305L;
   private int radius = 10;
   private int arrowSize = 12;
   private int strokeThickness = 3;
   private int padding = strokeThickness / 2;
   @Override
protected void paintComponent(final Graphics g) {
  final Graphics2D g2d = (Graphics2D) g;
  g2d.setColor(new Color(0.5f, 0.8f, 1f));
  int x = padding + strokeThickness + arrowSize;
  int width = getWidth() - arrowSize - (strokeThickness * 2);
  int bottomLineY = getHeight() - strokeThickness;
  g2d.fillRect(x, padding, width, bottomLineY);
  g2d.setRenderingHints(new RenderingHints(RenderingHints.KEY_ANTIALIASING,   RenderingHints.VALUE_ANTIALIAS_ON));
  g2d.setStroke(new BasicStroke(strokeThickness));
  RoundRectangle2D.Double rect = new RoundRectangle2D.Double(x, padding, width, bottomLineY, radius, radius);
  Polygon arrow = new Polygon();
  arrow.addPoint(20, 8);
  arrow.addPoint(0, 10);
  arrow.addPoint(20, 12);
  Area area = new Area(rect);
  area.add(new Area(arrow));
  g2d.draw(area);
    }
}

Following code is to draw second chat bubble. (Arrow at the right side of bubble):

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Polygon;
import java.awt.RenderingHints;
import java.awt.geom.Area;
import java.awt.geom.RoundRectangle2D;
import javax.swing.JPanel;
/**
* @author
*/
  public class RightArrowBubble extends JPanel {
   private static final long serialVersionUID = -5389178141802153305L;
   private int strokeThickness = 3;
   private int radius = 10;
   private int arrowSize = 12;
   private int padding = strokeThickness / 2;
  @Override
  protected void paintComponent(final Graphics g) {
  final Graphics2D g2d = (Graphics2D) g;
  g2d.setColor(new Color(0.5f, 0.5f, 1f));
  int bottomLineY = getHeight() - strokeThickness;
  int width = getWidth() - arrowSize - (strokeThickness * 2);
  g2d.fillRect(padding, padding, width, bottomLineY);
  RoundRectangle2D.Double rect = new RoundRectangle2D.Double(padding, padding, width, bottomLineY,  radius, radius);
  Polygon arrow = new Polygon();
  arrow.addPoint(width, 8);
  arrow.addPoint(width + arrowSize, 10);
  arrow.addPoint(width, 12);
  Area area = new Area(rect);
  area.add(new Area(arrow));
  g2d.setRenderingHints(new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON));
  g2d.setStroke(new BasicStroke(strokeThickness));
  g2d.draw(area);
   }
 }

And here is the code for using above 2 classes:

import java.awt.HeadlessException;
import java.net.MalformedURLException;
import java.net.URL;
import javax.swing.GroupLayout;
import javax.swing.ImageIcon;
import javax.swing.JLabel;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
/**
 * @author harsh
 */
public class TestPanel extends JPanel {
private static final long serialVersionUID = 9029457020704524363L;
private JLabel messageLbl1, userImageLbl1, messageLbl, userImageLbl;
private JPanel msgPanel1, msgPanel;
String userImageUrl = "http://cdn1.iconfinder.com/data/icons/nuvola2/22x22/apps/personal.png";
public TestPanel() throws MalformedURLException {
    userImageLbl = new JLabel();
    msgPanel = new LeftArrowBubble();
    messageLbl = new JLabel();
    messageLbl1 = new JLabel();
    msgPanel1 = new RightArrowBubble();
    userImageLbl1 = new JLabel();

    userImageLbl.setIcon(new ImageIcon(new URL(userImageUrl)));
    messageLbl.setText("Hi, How are you?");

    GroupLayout msgPanelLayout = new GroupLayout(msgPanel);
    msgPanel.setLayout(msgPanelLayout);
    msgPanelLayout.setHorizontalGroup(
        msgPanelLayout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addGroup(msgPanelLayout.createSequentialGroup()
            .addGap(21, 21, 21)
            .addComponent(messageLbl)
            .addContainerGap(162, Short.MAX_VALUE))
    );
    msgPanelLayout.setVerticalGroup(
        msgPanelLayout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addGroup(msgPanelLayout.createSequentialGroup()
            .addComponent(messageLbl)
            .addContainerGap(GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE))
    );

    messageLbl1.setIcon(new ImageIcon(new URL(userImageUrl)));
    userImageLbl1.setText("I'm Good.");

    GroupLayout jPanel1Layout = new GroupLayout(msgPanel1);
    msgPanel1.setLayout(jPanel1Layout);
    jPanel1Layout.setHorizontalGroup(
        jPanel1Layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addGroup(GroupLayout.Alignment.TRAILING, jPanel1Layout.createSequentialGroup()
            .addContainerGap(171, Short.MAX_VALUE)
            .addComponent(userImageLbl1)
            .addGap(22, 22, 22))
    );
    jPanel1Layout.setVerticalGroup(
        jPanel1Layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addGroup(jPanel1Layout.createSequentialGroup()
            .addComponent(userImageLbl1)
            .addContainerGap(GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE))
    );

    GroupLayout layout = new GroupLayout(this);
    this.setLayout(layout);
    layout.setHorizontalGroup(
        layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addGroup(layout.createSequentialGroup()
            .addContainerGap()
            .addComponent(userImageLbl)
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.TRAILING)
                .addComponent(msgPanel1, GroupLayout.DEFAULT_SIZE, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
                .addComponent(msgPanel, GroupLayout.DEFAULT_SIZE, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE))
            .addComponent(messageLbl1)
            .addContainerGap())
    );
    layout.setVerticalGroup(
        layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addGroup(layout.createSequentialGroup()
            .addContainerGap()
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
                .addComponent(userImageLbl)
                .addComponent(msgPanel, GroupLayout.PREFERRED_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE))
            .addGap(18, 18, 18)
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
                .addComponent(messageLbl1)
                .addComponent(msgPanel1, GroupLayout.PREFERRED_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE))
            .addContainerGap(22, Short.MAX_VALUE))
    );
}
public static void main(String[] args) {
    SwingUtilities.invokeLater(new Runnable() {
        public void run() {
            try {
                JOptionPane.showMessageDialog(null, new TestPanel());
            } catch (HeadlessException e) {
                e.printStackTrace();
            } catch (MalformedURLException e) {
                e.printStackTrace();
            }
        }
      });
    }
}

Here is the output of this code https://web.archive.org/web/20131031212512/http://harryjoy.files.wordpress.com/2012/07/chatbubble1.png

help how to use this background styles in my project. I want to use this in jFrame and chatting like Viber,Facebook,Tango...

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

JTextArea is meant to enter and present Plain Text.

The settings applied to a single character applies to whole of the JTextArea.

You can use JTextPane or JEditorPane to write colored text.

For more info on how to enter colored text in JTextPane you can see example here.

To use JEditorPane use the example here.

I would go with the JTextPane solutions because its much simpler.

Hope I could help

edited May 23 '17 at 12:05

Community

1
1

answered May 08 '15 at 11:25

MaVRoSCy

17,747
15
82
125

its ok but I m also using append... if I use JTextPane or JEditorPane so can't use append public void appendReceivedMessages(String s) { this.txtReceivedMessages.append(s + "\n"); } – fzprog May 08 '15 at 11:58
yes you are right. Your code will need some modification to work – MaVRoSCy May 08 '15 at 12:29
Actually I want style like this http://i.stack.imgur.com/gfLPA.jpg I know Samsung messaging bubble style is difficult for me so I want to change text color of sender and receiver. – fzprog May 08 '15 at 12:41
Being lazy, one could use (non-strict) HTML inside a JTextPane/JEditorPane. `"
...
..."`
– Joop Eggen May 08 '15 at 12:55
I am not lazy I m just beginner. I want to learn more and more. I search on Google and stackoverflow then I post it here cuz I need this in my project. – fzprog May 08 '15 at 14:03
I get some relevant here https://web.archive.org/web/20140928131013/http://harryjoy.com/2012/07/28/chat-bubble-in-java-swing/ – fzprog May 08 '15 at 14:09
@fzprog sorry "lazy" was not meant in the bad sence; the lazier the better one might be as developer. I meant instead of getting aquanted with the weird StyledDocument API, you might do `jtextPane.setEditable("false"); jtextPane.setText("
Me:...
You:...");`. This allows for miscellaneous formatting, bold, emoticons, even links.
– Joop Eggen May 08 '15 at 14:40
I use `jTextPane.setText` but it sets only last send or receive massage.. I want to make conversation like in facebook, Samsung chat, viber, tango, etc ,etc hope you understand. @Joop Eggen – fzprog May 09 '15 at 10:28
In general the chat texts are kept in a list (messages since program start, yesterday, last week) and the content is generated from it (possibly plus filter on the messages). – Joop Eggen May 11 '15 at 06:25

Different chat text background color for sender and receiver in java

Following class is used to draw first chat bubble: (Arrow at the left side of bubble)

Following code is to draw second chat bubble. (Arrow at the right side of bubble):

And here is the code for using above 2 classes:

1 Answers1