Roku Developer Program

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

How to create a vertical sliding page composed by different Components?

Hi,
I've been trying to find some examples or documentation on how to create a vertical page with different components. For example:

- At the very top a Highlight poster with a CTA button for more details
- Just after 2x horizontal carousels (small 16:9 square, with a poster image, as what we see commonly in other changels)
- Followed by a 1x horizontal carousel that has a bigger Height but similar to the previous carousel

I thought that I'd have to put it as children of a LayoutGroup but didn't work as I expected, so I'm clueless:

  <children>
    <LayoutGroup
      layoutDirection="vert"
      vertAlignment="top"
      itemSpacings="[10, 10]"
      addItemSpacingAfterChild="true">
      <HighlightBigPosterSingle id="filmHighlight"/>
      <CarouselMultiThumbnails id="filmCarousel"/>
      <CarouselMultiThumbnails id="filmCarousel"/>
      <HighlightMultiBigPosterCarousel id="filmHighlight"/>
    </LayoutGroup>
  </children>


Basically, I want to navigate the interface up and down, where each Component is either a MarkupGrid that lets you navigate left and right, a Component that is a single Poster, a Component that is a Carousel of Posters, etc. Does this make sense? The Netflix interface is a good example, some times you have small carousels, other times bigger poster carousels and stuff like that.

I've also spent quite a lot of time trying to figure this out looking around but haven't found any details.

0 Kudos
2 Replies
norcaljohnny
Level 11

Re: How to create a vertical sliding page composed by different Components?

Do you still need help with this or rather following this post still?

On a side note, never use the same id on different components.

0 Kudos
hldrd
Level 7

Re: How to create a vertical sliding page composed by different Components?

I end up creating a custom component that takes child components dynamically, and then used the animation feature to move the viewport to the focused component.

Thanks for checking!

0 Kudos