How to implement StaggeredGridLayout?

[RavioliWonton]

Hi, first of all thank you for your tremendous job on this library. I have a problem here, my android tv project contain a page that fixed number channel logos arranged in grid on the right side, and left side have a livesteam view same height as grid. When user select channel right side, left side big view should show corresponding channel livestream. something like this:

I want implement it using this great library, but after read through the doc and serveal failed attempt, I still can't make one thing out: determine how to arrange this layout. If I using one view to rule them all, I cannot set the left view size and postion that they can look like above, because doc said that I cannot change the layout manager, and existing api couldn't arrange seprate viewholder postion.If I using one livestream view and one recyclerview for the grid, then I can't make the whole screen scrollable and make focus consistant because I cannot using RecyclerView inside NestedScrollView or other ScrollView (it's not best practise, unless heavilly modify the source code).

So could you please kindly help me figure this out or provide some api that I can use the staggered grid layout? Thank you.

[rubensousa]

I would recommend 2 different components: one big component for the stream and a separate one for the grid. You can use constraint layout to constrain each component to 50% of the screen width or something like that.

This library was not built for use cases like these unfortunately.

I recommend this layout structure for this case if you need scrollable content:

- Vertical DpadRecyclerView
   - CustomHorizontalLayout with ConstraintLayout
       - LiveStreamComponent
       - GridComponent (DpadRecyclerView)

Please let me know if this was useful

[RavioliWonton]

Thank you for your help, I will give it a try.

[RavioliWonton]

It works like a charm! Thank you for your great help! I have two more question:

1. How can I disable the default selection? I want the grid have no choice at first until user turn their focus on it.
2. I find alignment function part of this library (and the explaination of the documentation) a little bit incomprehensible, my understanding is that Child Alignment is to determine where are the anchors of the viewholders, but what about Parent Alignment? Is it define the anchor of the whole list (or grid) to alignment with the parent view (which means DpadRecyclerView itself) ? If so, why should I not simply add a header or footer to achieve the same goal (as far as I concerned)? Also I have a little confuse about the api arguments, what does includingPadding and alignToBaseline mean? There are no documentation about this and I read through the source code still cannot figure it out.

Please forgive my bad English, hope hearing from you soon.

[rubensousa]

Hi. I'm glad I could help.

Regarding your points:

How can I disable the default selection? I want the grid have no choice at first until user turn their focus on it.

Currently, this is not possible. You can ignore doing something on selection changes without focus by checking if the recyclerview.hasFocus is false, if that's what you're looking for.

but what about Parent Alignment?

Please check the recipes here: https://rubensousa.github.io/DpadRecyclerView/recipes/alignment/

Let me know if these docs are not enough and I will try to add them in the near future.

[RavioliWonton]

Thank you, my problems are solved at all!