How make a firemonkey HUD window

Question

I wanna to replicate the HUD functionality of https://github.com/jdg/MBProgressHUD in Delphi with firemonkey.

This is what look like in iPhone:

The main issue is how make the form semi-transparent & completely remove the borders.

Answer 1

Create your Firemonkey HD form, set it's Fill.Kind to bkNone, and it's Fill.Color to Null. Additionally, set it's Transparency property to True, and it's BorderStyle to bsNone.

Create a TRectangle (or any shape), and set the Stroke.Kind property to bkNone. Set it's Fill.Color to Gray, it's Opacity to 0.5.

Create a TAniIndicator and TLabel with parent of both as the form. It's Opacity remains at 1.0. Optionally, also create a TImage and make it the exact same size and position as the TAniIndicator.

From there, it's simply a case of working with TFloatAnimation on the TAniIndicator when you want to change the image (to a tick or such) and the label text to simply change to whatever message you want to display. Ideally, you simply create a procedure that accepts either a string or integer as a variable, and then modify the text and indicator/image to match that. For example;

Procedure TForm1.Process(Mode : Integer);
Begin
 if Mode = 1 then
 begin
  AniIndicator1.Enabled := True;
  AniIndicator1.Visible := True;
  Image1.Visible := False;
  Label1.TextAlign := TTextAlign.taCenter; // Must be called to reset alignment
  Label1.Text := 'Loading';
 End
 else if Mode = 2 then
 Begin
  AniIndicator1.Enabled := False;
  AniIndicator1.Visible := False;
  Label1.TextAlign := TTextAlign.taCenter; // Must be called to reset alignment
  Image1.Bitmap.LoadFromFile('Tick.png');
  Image1.Visible := True;
  Label1.Text := 'Complete!';
 end;
end;

You can then create a tpanel in your main form, and then add the above form (that contains the TAniIndicator, label, and rectangle) as a child component. You then call the procedure you created with a valid mode variable and it'll run as you indicated in the code. It's easy enough to add more modes and i've done something similar with one of my own applications (although it was related to TRectangle rather than creating an indicator).