1

I have a fully functional list, containing a complex item... a list of complex Composables, that is. I use LazyColumn for the job, but I then wished to allow the user to long-press on an item and then change its content and background.

Using animateColorAsState(), the background transitions smoothly, but since I was using Layout to render each item, because it depends on an entire unique positioning algorithm, I did something like this to animate the changes:

var selected: Boolean = ... // Consider this a state-holder, it will correctly change on long-pressing

Layout(
 content = {
    // I render here based on the state.
    if (selected){ Render1() }
    else Render2()
 }
){
 // Using the same for positioning here
 layout(...){
   if(selected)
     positionRender1()
   else positionRender2()
 }
}

This does seem to work as expected here, but the question is, which is better for performance - the one above or the one below?. Also, an explanation along with the answer would be appreciated.

var selected: Boolean = ... // Consider this a state-holder, it will correctly change on long-pressing

AnimatedContent(targetState = selected){
  if(it)
    Layout( content = { Render1() } ){
     layout(...){
       positionRender1()
     }
    }
  else
    Layout( content = { Render2() } ){
      layout(...){
        positionRender2()
      }
    }
  }
}
Richard Onslow Roper
  • 5,477
  • 2
  • 11
  • 42
  • Generally if you wanna have a smooth animation, you need to use it on the same view. With your pseudo-code it's hard to understand wether you can do that or not, there's a new thing added in recent alphas, which doesn't have documentation so far, that may help you - `rememberSaveableStateHolder`. You can check out how it's used in [this project](https://github.com/zach-klippenstein/compose-fractal-nav/tree/main/fractalnav) - maybe be the thing you're looking for. – Phil Dukhov May 10 '22 at 16:54
  • Yes it actually turned out that the list had accumulated a rather large number of items in it, which caused the lag. It went away as soon as I cleared the data, but it shouldn't be the case should it? I mean I am using `LazyColumn` after all. Is there any official reference that you know of that says what kind of data `LazyColumn`s can efficiently handle? Do let know if this should be a separate thread, I didn't know how to phrase the question so I typed it here. Thanks Pylyp! – Richard Onslow Roper May 10 '22 at 18:43
  • Also, I flipped the question, if you could have a look at that, that'd be nice. – Richard Onslow Roper May 10 '22 at 19:10
  • lets say your list can display 10 items at a time so you have lags with lets say 1000 items but don't have lags with 20 items? – Phil Dukhov May 11 '22 at 03:20
  • as to performance - the first block should only display one view at a time, while `AnimatedContent` is gonna display two copies during animation, so it'll take more resources - but this is why it can animate between different layouts. – Phil Dukhov May 11 '22 at 03:23
  • Thank you so much for the info. In ref to your first reply here, yes - if the list shows 10 items, it won't lag for 20, but will practically freeze for a thousand. The size should definitely not make a difference though, since that is the entire point of using a `Lazy` Scroller. We shouldn't even have to deal with these questions, that literally is the one sole purpose of using `Lazy` Scrollers. – Richard Onslow Roper May 11 '22 at 11:37
  • provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) – Phil Dukhov May 11 '22 at 12:12

0 Answers0