Get access to over 100 FireMonkey cross platform samples for Android, IOS, OSX, Windows, and Linux!

AndroidAppmethodCode SnippetDelphiFiremonkeyIOSOSXWindows

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

| Delphi 11 10 XE8 XE7 XE Seattle Berlin Tokyo Rio Firemonkey Delphi Android Delphi IOS

Delphi XE5 Firemonkey Messenger Layout | Delphi 11 10 XE8 XE7 XE Seattle Berlin Tokyo Rio Firemonkey Delphi Android Delphi IOSMessenger 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.
VSB: TVertScrollBox;

procedure TForm2.Button1Click(Sender: TObject);
CR: TCalloutRectangle;
L: TText;
TmpImg: TImage;
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.Width := 75;

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.

Have Delphi Firemonkey questions? Ask and get answers on StackOverflow.

Related posts

How To Build Stable Diffusion Text To Image Prompts


FireMonkey 10.4.2 Features Updated iOS 14, Android 11, And macOS 11 Support Plus Hundreds Of Fixes


Ryzen 9 5950x: One Billion Lines Of Delphi Code Compiled In ~5 Minutes On 16 Cores


DelphiCon 2020 FireMonkey Sessions Available Starting November 19

Sign up for our Newsletter and
stay informed


Leave a Reply