Simulating Transparent Dialog on FireMonkey Mobile

Posted by on in Blogs

Delivering great user experience is probably one most important thing in app design. Certain ideas that seem to be easy to achieve in the conceptual phase of development, when an app is still a bunch of wireframes and sketches, could be more difficult to implement then expected.

Today I was helping in providing the "transparent modal dialog" experience to an Android app. The idea is simple. Show the message box on the form and temporarily blur the current content, so the attention of the user is focused on the dialog. This is a Delphi app running on Android. Until Delphi 10.1 this effect could be achieved with displaying the secondary form with transparency enabled, but this approach no longer works in 10.2 due to the internal architectural changes in Android support.

Let me share with you a simple project that shows how to achieve the same visual effect but instead of using transparency, use the "TBlurEffect" and taking the screenshot of the original form.

As the starting point let's use the "MobileControls" demo that comes with RAD Studio installation. This project contains just one form with a TTabControl that shows all kinds of available FireMonkey controls on different tabs. The easiest way to take a screenshot is to call "MakeScreenshot" method that any "TControl" descendant provides. To centralize the process of taking the screenshot add non-visual "TLayout" component to the form and make it a parent of the existing tab control. On top of the screen I have added the toolbar with a button to show the transparent modal form. One more thing is to add the "TBlurEffect" component to the form. Just before taking a screenshot we will enable this effect in code, and disable afterwards. Here is how my main form looks in the Structure view.

Add one more form to the project and put there a TImage component aligned to "Client". In the middle of the form put a TRectangle component and a TButton and a TLabel onto it. In the "OnClick" event of the button enter just call to "Close" the second form. Here is how the second form looks like in the Structure view.

Back to the main form. Add the "Unit2" to the implementation "uses" clause of the form and the following code in the "OnClick" event of the top button:

uses Unit2, FMX.Graphics;

procedure TForm1.btnShowModalClick(Sender: TObject);
var b: TBitmap;
begin
  BlurEffect1.Enabled := True;

  b := Layout1.MakeScreenshot;
  Form2Modal.ImageBackground.Bitmap.Assign(b);
  b.DisposeOf;

  BlurEffect1.Enabled := False;

  Form2Modal.Show;
end;

That's it! It works the same way on both Android and iOS. Here are the screenshots from the running app:

    

The nice thing is that it works cross-platform:-) 



About
Gold User, Rank: 9, Points: 364
Crazy about Delphi Programming!

Comments

  • Jako G46659
    Jako G46659 Monday, 18 September 2017

    This is interesting but does not take into account the device being rotated while the dialog is on screen.

  • Paweł Głowacki
    Paweł Głowacki Monday, 18 September 2017

    You are right Jako! I was wondering who is going to see this first;-)
    I did not want to make the demo too complex, but it should be easily done, by responding to form's "OnResize" event, taking a quick screenshot from the original, rotated form and redisplaying the dialog form with blur...

  • abd alkader
    abd alkader Sunday, 10 September 2017

    oh .... i saw this line now.. ( but this approach no longer works in 10.2 due to the internal architectural changes in Android support. ) .... so what the solution to do that or some thing like messagedlg in Tokyo version??????? Thank You A lot

  • abd alkader
    abd alkader Sunday, 10 September 2017

    Hello ....
    it is a good Idea ... but i thing there is a problem in rendering in Tokyo Version .... specially in android... so the instruction ( Form2Modal.Show; ) dosn't shows the Form2Model ... only the Blured Form1 is appeared ..

  • Paweł Głowacki
    Paweł Głowacki Monday, 11 September 2017

    Hi abd,
    That's the whole point to show blurred form1 as the background of the form2...

  • abd alkader
    abd alkader Monday, 11 September 2017

    thank you .... i try to do that with tokyo ... i really have a problem ... the ui has to updated and i dont know how??? ... it must be automaticlly
    thank you .... sorry

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: