Delphi Firemonkey Sidebar Problem on Android

I work on a simple Android app, may get iOS support later. It is a wrapper for an intranet browser web-app. After watching some Firemonkey tutorials, I saw a MultiView ctrl is the best choice for sidebar menus. But when I tap the trigger button, nothing happens. It works when I place another control instead the browser. Is there a hidden dependency?

Here is how to reproduce it:

• Start a Firemonkey Multi-Platform project in the IDE

• Place a TToolbar on the form

• Place a TSpeedButton within the TToolbar

• Place a TMultiView on the form

• Place a TButton (or any other control) on the TMultiView

• Place a TWebBrowser on the form

Set the following properties in object inspector:

Hit F9. If you press the Speedbutton, nothing happens.

The WebBrowser1 shows data from our intranet in my project (WebBrowser1.Navigate(..), but to skip this has no effect. Now replace the TWebBrowser by a TPanel. Everything works fine now.

I am new to Firemonkey, using Delphi 12.3 on Windows 11. Also Android and MacOS. Behaviour is always the same.

I was asked to show some code. But there is no code necessary to reproduce this problem. So I post the few lines of designer generated code here.

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 = 33.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 1
    object SpeedButton1: TSpeedButton
      Position.X = 144.000000000000000000
      Position.Y = 8.000000000000000000
      Size.Width = 41.000000000000000000
      Size.Height = 17.000000000000000000
      Size.PlatformDefault = False
      Text = 'SpeedButton1'
      TextSettings.Trimming = None
    end
  end
  object MultiView1: TMultiView
    MasterButton = SpeedButton1
    Mode = Drawer
    NavigationPaneOptions.CollapsedWidth = 89.000000000000000000
    Size.Width = 201.000000000000000000
    Size.Height = 447.000000000000000000
    Size.PlatformDefault = False
    Visible = False
    TabOrder = 2
    object Button1: TButton
      Position.X = 24.000000000000000000
      Position.Y = 32.000000000000000000
      Size.Width = 201.000000000000000000
      Size.Height = 49.000000000000000000
      Size.PlatformDefault = False
      TabOrder = 0
      Text = 'Button1'
      TextSettings.Trimming = None
    end
  end
  object WebBrowser1: TWebBrowser
    Align = Client
    Size.Width = 640.000000000000000000
    Size.Height = 447.000000000000000000
    Size.PlatformDefault = False
    WindowsEngine = IEOnly
  end
end

Controls like TWebBrowser or TMediaPlayer are rendered by the operating system outside the Firemonkey rendering pipeline.

Regarding your .fmx file, you can place a TImage on the form like TWebBrowser. Then when the trigger button is clicked (Speedbutton1 in your project) take a screenshot of TWebBrowser and hide it. The bitmap gives the illusion of a correct background.

procedure TForm1.MultiView1Shown(Sender: TObject);
begin
  Image1.Bitmap := WebBrowser1.MakeScreenshot;
  // although it is not implemented on all platforms, in case of problems, try
  // Image1.Bitmap := WebBrowser1.CaptureBitmap;

  WebBrowser1.Visible := False;
end;

procedure TForm1.MultiView1Hidden(Sender: TObject);
begin
  WebBrowser1.Visible := True;
end;

In case of TMultiView in drawer mode, resize TWebBrowser (change Align = Right) according to TMultiView.Width or TMultiView.CollapsedWidth. TWebBrowser is implemented using:

• Edge on Windows
• Chrome on Android
• Safari on iOS
• GtkWebKit on Linux

The behavior is different. On Linux (using a wayland desktop) for example, the 2nd solution is the only one I got working.