Cross-Platform Popup Menu Button Example

Embarcadero

2 years ago

The Popup Menu Button is a cross-platform application that allows you to define a hamburger menu button in a toolbar and have a scrollable menu pop up over the rest of the app interface. This is a great way to keep your app organized and simplify navigation for your users. The Popup Menu Button is built in Delphi using a single code base and single UI, so it works seamlessly on Android, iOS, macOS, Windows, and Linux. With its easy-to-use interface and powerful features, the Popup Menu Button can be the perfect solution for your menu needs.

Download the full cross-platform Popup Menu 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 popup menu in software development?

A popup menu is a type of menu that is triggered by an event such as a button press or a mouse click. Popup menus are often used in GUI applications to provide context-sensitive options to the user. For example, a popup menu might be used to display a list of options when the user right-clicks on an object. Popup menus can also be used in command-line applications, though they are less common in this type of application. In general, popup menus provide a convenient way for users to access frequently used options without having to navigate through a menu hierarchy.

Screenshot

What does the popup menu demo 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.StdCtrls,
  FMX.MultiView, 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>    MultiView1: TMultiView;
    Button1: TButto</strong>n;
    ListView1: TListView;
    PrototypeBindSource1: TPrototypeBindSource;
    BindingsList1: TBindingsList;
    LinkFillControlToField1: TLinkFillControlToField;
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

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.MultiView, 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> MultiView1: TMultiView;

Button1: TButto</strong>n;

ListView1: TListView;

PrototypeBindSource1: TPrototypeBindSource;

BindingsList1: TBindingsList;

LinkFillControlToField1: TLinkFillControlToField;

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

end.

What do the Form element objects look like?

&#91;...]
    object Button1: TButton
      Align = Right
      Position.X = 260.000000000000000000
      Size.Width = 64.000000000000000000
      Size.Height = 48.000000000000000000
      Size.PlatformDefault = False
      StyleLookup = 'drawertoolbuttonbordered'
      TabOrder = 2
      Text = 'Button1'
    end
  end
<strong>  object MultiView1: TMultiView
    MasterButton = Button1
    Mode = Popover</strong>
    Size.Width = 250.000000000000000000
    Size.Height = 400.000000000000000000
    Size.PlatformDefault = False
    Visible = False
    TabOrder = 2
    object ListView1: TListView
      ItemAppearanceClassName = 'TListItemAppearance'
      ItemEditAppearanceClassName = 'TListItemShowCheckAppearance'
      HeaderAppearanceClassName = 'TListHeaderObjects'
      FooterAppearanceClassName = 'TListHeaderObjects'
      Align = Client
      Size.Width = 250.000000000000000000
      Size.Height = 400.000000000000000000
      Size.PlatformDefault = False
      TabOrder = 0
    end
  end

[...]

object Button1: TButton

Align = Right

Position.X = 260.000000000000000000

Size.Width = 64.000000000000000000

Size.Height = 48.000000000000000000

Size.PlatformDefault = False

StyleLookup = 'drawertoolbuttonbordered'

TabOrder = 2

Text = 'Button1'

end

<strong> object MultiView1: TMultiView

MasterButton = Button1

Mode = Popover</strong>

Size.Width = 250.000000000000000000

Size.Height = 400.000000000000000000

Size.PlatformDefault = False

Visible = False

TabOrder = 2

object ListView1: TListView

ItemAppearanceClassName = 'TListItemAppearance'

ItemEditAppearanceClassName = 'TListItemShowCheckAppearance'

HeaderAppearanceClassName = 'TListHeaderObjects'

FooterAppearanceClassName = 'TListHeaderObjects'

Align = Client

Size.Width = 250.000000000000000000

Size.Height = 400.000000000000000000

Size.PlatformDefault = False

TabOrder = 0

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.