Create A Custom Glass Effect Component For Delphi XE5 And XE6 Firemonkey On Android And IOS

Over on StackOverflow there is a question and answer pair about how to make a blurred glass overlay in Delphi XE5 and XE6 Firemonkey on mobile devices (Android and IOS). One of the answers includes an example prototype control called TGlass that can be injected into any component and it starts applying a TBlurEffect to that component’s children. I created a demo which uses the TGlass code and I put a TRectangle on a form with some controls inside it and then injected TGlass into the TRectangle. I call it a prototype because speedwise it isn’t really usable without adding some image caching. It does help you understand the Parent Child concept in Firemonkey though. In Firemonkey almost any control can be inside of almost any other control. This is different from how components generally behave in the Delphi VCL. It also shows an example of applying Firemonkey effects at runtime. It was interesting setting different Parents for the TGlass control and seeing how Firemonkey handles drawing priorities. There is also a couple of other ways to solve this same problem. In the Delphi IDE you could just drop a TBlurEffect on the TRectangle and it would start applying the blur effect in real time to the TRectangle and it’s children but effects can’t stack this way. Lastly, there is a TImageCacheLayout component which implements image caching and has a post processing method where you could apply any Firemonkey effect that you want (or stack multiple effects).

Update: Jim McKeeth has a version of the TGlass component over on Github which includes caching and supports multiple effects with a framework for adding your own.

Head over and check out the full question and answer about creating a blurred glass effect using Firemonkey.