Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 
nathanjosiah
Level 7

Infinite scroll on RowList with only a few items

I am using a RowList in a centered, single row configuration carousel as was previously available by default:


<RowList
      id="CategoryRow"
      itemComponentName="Item"
      itemSize="[1920,250]"
      rowHeights="[250]"
      rowItemSize="[[444,250]]"
      rowItemSpacing="[[50,20]]"
      numRows="1"
      rowLabelOffset="[[0,15]]"
      rowLabelFont="font:LargeBoldSystemFont"
      rowLabelColor="0x333333"
      rowFocusAnimationStyle="fixedFocusWrap"
      showRowLabel="[false]"
      focusXOffset="[515]"
      focusBitmapUri="pkg:/images/reticle1.png"
      translation="[0,400]"/>


And if I have plenty of items in the list, it displays fine and loops the content. However, with only a few items in it, the list isn't centered, nor doe it loop so its right aligned, fixed on the screen, and the reticle actually moves when selecting items. How can I keep the behavior consistent regardless of how many items are in it?
0 Kudos
8 Replies
destruk
Level 10

Re: Infinite scroll on RowList with only a few items

You could pad the list.
0 Kudos
nathanjosiah
Level 7

Re: Infinite scroll on RowList with only a few items

"destruk" wrote:
You could pad the list.

What do you mean by pad? If you mean to add in extra duplicate items, I would except that affects the row counter and would show more items than are actually available.
0 Kudos
joetesta
Level 10

Re: Infinite scroll on RowList with only a few items

try altering the rowlist's itemSize's first value (ie the width) In your brs once the content is set, to something based on a function of either a boundingRect().width if possible or more likely, a computation of the number of items X the width of each item + padding between items X (number of items -1).
aspiring
0 Kudos
destruk
Level 10

Re: Infinite scroll on RowList with only a few items

"nathanjosiah" wrote:
"destruk" wrote:
You could pad the list.

What do you mean by pad? If you mean to add in extra duplicate items, I would except that affects the row counter and would show more items than are actually available.

What I mean is - duplicate the existing items in the set of content nodes to make the set of content nodes bigger - if you have a row of 7 items required to scroll, and you have those seven items on the screen at one time, the highlight box will move and they won't scroll.  But if you double the existing 7 in order, then you have 14 items in the list and it will scroll like the other rows.
Joe's suggestion to change the item width for each one in the row would just look weird to me if you have one row with 2 items in it and other rows nearby with 8+, but it should work as well to do that.
0 Kudos
nathanjosiah
Level 7

Re: Infinite scroll on RowList with only a few items

"destruk" wrote:
"nathanjosiah" wrote:
"destruk" wrote:
You could pad the list.

What do you mean by pad? If you mean to add in extra duplicate items, I would except that affects the row counter and would show more items than are actually available.

What I mean is - duplicate the existing items in the set of content nodes to make the set of content nodes bigger - if you have a row of 7 items required to scroll, and you have those seven items on the screen at one time, the highlight box will move and they won't scroll.  But if you double the existing 7 in order, then you have 14 items in the list and it will scroll like the other rows.
Joe's suggestion to change the item width for each one in the row would just look weird to me if you have one row with 2 items in it and other rows nearby with 8+, but it should work as well to do that.

Ok, I understand what you are saying now. The problem I have with that approach is the row counter will be wrong. If there are 7 unique to display and I inject a duplicate 7, the row counter will show 14 total items (e.g. 10/14) when there aren't really that many. Also, this seems very hacky. Seems like there should be an option to enable the behavior that already exists with more items.
0 Kudos
nathanjosiah
Level 7

Re: Infinite scroll on RowList with only a few items

"joetesta" wrote:
try altering the rowlist's itemSize's first value (ie the width) In your brs once the content is set, to something based on a function of either a boundingRect().width if possible or more likely, a computation of the number of items X the width of each item + padding between items X (number of items -1).

I think I may end up with a version of this. I think I will need to center the list using positioning. I still feel like that approach is hacky though because even if the list is centered, the reticle would still start on the first, left-aligned, item. I don't understand why this platform is so incredibly unintuitive and hard to work with.
0 Kudos
destruk
Level 10

Re: Infinite scroll on RowList with only a few items

Some roku developers create their own gridscreen components from the ground up - but it's not an easy process (can take months to develop an entirely new component from scratch).
0 Kudos
joetesta
Level 10

Re: Infinite scroll on RowList with only a few items

itemSize is the size of the row, not the items in the row.  I agree it will look weird if it's centered on screen adjacent other rows that contain a full screen width of items.
As far as Roku being hard to work with, yeah.  I've known more than one developer to flee the platform completely!  Some of us like a challenge and / or we are masochists?
aspiring
0 Kudos