Bubble Chat App is cross platform

If you’re looking for a way to build a chat interface that’s both user-friendly and visually appealing, the Bubble Chat App Demo is just what you need. This cross-platform application, built using Delphi, offers a single code base and UI that can be used on Android, iOS, macOS, Windows, and Linux. And because it uses a bubble chat interface like that found in popular apps like WhatsApp, Facebook, Instagram, and others, your users will feel right at home. So why wait? Get started today and see just how easy and fun it is to build a Bubble Chat App!

Download the full cross-platform Bubble Chat App source code on Github.

This demo is part of over 100 cross-platform demos with everything from camera demos to emoji demos and painting demos.

What is a bubble chat interface in software development?

A bubble chat interface is a graphical user interface element that allows users to have a conversation with each other. It usually consists of a series of bubble-shaped icons, each of which represents a different person in the conversation. When one user speaks, their bubble appears on the screen, and the other users can see what they are saying. This allows for a more natural conversation than other types of interfaces, such as text-based chat rooms. Bubble chat interfaces are often used in Instant Messaging (IM) applications, video conferencing software, and online games.

Screenshot of the Bubble Chat App demo

Bubble chat app for Android, iOS, macOS, Windows, and Linux.

What does the bubble chat source code look like?

unit Unit1;


  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.Objects,
  FMX.StdCtrls, FMX.Layouts, FMX.Controls.Presentation, FMX.Effects, FMX.Edit,

  TForm1 = class(TForm)
    VSB: TVertScrollBox;
    Layout1: TLayout;
    Button2: TButton;
    Image1: TImage;
    MaterialOxfordBlueSB: TStyleBook;
    ToolBar1: TToolBar;
    ShadowEffect4: TShadowEffect;
    Label1: TLabel;
    Edit1: TEdit;
    Image2: TImage;
    procedure Button2Click(Sender: TObject);
    { Private declarations }
    { Public declarations }
    procedure AddMessage(const AText: String; AAlignLayout: TAlignLayout; ACalloutPosition: TCalloutPosition);
    procedure FriendMessage(const S: String);
    procedure YourMessage(const S: String);
    procedure LabelPaint(Sender: TObject; Canvas: TCanvas;
      const ARect: TRectF);

  Form1: TForm1;


{$R *.fmx}

procedure TForm1.AddMessage(const AText: String; AAlignLayout: TAlignLayout; ACalloutPosition: TCalloutPosition);
CR: TCalloutRectangle;
L: TLabel;
TmpImg: TCircle;
  CR := TCalloutRectangle.Create(Self);
  CR.Parent := VSB;
  CR.Align := TAlignLayout.Top;
  CR.CalloutPosition := ACalloutPosition;
  CR.Margins.Top := 10;
  CR.Margins.Bottom := 10;
  CR.Margins.Left := 5;
  CR.Height := 75;
  CR.XRadius := 25;
  CR.YRadius := CR.XRadius;
  CR.Position.Y := 999999;
  CR.Fill.Kind := TBrushKind.None;
  CR.Stroke.Color := TAlphaColorRec.White;

  L := TLabel.Create(Self);
  L.Parent := CR;
  L.Align := TAlignLayout.Client;
  L.Text := AText;
  L.Margins.Right := 15;
  L.Margins.Left := 5;
  L.Width := CR.Width-20;

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

  TmpImg := TCircle.Create(Self);
  TmpImg.Parent := CR;
  TmpImg.Align := AAlignLayout;
  TmpImg.Fill.Kind := TBrushKind.Bitmap;
  case AAlignLayout of
    TAlignLayout.Left: TmpImg.Fill.Bitmap.Bitmap.Assign(Image1.Bitmap);
    TAlignLayout.Right: TmpImg.Fill.Bitmap.Bitmap.Assign(Image2.Bitmap);
  TmpImg.Fill.Bitmap.WrapMode := TWrapMode.TileStretch;
  TmpImg.Width := 75;
  TmpImg.Margins.Left := 15;
  TmpImg.Margins.Right := 15;
  TmpImg.Margins.Top := 15;
  TmpImg.Margins.Bottom := 15;


procedure TForm1.FriendMessage(const S: String);
  AddMessage(S, TAlignLayout.Left, TCalloutPosition.Left);

procedure TForm1.YourMessage(const S: String);
  AddMessage(S, TAlignLayout.Right, TCalloutPosition.Right);

procedure TForm1.Button2Click(Sender: TObject);
  //Edit1.Text := '';
  FriendMessage('A quick brown fox jumped over the yellow log running away from the pink dog and ran down the lane.');

procedure TForm1.LabelPaint(Sender: TObject; Canvas: TCanvas;
  const ARect: TRectF);
  {if TLabel(Sender).Tag=0 then
      TCalloutRectangle(TLabel(Sender).Parent).Height := Max(TLabel(Sender).Height,75);
      TLabel(Sender).Tag := 1;


Ready to learn how to program cross-platform apps like this?

Sign up for the Coding Boot Camp 2022 to learn to program. Topics include: Games, JavaScript, Web, Python, SQL, Databases, iOS, MacOS, Android, Mobile, Linux, Windows, Desktop, Server, and Arduino.

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition