What s the best way to get a callback when an item is 100 vi

Question

What s the best way to get a callback when an item is 100 visible in a `LazyColumn` and another callback when it becomes invisible I m at lost with the side effects confused

mattinger · Answer

What you probably want is DisposableEffect It s main body will execute when the composition is composed and the onDispose part will execute when it goes away ```DisposableEffect key1 = true Do something when it appears onDispose Do something when it goes away ``` Keep in mind though that this is approximate with LazyColumn because it will keep a few compositions on either side of the currently visible scroll region So if you first start the screen and you have 5 rows visible you ll actually have composed around 6 or 7 rows and the DisposableEffect will fire Likewise if you scroll down so rows 2 6 on the screen the dispose of row 1 probably won t have fired yet

mattinger · Answer

As for the key1 attribute if you haven t dealt much with these that tells the DisposableEffect when it should restart if recomposition happens So if you want something to only happen once despite it being recomposed you should pass a static key to DisposableEffect like the value true

galex · Answer

Hey < mattinger> thanks for helping here The issue is that I do need to trigger the callbacks only on really visible items so I am still looking how to manage that

mattinger · Answer

If you find something let me know I

mattinger · Answer

I ve been able to solve this at the top level composition on an activity or fragment i ll have to find the solution again if you need it but i haven t been able to figure this out yet at the lower level compositions I think the issue is that something like LazyColumn will actually run the composition and keep it offscreen so that it can easily be scrolled to This helps reduce jank when scrolling the same thing recyclerview does It s also a limitation we ve learned to live with when using RecyclerView as well so this is not specifically a compose issue It s more about the pattern of how and when the views are instantiated

galex · Answer

I m on it For already a full day confused

FunkyMuse · Answer

val listState = rememberLazyListState LazyColumn state = listState minimize unnecessary compositions val listHasItemsVisible by remember derivedStateOf listState firstVisibleItemIndex gt 0

FunkyMuse · Answer

I m sorry for the weird alignment I m posting from my phone hope this helps you

galex · Answer

Thanks not sure it s what I need confused What I want to a callback when I see an item at x visibility and another one when the visibility goes under that number testing with 100 just to check

galex · Answer

I ve doing the following but it doesn t work as expected The screen itself ``` LazyColumn scrollState = scrollState itemsIndexed photos index item Photo gt scrollState ItemTracker trackedIndex = index trackedItem = item onItemShown = indexShown Int itemShown Photo gt Log d TrackerList item shown $indexShown $itemShown onItemHidden = indexHidden Int itemHidden Photo gt Log d TrackerList item hidden $indexHidden $itemHidden PhotoItem photo = item onPhotoClick = onPhotoClick modifier = Modifier padding 2 dp ``` And the `ItemTracker` I am trying to build ``` Composable fun lt T gt LazyListState ItemTracker trackedIndex Int trackedItem T onItemShown indexShown Int itemShown T gt Unit onItemHidden indexHidden Int itemHidden T gt Unit val visible = remember layoutInfo visibleItemsInfo val info = layoutInfo visibleItemsInfo getOrNull trackedIndex return remember info let Log d Tracker $trackedIndex has info at visibility = $ visibilityPercent info visibilityPercent info == 100f LaunchedEffect visible Log d Tracker $trackedIndex is visible = $visible when visible true gt onItemShown trackedIndex trackedItem false gt onItemHidden trackedIndex trackedItem ``` And how it calculates the visibility ```fun LazyListState visibilityPercent info LazyListItemInfo Float val cutTop = maxOf 0 layoutInfo viewportStartOffset info offset val cutBottom = maxOf 0 info offset + info size layoutInfo viewportEndOffset return maxOf 0f 100f cutTop + cutBottom 100f info size ``` The results are weird I am def missing something here but it s late so I ll leave that for tomorrow thinking face

mattinger · Answer

Have you tried something like this to track what s visible ```val state = rememberLazyListState val flow = snapshotFlow state layoutInfo LaunchedEffect key1 = true flow collect val firstIndex = it visibleItemsInfo first index val lastIndex = it visibleItemsInfo last index ```

mattinger · Answer

Against it s not perfect but it will let you know the range of items which are at least partially visible

galex · Answer

Thanks yes I started to think about using a State list but I didn t try yet I will try that ad soon SD possible

mattinger · Answer

And you can wrap it up into a modifier nicely

mattinger · Answer

```fun Modifier trackVisibleItems state LazyListState onVisibleItems Int Int gt Unit = composed val flow = snapshotFlow state layoutInfo LaunchedEffect key1 = true flow collect val firstIndex = it visibleItemsInfo first index val lastIndex = it visibleItemsInfo last index onVisibleItems firstIndex lastIndex Modifier ```

mattinger · Answer

``` LazyColumn modifier = Modifier fillMaxSize trackVisibleItems state = state onVisibleItems = firstIndex lastIndex gt Timber tag LazyColumn d $firstIndex $lastIndex ```

galex · Answer

What I need is a Trigger when index shows up in layoutInfo visibleItemsInfo and visibility is gt than x Trigger when visibility goes under that x That s all actually perplexe

mattinger · Answer

well if you can figure that out from the visibleItemsInfo you should be golden

galex · Answer

That looks good I ll try that blush

mattinger · Answer

Let me know what you find it could be a very useful tool in the toolbar I haven t really looked what else is in the LayoutInfo but i imagine it may have what you want

galex · Answer

The whole issue is that the reported visible items are not really visible but some calculation with the viewport start and end offset should work at least I d like to think so

mattinger · Answer

``` Timber tag LazyColumn d viewport=$ it viewportStartOffset $ it viewportEndOffset it visibleItemsInfo forEach Timber tag LazyColumn d index=$ it index offset=$ it offset ```

mattinger · Answer

i m able to get this far and i m getting a viewport of 0 1977

mattinger · Answer

and then some offsets like this

mattinger · Answer

```2022 02 07 01 16 07 149 7018 7018 com example myapplication D LazyColumn index=31 offset=1829 2022 02 07 01 16 07 149 7018 7018 com example myapplication D LazyColumn index=32 offset=1888 2022 02 07 01 16 07 149 7018 7018 com example myapplication D LazyColumn index=33 offset=1947 2```

mattinger · Answer

There is a size field too that might have what you want

galex · Answer

Yup can t wait to sit in front of my computer and find a solution for this

mattinger · Answer

```fun Modifier trackVisibleItems state LazyListState onVisibleItems Int Int gt Unit = composed val flow = snapshotFlow state layoutInfo LaunchedEffect key1 = true flow collect layoutInfo gt Timber tag LazyColumn d viewport=$ layoutInfo viewportStartOffset $ layoutInfo viewportEndOffset layoutInfo visibleItemsInfo forEach item gt val isFullyVisible = item offset gt = layoutInfo viewportStartOffset amp amp item size + item offset lt = layoutInfo viewportEndOffset Timber tag LazyColumn d index=$ item index size=$ item size offset=$ item offset isFullyVisible=$ isFullyVisible val firstIndex = layoutInfo visibleItemsInfo first index val lastIndex = layoutInfo visibleItemsInfo last index onVisibleItems firstIndex lastIndex Modifier ```

mattinger · Answer

this should do what you want just tweak the callback to send what you want up the chain

mattinger · Answer

but this at least answers the question of when things are fully visible

galex · Answer

Looks super good +1

galex · Answer

I wonder something does it get triggered on every scroll or only when the visible items list is changed You re killing me I can t test that right now only in about 30min rolling on the floor laughing

galex · Answer

I m saying that because it might be the issue here we do need to recompute the list of fully visible items on every scroll offset not only when the visible items list is changing

galex · Answer

Maybe the snapshot Flow does that indeed

mattinger · Answer

i think i got it

mattinger · Answer

```fun Modifier trackVisibleItems state LazyListState onNewlyVisible List lt Int gt gt Unit onNewlyHidden List lt Int gt gt Unit = composed val flow = snapshotFlow state layoutInfo val visibleItemIndexes = remember mutableStateOf emptyList lt Int gt LaunchedEffect key1 = true flow collect layoutInfo gt val newVisibleItemIndexes = layoutInfo visibleItemsInfo filter item gt item offset gt = layoutInfo viewportStartOffset amp amp item size + item offset lt = layoutInfo viewportEndOffset map item gt item index val newlyVisible = newVisibleItemIndexes filter visibleItemIndexes value contains it val newlyHidden = visibleItemIndexes value filter newVisibleItemIndexes contains it if newlyVisible isNotEmpty onNewlyVisible newlyVisible if newlyHidden isNotEmpty onNewlyHidden newlyHidden visibleItemIndexes value = newVisibleItemIndexes Modifier ```

mattinger · Answer

and to answer your question whenever the scroll state changes the layoutInfo will change and a new value will appear in the flow THe trick then is to just keep track of the last list of items which were fully visible and see what was added and subtracted I m sure there s probably better operators than that filter maybe the minus operator or something but this does the trick

mattinger · Answer

```2022 02 07 01 49 50 635 8329 8329 com example myapplication D LazyColumn newlyHidden= 0 2022 02 07 01 49 50 669 8329 8329 com example myapplication D LazyColumn newlyVisible= 33 2022 02 07 01 49 50 746 8329 8329 com example myapplication D LazyColumn newlyHidden= 1 2022 02 07 01 49 50 827 8329 8329 com example myapplication D LazyColumn newlyVisible= 34 2022 02 07 01 49 51 014 8329 8329 com example myapplication D LazyColumn newlyHidden= 2 2022 02 07 01 49 51 127 8329 8329 com example myapplication D LazyColumn newlyVisible= 35 2022 02 07 01 49 51 309 8329 8329 com example myapplication D LazyColumn newlyHidden= 3 2022 02 07 01 49 51 376 8329 8329 com example myapplication D LazyColumn newlyVisible= 36 2022 02 07 01 49 51 441 8329 8329 com example myapplication D LazyColumn newlyHidden= 4 2022 02 07 01 49 51 548 8329 8329 com example myapplication D LazyColumn newlyVisible= 37 2022 02 07 01 49 51 578 8329 8329 com example myapplication D LazyColumn newlyHidden= 5 2022 02 07 01 49 51 702 8329 8329 com example myapplication D LazyColumn newlyVisible= 38 2022 02 07 01 49 51 743 8329 8329 com example myapplication D LazyColumn newlyHidden= 6 2022 02 07 01 49 51 759 8329 8329 com example myapplication D LazyColumn newlyVisible= 39 2022 02 07 01 49 51 818 8329 8329 com example myapplication D LazyColumn newlyHidden= 7 2022 02 07 01 49 51 870 8329 8329 com example myapplication D LazyColumn newlyVisible= 40 ```

galex · Answer

Ok I m here on the computer finally testing that smile

galex · Answer

< mattinger> you re golden man that s it smile

galex · Answer

Thank you so much

galex · Answer

Ah there s one missing piece Upon leaving the screen as all the visible items are hidden I d like to report those still visible as hidden I guess replacing `LaunchedEffect` with `DisposableEffect` with a callback call in `onDispose` should work right

galex · Answer

It works < mattinger> smile ```fun Modifier trackVisibleItems state LazyListState scope CoroutineScope onItemsVisible List lt Int gt gt Unit onItemsHidden List lt Int gt gt Unit = composed val flow = snapshotFlow state layoutInfo val visibleItemIndexes = remember mutableStateOf emptyList lt Int gt DisposableEffect key1 = true scope launch flow collect layoutInfo gt val newVisibleItemIndexes = layoutInfo visibleItemsInfo filter item gt item offset gt = layoutInfo viewportStartOffset amp amp item size + item offset lt = layoutInfo viewportEndOffset map item gt item index val newlyVisible = newVisibleItemIndexes filter visibleItemIndexes value contains it val newlyHidden = visibleItemIndexes value filter newVisibleItemIndexes contains it if newlyVisible isNotEmpty onItemsVisible newlyVisible if newlyHidden isNotEmpty onItemsHidden newlyHidden visibleItemIndexes value = newVisibleItemIndexes onDispose onItemsHidden visibleItemIndexes value Modifier ```