Cross-Platform Popup Menu Button Example

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.

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;
    MultiView1: TMultiView;
    Button1: TButton;
    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?

[...]
    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
  object MultiView1: TMultiView
    MasterButton = Button1
    Mode = Popover
    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

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.