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

Delphi XE5 Firemonkey Messenger LayoutMessenger 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.

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.

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

  1. Pingback: XE5 Chat Ekranı | Whatsapp gibi - Barış Atalay - Barış Atalay

  2. Pingback: Instant Messenger Layout Demo For Delphi XE6 Firemonkey | FMX Demos

  3. Amauri Luis Mocki Junior says:

    Nice Code !
    I have one question:
    I tried that code and every message appears at the top o Vertical Scroll Box.
    Usually, the most recent message is at the bottom. How can I do that ?

  4. Pingback: Year In Review: Top 10 Most Popular Delphi Firemonkey Posts For 2014 | Delphi XE5 XE6 XE7 Firemonkey, Delphi Android, Delphi IOS

  5. Pingback: Build Online And Offline Chat Bots With AIML For Firemonkey In Delphi 10 Berlin On Android And IOS | Delphi XE5 XE6 XE7 XE8 10 Seattle Berlin Firemonkey, Delphi Android, Delphi IOS

Leave a Reply

Show Buttons
Hide Buttons
Read previous post:
Speed Up Your Apps With Bitmap Caching In Delphi XE5 Firemonkey On Android And IOS

I have been doing mobile development with Adobe AIR and one of the features that it has is the ability...