'How to add touch effect to TRectangle in Delphi Firemonkey / Android app?

I want to add touch effect animation (expanding circe) to a TRectangle. Same kind of effect that is present on TButtons by default - when you put a finger on them they start to draw expanding circle.

I'm looking for the simplest way of doing so, preferrably in the FMX (e.g. take some component from component palette, add it to Rect1 and configure), not in code.

Why not use custom TButton? Well, I'm looking to use only this touch effect and don't need any of the additional button properties / methods.

androiddelphifiremonkey


Solution 1:[1]

You can use TButtonStyleObject. Put it on your TRectangle with Align = Contents and thats all.

Please don't forget to check if your TButtonStyleObject has the right Coordinates for the TTouchAnimationAdapter Property, otherwise you have to set it manually.

This is a TButtonStyleObject example here from Puerto Ricostyle:

object TButtonStyleObject
  StyleName = 'Background'
  Align = Contents
  Opacity = 0.100000001490116100
  SourceLookup = 'Puerto Ricostyle.png'
  Size.Width = 184.000000000000000000
  Size.Height = 91.000000000000000000
  Size.PlatformDefault = False
  HotLink = <
    item
      CapInsets.Left = 8.000000000000000000
      CapInsets.Top = 8.000000000000000000
      CapInsets.Right = 8.000000000000000000
      CapInsets.Bottom = 8.000000000000000000
      SourceRect.Left = 98.000000000000000000
      SourceRect.Top = 195.000000000000000000
      SourceRect.Right = 159.000000000000000000
      SourceRect.Bottom = 247.000000000000000000
    end
    item
      CapInsets.Left = 12.000000000000000000
      CapInsets.Top = 12.000000000000000000
      CapInsets.Right = 12.000000000000000000
      CapInsets.Bottom = 12.000000000000000000
      Scale = 1.500000000000000000
      SourceRect.Left = 147.000000000000000000
      SourceRect.Top = 299.000000000000000000
      SourceRect.Right = 241.000000000000000000
      SourceRect.Bottom = 376.000000000000000000
    end
    item
      CapInsets.Left = 16.000000000000000000
      CapInsets.Top = 16.000000000000000000
      CapInsets.Right = 16.000000000000000000
      CapInsets.Bottom = 16.000000000000000000
      Scale = 2.000000000000000000
      SourceRect.Left = 194.000000000000000000
      SourceRect.Top = 398.000000000000000000
      SourceRect.Right = 319.000000000000000000
      SourceRect.Bottom = 501.000000000000000000
    end
    item
      CapInsets.Left = 24.000000000000000000
      CapInsets.Top = 24.000000000000000000
      CapInsets.Right = 24.000000000000000000
      CapInsets.Bottom = 24.000000000000000000
      Scale = 3.000000000000000000
      SourceRect.Left = 294.000000000000000000
      SourceRect.Top = 601.000000000000000000
      SourceRect.Right = 473.000000000000000000
      SourceRect.Bottom = 755.000000000000000000
    end>
  FocusedLink = <
    item
      CapInsets.Left = 8.000000000000000000
      CapInsets.Top = 8.000000000000000000
      CapInsets.Right = 8.000000000000000000
      CapInsets.Bottom = 8.000000000000000000
      SourceRect.Left = 97.000000000000000000
      SourceRect.Top = 195.000000000000000000
      SourceRect.Right = 160.000000000000000000
      SourceRect.Bottom = 248.000000000000000000
    end
    item
      CapInsets.Left = 12.000000000000000000
      CapInsets.Top = 12.000000000000000000
      CapInsets.Right = 12.000000000000000000
      CapInsets.Bottom = 12.000000000000000000
      Scale = 1.500000000000000000
      SourceRect.Left = 148.000000000000000000
      SourceRect.Top = 299.000000000000000000
      SourceRect.Right = 241.000000000000000000
      SourceRect.Bottom = 374.000000000000000000
    end
    item
      CapInsets.Left = 16.000000000000000000
      CapInsets.Top = 16.000000000000000000
      CapInsets.Right = 16.000000000000000000
      CapInsets.Bottom = 16.000000000000000000
      Scale = 2.000000000000000000
      SourceRect.Left = 192.000000000000000000
      SourceRect.Top = 400.000000000000000000
      SourceRect.Right = 318.000000000000000000
      SourceRect.Bottom = 504.000000000000000000
    end
    item
      CapInsets.Left = 24.000000000000000000
      CapInsets.Top = 24.000000000000000000
      CapInsets.Right = 24.000000000000000000
      CapInsets.Bottom = 24.000000000000000000
      Scale = 3.000000000000000000
      SourceRect.Left = 291.000000000000000000
      SourceRect.Top = 597.000000000000000000
      SourceRect.Right = 483.000000000000000000
      SourceRect.Bottom = 749.000000000000000000
    end>
  NormalLink = <
    item
      CapInsets.Left = 8.000000000000000000
      CapInsets.Top = 8.000000000000000000
      CapInsets.Right = 8.000000000000000000
      CapInsets.Bottom = 8.000000000000000000
      SourceRect.Left = 99.000000000000000000
      SourceRect.Top = 197.000000000000000000
      SourceRect.Right = 160.000000000000000000
      SourceRect.Bottom = 251.000000000000000000
    end
    item
      CapInsets.Left = 12.000000000000000000
      CapInsets.Top = 12.000000000000000000
      CapInsets.Right = 12.000000000000000000
      CapInsets.Bottom = 12.000000000000000000
      Scale = 1.500000000000000000
      SourceRect.Left = 148.000000000000000000
      SourceRect.Top = 299.000000000000000000
      SourceRect.Right = 241.000000000000000000
      SourceRect.Bottom = 376.000000000000000000
    end
    item
      CapInsets.Left = 16.000000000000000000
      CapInsets.Top = 16.000000000000000000
      CapInsets.Right = 16.000000000000000000
      CapInsets.Bottom = 16.000000000000000000
      Scale = 2.000000000000000000
      SourceRect.Left = 194.000000000000000000
      SourceRect.Top = 400.000000000000000000
      SourceRect.Right = 318.000000000000000000
      SourceRect.Bottom = 502.000000000000000000
    end
    item
      CapInsets.Left = 24.000000000000000000
      CapInsets.Top = 24.000000000000000000
      CapInsets.Right = 24.000000000000000000
      CapInsets.Bottom = 24.000000000000000000
      Scale = 3.000000000000000000
      SourceRect.Left = 291.000000000000000000
      SourceRect.Top = 597.000000000000000000
      SourceRect.Right = 478.000000000000000000
      SourceRect.Bottom = 749.000000000000000000
    end>
  PressedLink = <
    item
      CapInsets.Left = 8.000000000000000000
      CapInsets.Top = 8.000000000000000000
      CapInsets.Right = 8.000000000000000000
      CapInsets.Bottom = 8.000000000000000000
      SourceRect.Left = 100.000000000000000000
      SourceRect.Top = 196.000000000000000000
      SourceRect.Right = 159.000000000000000000
      SourceRect.Bottom = 247.000000000000000000
    end
    item
      CapInsets.Left = 12.000000000000000000
      CapInsets.Top = 12.000000000000000000
      CapInsets.Right = 12.000000000000000000
      CapInsets.Bottom = 12.000000000000000000
      Scale = 1.500000000000000000
      SourceRect.Left = 149.000000000000000000
      SourceRect.Top = 299.000000000000000000
      SourceRect.Right = 240.000000000000000000
      SourceRect.Bottom = 375.000000000000000000
    end
    item
      CapInsets.Left = 16.000000000000000000
      CapInsets.Top = 16.000000000000000000
      CapInsets.Right = 16.000000000000000000
      CapInsets.Bottom = 16.000000000000000000
      Scale = 2.000000000000000000
      SourceRect.Left = 194.000000000000000000
      SourceRect.Top = 399.000000000000000000
      SourceRect.Right = 317.000000000000000000
      SourceRect.Bottom = 501.000000000000000000
    end
    item
      CapInsets.Left = 24.000000000000000000
      CapInsets.Top = 24.000000000000000000
      CapInsets.Right = 24.000000000000000000
      CapInsets.Bottom = 24.000000000000000000
      Scale = 3.000000000000000000
      SourceRect.Left = 291.000000000000000000
      SourceRect.Top = 600.000000000000000000
      SourceRect.Right = 474.000000000000000000
      SourceRect.Bottom = 749.000000000000000000
    end>
  TouchAnimation.Link = <
    item
      SourceRect.Left = 238.000000000000000000
      SourceRect.Top = 195.000000000000000000
      SourceRect.Right = 298.000000000000000000
      SourceRect.Bottom = 255.000000000000000000
    end
    item
      Scale = 1.500000000000000000
      SourceRect.Left = 358.000000000000000000
      SourceRect.Top = 292.000000000000000000
      SourceRect.Right = 448.000000000000000000
      SourceRect.Bottom = 382.000000000000000000
    end
    item
      Scale = 2.000000000000000000
      SourceRect.Left = 478.000000000000000000
      SourceRect.Top = 389.000000000000000000
      SourceRect.Right = 598.000000000000000000
      SourceRect.Bottom = 509.000000000000000000
    end
    item
      Scale = 3.000000000000000000
      SourceRect.Left = 716.000000000000000000
      SourceRect.Top = 585.000000000000000000
      SourceRect.Right = 897.000000000000000000
      SourceRect.Bottom = 765.000000000000000000
    end>
end

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jeremy Caney

Related Questions

Which is preferable: Free or FreeAndNil?

Delphi notification when a file gets updated

Unable to programmatically close the application when validation error is found - edited

Delphi Form Designer doesn't undo changes

Delphi TJvHidDeviceController : device cannot be opened

Delphi and Discrete Signals: Getting a fixed volume signal with fixed silence

Suppress Userproperty printing with outlook mail items

How to retrive Group mail box names for outlook profile using MAPI program?

The application was unable to start correctly (0xc000007b)

TWebbrowser / TEmbeddedWb : hide all messageboxes

Delphi FTP upload Access violation

Change the font colour of combo box in delphi firemonkey mobile

Delphi Twebbrowser change value of textbox.

How can I add a ListBoxItem programmatically?

How do I drag and drop from a TDBGrid?