Bubble Chat App Demo For Desktop And Mobile

Embarcadero

2 years ago

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.

Table of Contents

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

What does the bubble chat source code look like?

unit Unit1;

interface

uses
  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,
  System.Math;

type
  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
    { Private declarations }
  public
    { 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);
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

<strong>procedure TForm1.AddMessage(const AText: String; AAlignLayout: TAlignLayout; ACalloutPosition: TCalloutPosition);
var
CR: TCalloutRectangle;
L: TLabel;
TmpImg: TCircle;
begin
  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);
  end;
  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;

  VSB.ScrollBy(0,-95);
end;

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

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

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

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

end.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

unit Unit1;

interface

uses

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,

System.Math;

type

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

{ Private declarations }

public

{ 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);

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

<strong>procedure TForm1.AddMessage(const AText: String; AAlignLayout: TAlignLayout; ACalloutPosition: TCalloutPosition);

var

CR: TCalloutRectangle;

L: TLabel;

TmpImg: TCircle;

begin

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);

end;

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;

VSB.ScrollBy(0,-95);

end;

procedure TForm1.FriendMessage(const S: String);

begin

AddMessage(S, TAlignLayout.Left, TCalloutPosition.Left);

end;

procedure TForm1.YourMessage(const S: String);

begin

AddMessage(S, TAlignLayout.Right, TCalloutPosition.Right);

end;

procedure TForm1.Button2Click(Sender: TObject);

begin

YourMessage(Edit1.Text);

//Edit1.Text := '';

FriendMessage('A quick brown fox jumped over the yellow log running away from the pink dog and ran down the lane.');

end;

procedure TForm1.LabelPaint(Sender: TObject; Canvas: TCanvas;

const ARect: TRectF);

begin

{if TLabel(Sender).Tag=0 then

begin

TCalloutRectangle(TLabel(Sender).Parent).Height := Max(TLabel(Sender).Height,75);

TLabel(Sender).Tag := 1;

end;}

end;</strong>

end.

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.