Floating Action Button Demo For Android And iOS

Embarcadero

2 years ago

Looking for an easy and effective way to add records on Android, iOS, macOS, Windows, and Linux? Check out our Floating Action Button demo! With a button that floats over other controls as you scroll up and down, this is a popular interface mechanism that makes it easy and convenient to add new records. Plus, it’s cross-platform and built in Delphi using a single code base and single UI, so you can be sure it will work seamlessly no matter what platform you’re using. Take a look.

Download the full cross-platform Floating Action Button Demo 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 floating action button in software development?

A floating action button (FAB) is a type of button that is used in software development. It is generally used to perform an action that is related to the primary task of the user. For example, a FAB could be used to add a new contact to a list or to create a new document. The floating action button is designed to be placed on top of other content so that it is easily accessible by the user. It is usually positioned in the bottom-right corner of the screen. The floating action button has become a popular feature in many mobile apps and web applications.

Screenshot

What does the code look like for this demo?

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.StdCtrls,
  FMX.Objects, FMX.Effects, FMX.Controls.Presentation, FMX.ListView.Types,
  FMX.ListView.Appearances, FMX.ListView.Adapters.Base, Data.Bind.GenData,
  System.Rtti, System.Bindings.Outputs, Fmx.Bind.Editors, Data.Bind.EngExt,
  Fmx.Bind.DBEngExt, Data.Bind.Components, Data.Bind.ObjectScope, FMX.ListView;

type
  TForm1 = class(TForm)
    MaterialOxfordBlueSB: TStyleBook;
    ToolBar1: TToolBar;
    ShadowEffect4: TShadowEffect;
    Label1: TLabel;
<strong>    CircleButton: TCircle;</strong>
    Icon: TButton;
    ListView1: TListView;
    PrototypeBindSource1: TPrototypeBindSource;
    BindingsList1: TBindingsList;
    LinkFillControlToField1: TLinkFillControlToField;
<strong>    ShadowEffect1: TShadowEffect;
    procedure CircleButtonClick(Sender: TObject);</strong>
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

<strong>procedure TForm1.CircleButtonClick(Sender: TObject);
begin
  Label1.Text := DateTimeToStr(Now);
end;</strong>

end.

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

FMX.Objects, FMX.Effects, FMX.Controls.Presentation, FMX.ListView.Types,

FMX.ListView.Appearances, FMX.ListView.Adapters.Base, Data.Bind.GenData,

System.Rtti, System.Bindings.Outputs, Fmx.Bind.Editors, Data.Bind.EngExt,

Fmx.Bind.DBEngExt, Data.Bind.Components, Data.Bind.ObjectScope, FMX.ListView;

type

TForm1 = class(TForm)

MaterialOxfordBlueSB: TStyleBook;

ToolBar1: TToolBar;

ShadowEffect4: TShadowEffect;

Label1: TLabel;

CircleButton: TCircle;

Icon: TButton;

ListView1: TListView;

PrototypeBindSource1: TPrototypeBindSource;

BindingsList1: TBindingsList;

LinkFillControlToField1: TLinkFillControlToField;

ShadowEffect1: TShadowEffect;

procedure CircleButtonClick(Sender: TObject);

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.CircleButtonClick(Sender: TObject);

begin

Label1.Text := DateTimeToStr(Now);

end;

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.