in GUI Development by


Using a VerticalList and a SlideTouchHandler allows me to implement a list of TextViews within seconds.

However besides sliding through the list, I want also to show if there are more lines on the bottom or on the top. A good visual effect is to fade out the text.
This allows the user to see at first glance if he can slide along top or bottom.

Currently I fake this faded text via rectangle gradient, just like this:

How to do this the right way to get a smooth faded text?

1 Answer

0 votes
Best answer

One simple way is to split the list into three different vertical lists.
All lists will have the same content but are presenting different parts of the list. This can be aligned be keeping the ScrollOffset of all lists in sync.

// adjust the scroll offsets of the top and bottom list
VerticalListTop.ScrollOffset = VerticalListTop.Bounds.h + VerticalList.ScrollOffset;
VerticalListBottom.ScrollOffset = -VerticalList.Bounds.h + VerticalList.ScrollOffset;

// check if top fade is necessary
var bool topFade = ( VerticalListTop.ScrollOffset < 0 );
VerticalListTop.Buffered = topFade;
VerticalListTop.Visible = !topFade;
WarpGroupTop.Visible = topFade;

// check if bottom fade is necessary
var bool bottomFade = ( VerticalListBottom.GetItemAtPosition( point( 1, Bounds.h + 1 ) ) > 0 );
VerticalListBottom.Buffered = bottomFade;
VerticalListBottom.Visible = !bottomFade;
WarpGroupTop.Visible = bottomFade;

Now the top and bottom list will get a View::WarpGroup which can present these lists with modifies opacity at the corners.
When needed, set the top or bottom part buffered and let present it vis the WarpGroup.

See attached example.

Unfortunately the link to the example does not work, could you please re-link the example?


Hi Phil,

thanks for the message - the link is now up-to-date.

Best regards,

Hi Manfred,

I have this working but currently if I swipe down from item 1, it snaps to the top of the middle area, rather than the top of the top area.

Is there any way to offset the snap point?



Hi Phil,

Thanks for your input. With the memory optimizes example described in the ticket, the snap is not on the tol of the bottom list.
To cover this please see the example 2, which uses a fully buffered list and presents it using three different Views::Group. 

With kind regards,

See attached example 2

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint