Rendering large or very tall TALRectangle

[Elinulok32]

I have a TALVertScrollBox that displays a list of about 100 users. For the design I want to implement, each user detail (in a layout) is rather added to a single TALRectangle instead of directly to the TALVertScrollBox and aligned TOP. The TALRectangle has a background color, rounded corners and AutoSize enabled:=True. The TALVertScrollBox then becomes the parent of the TALRectangle.

The issue is: Anytime the list of users exceeds 20 or so, the TALRectangle looses the color set to its Fill property and become all Black, and the rounded corners are also lost. This happens both on Android and iOS but not on Windows. The height of each user detail (layout) is 80, so having about 20 user makes the TALRectangle height to be 1600. At this height and beyond, the TALRectangle looses, its color and rounded corners.

Attached are 2 images the describe the issue. First one (with issue) has a list of more than 20 users and second one been filtered to display 7 users. How do I resolve this. Thank you.

[Zeus64]

Hi, I see the issue clearly.

You need to understand that when you create a very tall TALRectangle, you're also creating a large off-screen buffer in memory. All Alcinoe controls use double buffering by default: they first render themselves into a bitmap buffer, and then that buffer is painted onto the screen during the paint cycle. This is a key reason Alcinoe is fast and smooth.

But when you have more than ~20 users (each 80px height), your TALRectangle becomes around 1600px tall or more — and with over 100 users, it gets huge. On Windows this may work because the OS and GPU can handle large off-screen bitmaps more easily. On Android/iOS, however, the buffer allocation might fail silently — and when that happens, nothing is drawn, resulting in a black rectangle and missing corners.

How to fix it? You have a few options:

✅ Option 1: Remove the rounded corners
If you remove the rounded corners, TALRectangle won't use double buffering anymore (because the shape is trivial) and will draw directly on the form each frame — which avoids the huge buffer issue entirely. You can then simulate rounded corners visually by placing two small TALRectangles (with rounded corners) only at the top and bottom of the list.

✅ Option 2: Use Skia and disable double buffering
If you enable Skia rendering for your project (via ALSkiaEngine), you can safely set:

MyRectangle.DoubleBuffered := False;

Skia is fast enough to draw directly onto the form without needing a buffer. This will keep your rounded corners and background color intact, without memory issues.

Let me know which direction you want to explore, and I can help you further.

[Elinulok32]

Hello @Zeus64, thank you very much for your rapid response.
I'll go with option 1 because with option 2, even with SKIA rendering enabled (via ALSkiaEngine) and DoubleBuffered := False, I still get the same black background on very tall TALRectangle. I managed to place two small TALRectangles (with rounded corners) at the top and bottom of the list and got the effect I wanted. Thanks so much.

Also, a feature I believe all Delphi developers would love very much to see is a TALRectangle (with rounded corners) being able to clip children around the corners when its ClipChildren property is set to True. I know this is a very challenging task, but it will come in very handy and help with a lot of designs when implemented.

Great job. We really appreciate you.

[Zeus64]

Also, a feature I believe all Delphi developers would love very much to see is a TALRectangle (with rounded corners) being able to clip children around the corners when its ClipChildren property is set to True. I know this is a very challenging task, but it will come in very handy and help with a lot of designs when implemented.

yes but this is very difficult to do :(

[Zeus64]

by the way, if you want to create such big scrollable list of items, then you must take a look at the TALDynamicListBox.
you can find a demo here :
https://play.google.com/apps/internaltest/4701663261289083599
you must send me your email so that i can add it to the internal tester list

[Elinulok32]

Certainly.
I sent my email to you once, but still couldn't access the link after 2 days. I just sent it to you again.

[Zeus64]

@Elinulok32 just added it again, can you try now to download the app ?