Build A Messenger Layout Like Whatsapp Using Delphi XE5 Firemonkey On Android And IOS

Messenger style apps are currently very popular on Google Play and the Apple App Store at the moment. I wanted to create a layout similar to what some of the messenger apps (like Whatsapp) look like using Delphi XE5 Firemonkey. I created a sample app with two buttons at the bottom that create the left and right messages. The code to create each message is almost the same on each button except for the left and the right alignments are configured differently. The messages get added to a TVertScrollBox and each message starts out as a TCalloutRectangle. An image is added to each message item and a TText object is also added to each message item. The message items are created from scratch in code but you could use TFrames to design them visually. From here you can customize it to suit your own needs. You could hook this demo up to the TCP Client Server framework. This project should work on Android, IOS, Windows, and OSX. The code isn’t pretty as this is mainly setup to just show how to do a layout like this.
public
VSB: TVertScrollBox;

procedure TForm2.Button1Click(Sender: TObject);
var
CR: TCalloutRectangle;
L: TText;
TmpImg: TImage;
begin
CR := TCalloutRectangle.Create(Self);
CR.Parent := VSB;
CR.Align := TAlignLayout.alTop;
CR.CalloutPosition := TCalloutPosition.cpLeft;
CR.Margins.Top := 10;
CR.Margins.Bottom := 10;
CR.Margins.Right := 5;
CR.Height := 75;

L := TText.Create(Self);
L.Parent := CR;
L.Align := TAlignLayout.alClient;
L.Text := 'A quick brown fox jumped over the yellow log running away from the pink dog and ran down the lane.';
L.Margins.Left := 15;
L.Margins.Right := 5;
L.Width := CR.Width-20;

L.WordWrap := True;
L.AutoSize := True;
L.OnPaint := LabelPaint;

TmpImg := TImage.Create(Self);
TmpImg.Parent := CR;
TmpImg.Align := TAlignLayout.alRight;
TmpImg.Bitmap.Assign(Image1.Bitmap);
TmpImg.Width := 75;
end;
Download the Delphi XE5 Firemonkey Demo Messenger Layout With Source

Update: There is also an update available which uses this code and includes a full XMPP messenger component for Delphi XE6 Firemonkey which you can read about here.

Update 2: You can also use TTMSFMXTableView in the TMS Pack for Firemonkey to achieve this same effect with much less code.