Skip to main content
Wrend.1
Associate III
September 22, 2020
Solved

How to realize scroll bar effect in ScrollList.

  • September 22, 2020
  • 3 replies
  • 5389 views

I want to realize a scroll bar in ScrollList.

So the scroll bar will work like process bar. And it will tell my user where the current icon is.

Is there any clever way to realize it.

In addition, can I customize the scroll bar?

Best answer by Romain DIELEMAN

Hi,

An easy way to have a scroll bar with a scroll list is to use a scrollable container and to add a scrollList in it. You can also just put a box widget on the side of a scrollList and change its position accordingly to the scroll.

It is possible to customize the scroll bar widget. You can directly modify the generated hpp/cpp files but watch out they may be overwritten when you use a updated version of the TouchGFX fw package (so if you migrate your project to 4.14 to 4.15 in the future for example). Another way to customize it is to create your own custom scroll bar widget : copy/paste the scrollList cpp and hpp files to new ones called MyOwnScrollList.cpp/hpp that you set in the gui/common folder for example.

/Romain

3 replies

Romain DIELEMAN
Romain DIELEMANBest answer
ST Employee
September 22, 2020

Hi,

An easy way to have a scroll bar with a scroll list is to use a scrollable container and to add a scrollList in it. You can also just put a box widget on the side of a scrollList and change its position accordingly to the scroll.

It is possible to customize the scroll bar widget. You can directly modify the generated hpp/cpp files but watch out they may be overwritten when you use a updated version of the TouchGFX fw package (so if you migrate your project to 4.14 to 4.15 in the future for example). Another way to customize it is to create your own custom scroll bar widget : copy/paste the scrollList cpp and hpp files to new ones called MyOwnScrollList.cpp/hpp that you set in the gui/common folder for example.

/Romain

Wrend.1
Wrend.1Author
Associate III
September 23, 2020

Thanks for your advice.

I try the first Solution you give.

I put a ScrollList in a scrollableContainer. And the code like below.

//in Constructor
scrollList1.setNumberOfItems(6);
scrollList1.setHeight( (scrollList1.getDrawableSize() + 2 * scrollList1.getDrawableMargin() ) * 
scrollList1.setTouchable(false);

It worked well.But when I modify the number of item. The code like below.

//in Constructor
scrollList1.setNumberOfItems(15);
scrollList1.setHeight( (scrollList1.getDrawableSize() + 2 * scrollList1.getDrawableMargin() ) * 
scrollList1.setTouchable(false);

It did not work as I expect, it only display 6 items and the remaining 7 items didn't appear.

What causes this phenomenon?

Senior II
May 11, 2023

@Romain DIELEMAN​ it would be really nice to have a public method implemented in the ScrollList returning the current scroll offset (item number or pixel). Or directly implement the scrollbar the same way the ScrollContainer has one.

Romain DIELEMAN
ST Employee
May 17, 2023

Hi,

Could you add this in the Idea Zone of this forum ? This will help the team follow those demands and ideas :thumbs_up:.

/Romain

Senior II
May 17, 2023

I wasn't aware of the Idea Zone. Thanks!

Created Idea: Add scrollbar to Scroll List like the Scrollable Container already has

Senior II
October 10, 2023

@Yoann KLEINcan you please look into this? Seems that @Romain DIELEMAN hasn't been online for more than 3 months.

Yoann KLEIN
ST Employee
October 11, 2023

Hello @t.decker,

The idea zone is not available for the moment, since we migrated from the old forum to the new one.

I know that a team is working on it, I think the schedule release date of this idea zone is next year, but I cannot state precisely when.

Nevertheless, you are of course welcome to create a new post if you want to suggest something (new feature, improvement,..) :).

Sorry for the inconvenience.