How to Create Chat Bubbles Like Facebook Messenger

How to create chat bubbles like facebook Messenger

This is a rather basic example but it should explain all of the fundamentals you require.

Most of the solution lies within + adjacent sibling selector. In this case, it's used to apply a different border radius to multiple messages in a row from the same person.

ul{  list-style: none;  margin: 0;  padding: 0;}
ul li{  display:inline-block;  clear: both;  padding: 20px;  border-radius: 30px;  margin-bottom: 2px;  font-family: Helvetica, Arial, sans-serif;}
.him{  background: #eee;  float: left;}
.me{  float: right;  background: #0084ff;  color: #fff;}
.him + .me{  border-bottom-right-radius: 5px;}
.me + .me{  border-top-right-radius: 5px;  border-bottom-right-radius: 5px;}
.me:last-of-type {  border-bottom-right-radius: 30px;}

<ul> <li class="him">By Other User</li> <li class="me">By this User, first message</li> <li class="me">By this User, secondmessage</li> <li class="me">By this User, third message</li> <li class="me">By this User, fourth message</li></ul>

How to create bubble chat TableViewCell like in Messenger using XCode's Interface Builder?

OK, there are a few considerations:

1. If you haven’t already, make your asset stretchable (where the corners aren’t stretched, but only the center is) by:

   • selecting the asset and zoom in so you can better refine the slices;
   • in the Xcode menu, choose “Editor” » “Show Slicing”;
   • click on “Start Slicing”:
     
   • click on the center “horizontal and vertical stretching” button:
     
   • move your guides to where you want them:
     
   • now when you add the image view using this new stretchable asset and choose “Content Mode” of “Scale to Fit”, it will scale in such a way that the center is stretched but the edges aren’t:
     

   Also see Xcode documentation “Add a resizable area to an image”.

2. In your cell, now just add this image view and the label:

   • defining the label’s leading/trailing/top/bottom constraints to be inset from the edges of the image view;
   • define the label’s line count to zero;
   • define the image view’s width to be “>=” the container view width (with a multiplier of 66%);
   • obviously define your bubble’s appropriate leading/trailing/top/bottom constraints to its superview, too; and
   • make sure your cell is using automatic cell height.

For the sake of completeness, the other approach is to make an @IBDesignable view where you draw the bubble yourself with a CAShapeLayer whose path is the cgPath of a UIBezierPath. This is what I’ve done in my chat apps. But this stretchable image approach works fine, too.

By the way, if your speaker and listener bubbles are different colors, note that you might want to have flipped renditions of these bubbles for RTL languages.

Related Topics