Get access to over 100 FireMonkey cross platform samples for Android, IOS, OSX, Windows, and Linux!

AndroidAppmethodC++BuilderCode SnippetDelphiDemoFiremonkeyIOSOSXWindows

Material Design Ripple Click Effect Demo In #Delphi XE8 Firemonkey On #Android And #IOS

| Delphi 11 10 XE8 XE7 XE Seattle Berlin Tokyo Rio Firemonkey Delphi Android Delphi IOS

Delphi XE8 Firemonkey Material Design Ripple Click Effect Android IOS Windows | Delphi 11 10 XE8 XE7 XE Seattle Berlin Tokyo Rio Firemonkey Delphi Android Delphi IOSOne of the new material design effects which is found in Android Lollipop is the Ripple Click Effect. This effect is basically a colored expanding circle that starts at the point of the click or touch in a control. The circle expands until if fills the entire control before disappearing. The circle is also clipped inside of the control. Achieving this effect in Firemonkey is very simple using the built in TCircle and TFloatAnimation components. I have created an example of this effect which is automatically applied (via Duck Typing) to all controls within the current form which have an OnMouseDown event. This ripple click effect works across platforms on Android, IOS, OSX, and Windows. It works by setting the parent of an existing TCircle to the control which was clicked in the OnMouseDown event. The center of the circle is set to the OnMousedown X and Y. TFloatAnimation is used to automatically expand the height and width of the circle until it consumes the entire inside of the control at which point is disappears again. You can customize the circle and the effect to your liking. The demo should also work in Appmethod. Here is some sample source from the demo:
procedure TForm1.FloatAnimation1Finish(Sender: TObject);
Circle1.Visible := False;

procedure TForm1.FloatAnimation1Process(Sender: TObject);
Circle1.Width := Circle1.Height;
Circle1.Position.X := FX-(Circle1.Width/2);
Circle1.Position.Y := FY-(Circle1.Height/2);

procedure TForm1.GlobalMouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Single);
Circle1.Parent := TControl(Sender);
Circle1.Position.X := X-(Circle1.Width/2);
FX := X;
Circle1.Position.Y := Y-(Circle1.Height/2);
FY := Y;
Circle1.Width := 0;
Circle1.Height := 0;
Circle1.Visible := True;
FloatAnimation1.StopValue := Max(TControl(Sender).Width,TControl(Sender).Height)*2;

Download the free demo example with source code of the Material Design Ripple Click Effect for Delphi XE8 Firemonkey.

Have Delphi Firemonkey questions? Ask and get answers on StackOverflow.

Related posts

AutoBlogAI: FireMonkey Client To Leverage LLMs And Generative AI For Blogging


Unleashing Creativity With Song Writer AI: A Deep Dive


How To Build Stable Diffusion Text To Image Prompts


FireMonkey 10.4.2 Features Updated iOS 14, Android 11, And macOS 11 Support Plus Hundreds Of Fixes

Sign up for our Newsletter and
stay informed

Leave a Reply