Performance of LazyColumn with LazyRows inside it

Question

I have a lazy column with lazy rows inside it, like in the image:

I am testing on a 2017 middle-quality phone with Android 9. Release build with R8 enabled.

Scroll performance in rows are pretty good, but in column performance is very low. I am using simplest composables, nothing special.

LazyColumn { 
     items(
          items = rows,
          key = { it.id },
          contentType = { it.type}
     ) { 
          LazyRow {
               items(videos) {
                    Video()
               }
          }
     }
 } 

update: this is what Profile GPU rendering speed looks like:

update: this is what profiler system trace looks like. I can't figure out what is causing this huge lag:

update: I used a simple Text instead of Video and still performance is very very poor. I created a sample project.

Robins

Any solution on this. I am also facing similar issue. #75835553 – Alliteration

@Alliteration not yet. – Robins

Answer 1

I had the same issue when playing with it months ago. I see some coworkers used ImmutableList for the items though and had better luck with that. Might be worth a try - the issue I had is that there was a ton of recomposition happening as well so make sure that is good with a profiler

Siderostat

I have to ask a question, why not use a recyclerview for all lists? I think jetpack compose is not suitable for those tasks imho. – Millett

It’s much nicer to work with in terms of ease of use, flexibility, and extending product features - just have to be careful with the performance here – Siderostat

@kuck1 tried ImmutableList but still list is very laggy. – Robins

Could you provide more details of what data is in rows? I'm wondering if something in it could be changing for instance causing a lot of recomposition. Another thing to try is use less data to understand what is happening. Like what if you have 5 rows and 3 items in each - does it work then? Then you can try tracing the performance when it gets to a size that is beginning to break: developer.android.com/jetpack/compose/performance/tracing Also: developer.android.com/jetpack/compose/performance/… @Uriel may be right if you need to render too much – Siderostat

Depending on your size needs, another thing I found helped was either using a non lazy Col with lazy rows, or vice versa to make scrolling smooth but start up slightly worse – Siderostat

Answer 2

In my opinion, the sample project with 1000x1000 items seems like overkill. I suggest incorporating pagination as a solution.

Here's an example of pagination in jetpack compose:

https://github.com/MrNtlu/JetpackCompose-Pagination

---

Also might be useful to review official documents:

Paging library overview

androidx.paging.compose

Pectinate

I think you're mistaking the purpose of paging library. I think it's goal is to gradually load "data", not ui. – Robins

Answer 3

I also encountered this issue, finally I rewrite it by traditional view

Hackbut

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Othello