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.
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.

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

Related posts
DelphiDemoFiremonkeyLinuxOSXShowcaseWindows

AutoBlogAI: FireMonkey Client To Leverage LLMs And Generative AI For Blogging

DelphiFiremonkeyShowcaseUtilityWindows

Unleashing Creativity With Song Writer AI: A Deep Dive

DelphiFiremonkeyShowcaseWindows

How To Build Stable Diffusion Text To Image Prompts

AndroidC++BuilderDelphiFiremonkeyIOSOSXWindows

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

Sign up for our Newsletter and
stay informed

8 Comments

Leave a Reply