androiddelphifiremonkey

Delphi Firemonkey - Simple FlyOut Menu on Android


I'm using a regular MultiView control for the menu of my app (primary Android). But I also want to have a kind of context menu that drops down when a user taps the menu button in the upper right corner. Examples:

Things I've tried without success:

Styling is nice, but not so important. Pretty sure there is a simple solution, but I could not get it done. I'm using Delphi 12.2, testing Android phones are Samsung with Android 13, 14.

// OnClick handler for the 3-dot button
// works, but moves all controls on my TTabControl to the left :-(
procedure TForm1.SpeedButton1Click(Sender: TObject);
begin
ListBoxMenu.Visible := not ListBoxMenu.Visible;
if ListBoxMenu.Visible then
   begin
   ListBoxMenu.ApplyStyleLookup;
   ListBoxMenu.RealignContent;
   end;
end;
// head of .fmx file
object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 480
  ClientWidth = 640
  FormFactor.Width = 320
  FormFactor.Height = 480
  FormFactor.Devices = [Desktop]
  DesignerMasterStyle = 0
  object ToolBar1: TToolBar
    Size.Width = 640.000000000000000000
    Size.Height = 46.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 0
    object SpeedButton1: TSpeedButton
      Align = Right
      Margins.Right = 5.000000000000000000
      Position.X = 589.000000000000000000
      Size.Width = 46.000000000000000000
      Size.Height = 46.000000000000000000
      Size.PlatformDefault = False
      StyleLookup = 'detailstoolbutton'
      Text = 'SpeedButton1'
      OnClick = SpeedButton1Click
    end
  end
  object ListboxMenu: TListBox
    Align = Right // also tried None
    Margins.Right = 30.000000000000000000
    Position.X = 528.000000000000000000
    Position.Y = 49.000000000000000000
    Size.Width = 107.000000000000000000
    Size.Height = 144.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 1
    Visible = False
    DisableFocusEffect = True
    DefaultItemStyles.ItemStyle = ''
    DefaultItemStyles.GroupHeaderStyle = ''
    DefaultItemStyles.GroupFooterStyle = ''
    Viewport.Width = 103.000000000000000000
    Viewport.Height = 140.000000000000000000
    object ListBoxItem1: TListBoxItem
      TabOrder = 0
      Text = 'MenuItem 0'
      OnClick = ListBoxItem1Click
    end
    object ListBoxItem2: TListBoxItem
      Position.Y = 19.000000000000000000
      TabOrder = 1
      Text = 'MenuItem 1'
    end
    object ListBoxItem3: TListBoxItem
      Position.Y = 38.000000000000000000
      TabOrder = 2
      Text = 'MenuItem 2'
    end
  end
  object TabControl1: TTabControl
    Align = Client // also tried Contents
    Size.Width = 640.000000000000000000
    Size.Height = 434.000000000000000000
    Size.PlatformDefault = False
    TabIndex = 1
    TabOrder = 4
    TabPosition = PlatformDefault
    Sizes = (
      640s
      408s
      640s
      408s)
    object TabItem1: TTabItem
      CustomIcon = <
        item
        end>
      TextSettings.Trimming = None
      IsSelected = False
      Size.Width = 69.000000000000000000
      Size.Height = 26.000000000000000000
      Size.PlatformDefault = False
      StyleLookup = ''
      TabOrder = 0
      Text = 'TabItem1'
      ExplicitSize.cx = 86.000000000000000000
      ExplicitSize.cy = 30.000000000000000000
    end

[EDIT 0]: Added not-working code [Edit 1]: Clarification of tested values of the Align property


Solution

  • So I finally got it working on Android and Win64. Here are my changes taken from SiverWarrior and Dave.

    The last tweaks have been to use Skia, otherwise the tab's slants are drawn over the menu. Also I had to choose "BringToFront" on the TListBox on the form. It did not work at structure view of the object inspector as the "BringToFront" menu option of the context menu is disabled there. Thank you!