I have a List of Movies (list of movies could be i...

# compose-desktop

[Colton Idle]

I have a List of Movies (list of movies could be in the 10000s) and each movie has a reviews. There can be hundreds of reviews left on a movie. I know its bad UX/design, but I want to show a list of Movies with ALL of the reviews listed in the same movie card.

I'm not sure how to build this, because in the "android" world I would make the Movie List a RecyclerView, and each review section in the MovieCard would be a recyclerView too.

But compose doesn't let you do that.

LazyColumn{
    items(movies){
        MovieCard(it)
    }
}

MovieCard(movie: Movie){
    Text(movie.name)
    LazyColumn{
        items(movie.reviews){
            ReviewItem(it)
        }
    }
}

You get an error like this

java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like ScrollableContainer and LazyColumn is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items().

Problem is solved if the LazyColumn in MovieCard just become a Column and I iterate with a for loop. BUT I want that inner loop to be performant and handle being super long. So I don't want a "dumb" Column. I need something that will recycle those ReviewItems.

[jim]

Take a look at Modifier.nestedScroll

[Colton Idle]

@jim and that would just go on the inner Column right? I understand that, but I guess my question is does the inner Column/ScrollableColumn become "lazy" just because it's used in a LazyColumn parent?

[jim]

No, a child should never behave differently just because of the parent it happens to be placed within.

[Colton Idle]

Bah. Alright. Back to square one though. How do I make sure that the inner column stays performant (like the outer LazyColum)?

[Kirill Grouchnikov]

Maybe go back to the "I know it's bad UX / design" part

[Colton Idle]

There have to be some designs where a LazyColumn inside of a LazyColumn would be applicable right? I just don't see any way of doing that in compose and I don't know if it's a missing "feature" or if it's possible and I'm just not sure how to do it.

[Andrey Kulikov]

LazyColumn{
    movies.forEach { movie ->
         item {
              Text(movie.name)
         }
         items(movie.reviews){
             ReviewItem(it)
         }
    }
}

[Colton Idle]

@Andrey Kulikov thanks. But the Movie itself is a card and inside of the card there should be Text and under the text should be a list of ReviewItems.

Still the only thing I can think of is:

LazyColumn{
    items(movies){
        MovieCard(it)
    }
}
MovieCard(movie: Movie){
    Text(movie.name)
    LazyColumn{
        items(movie.reviews){
            ReviewItem(it)
        }
    }
}

[Colton Idle]

@Andrey Kulikov don't mean to bother again as I'm sure I'll figure it out. But do you see my point in how your sample code doesn't necessarily line up for what I'm trying to do? It's almost as if my MovieCard uses "slot api" where I'm trying to pass in a LazyColumn into that.

[Andrey Kulikov]

yes, unfortunately there is no good solution at least yet when you want to combine multiple elements into something like card. it will only work nicely if you can split the card drawing into something like item { CardHeader() } items { … } item { CardFooter() } so it visually looks like card, but it is not that easy with elevations. in you can’t split them then your whole card should be a one item with just Column instead of LazyColumn inside and you kinda loosing the laziness. note that in your example where you said that in Android you usually just wrap RecyclerView inside RecyclerView it was working in pretty much the same way: the inner RecyclerView was measured with the infinity constraints which means all the elements were created and added straightaway with loosing the whole recycling mechanism. the same issue is happening in Compose, but we decided to throw an exception when we detect such case so users are aware that they do something inefficiently

[Colton Idle]

Interesting. In typical android I have done RV inside of an RV a bunch of time. Sometimes the inner RV is vertical (to enable this kind of list within a list) and sometimes it's horizontal (in order to make a carousel. like airbnb app for example).

I had NO idea that RV inside of an RV was basically not really working as I intended (👀 "loosing the whole recycling mechanism"). I do like that COmpose just throws an exception.

This would be a cool problem to solve, or prodvide guidance around though in the docs. I feel like for now we might just go for a LazyColumn and then internally in the card we just use a column.

@Andrey Kulikov thank you so much again. My team is eager to move to compose to really simplify RVs, carousels, etc. and this use case is actually something we hit a lot of and its nice to know the limitations of compose. Really appreciate it

[Andrey Kulikov]

Sorry, I might confused you again. Nesting RecyclerViews scrolling in different directions will work fine. The same with nesting LazyRow inside LazyColumn. But when you nest vertical RecyclerViews inside vertical RecyclerViews the inner one has no size limits anymore and can’t recycle within its viewport as it will basically just create views for all the children and wrap them

[Colton Idle]

@Andrey Kulikov that makes sense to me.

So you can't do LazyCol inside of LazyCol because LazyCol is essentially a no size limit and so it can't recycle it's viewport.

Crazy idea: I could perf test a LazyCol containing a Col with a foreach internally (Basically movie cards will be lazy but reviews INSIDE of a card would not be lazy)

AND I could perf test the reverse. Have a Col of Movies, and the reviews inside of movies can be a LazyCol.

I could perf test those two and see which performs better?

[Andrey Kulikov]

the second option will not really work as just Column is not scrollable. only reviews will scroll

[Colton Idle]

@Andrey Kulikov sorry. when I say Column I mean Column with scrollable modifier enabled or just using ScrollableColumn (but I think that was deprecated)

[Andrey Kulikov]

yes, I deprecated it recently. if you try to nest ScrollableColumn and LazyColumn they will crash with the same exception for the same reason. when something is scrollable it means their content is measured with infinity constraints(maximum height)

[Colton Idle]

@Andrey Kulikov thanks. this all is making a lot more sense to me. appreciate your help! maybe i can end up trying the movie details in the top half of a card, and having the reviews in a bottom half of a card in order to give the illussion of one full card.

Thank you!

[Johan Reitan]

Did you experiment more with this? I have the same use case, and I've had it in several projects in the past as well. I have successfully implemented this with RV before with header, content and footer, but it seems elevation works a bit differently in Compose than it did in the View system. I tried the same in Compose, like @Andrey Kulikov suggested, but this is what I get, which of course has elevation issues:

[Johan Reitan]

This is just `Card`s with different `shape`s depending on their positions