Jump to content
Sign in to follow this  
Bob Baudewyns

How to design QR Scan focus screen with FMX

Recommended Posts



I'm developing an application that needs to scan QR Code.

For the GUI design, I'd like to provide the usual scan focus screen with a transparent square inside a rectangle (the screen) like the attached mock-up.

I already tried different approaches but not very successful.


Any idea how could I design this with FMX ?




Share this post

Link to post

What OS are you looking for ?


Generally you can check this:



Winsoft "Camera for IOS", "Camera for Android" + "OBR ML Library for Android".



Generally I would try to use the bulit-in system barcode scanner, not trying to create my own one.



Share this post

Link to post


Thanks for your feedback.


My app is intended for Android and iOS.

I already know all these solutions and examples. 

By the way, I am using ZXing with the standard FMX Camera because this is the same code for all platforms.

With my friend Erik from Winsoft, I need 3 libraries as mentioned by you.

But I am indeed using Winsoft's Barcode for FireMonkey to generate the QR codes 


My problem is not generating or scanning QR codes. This is working just fine.

It is just a matter of look & feel for the scanning screen as explained above.



Share this post

Link to post

If you have a video scanning as background, you could simply add 4 TRectangle with opacity around the center, maybe controlled by margins.

Then you have darkened frame around.

Instead of Rect you could also check a filled TPath.

Probably you can work with filter effects directly on the background image, but i think you need some kind of custom blur filter.

Edited by Rollo62

Share this post

Link to post

Thank you again Rollo62,


In the meantime, I did something very close in the IDE with:

- 1 TGridPanelLayout

- 4 Outer Black TRectangle with opacity 0.5

- 8 Inner Yellow TRectangle with appropriate rounded corners


With a TImage as background for rendering the camera, it looks Ok to me



All Steps.png

  • Like 1

Share this post

Link to post

That looks OK for me, I would do the same.


What I meant was using the TPath, with a punched-out center hole and using its Bitmap fill property with effects.

I just clicked a roughly demo together, only tested under Win32, see enclosed.


This is just as proof of concept, it seems to work well, but needs some refinements of course.

This would allow to use any masked path, but of course requires a bitmap copy right now.





Edited by Rollo62

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this