Does anyone know if it is possible to get the percentage or the current progress of the scroll in a ...

# compose-android

[Sergio Moral]

Does anyone know if it is possible to get the percentage or the current progress of the scroll in a lazy column?

I want to animate a header to collapse while I am scrolling down and expand when I am scrolling up but I don’t know exactly how to achieve it 🤷‍♂️

[Chrimaeon]

Check out https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListState

[Sergio Moral]

I have checked and I have used firstVisibleItemIndex and firstVisibleItemScrollOffset and now I have the value of not only the first item visible but also the offset of the entire list, but do you how could I determine the animation progress depending on these values?

[Sergio Moral]

Let me try to create an animation in this way that could be more illustrative because it is pretty complex to explain 😭

[Chrimaeon]

You want something like this, right? https://developer.android.com/jetpack/compose/components/app-bars#medium

[Albert Chang]

You can't, due to the "lazy" nature. Off-screen items are not measured in lazy lists.

[Joel Denke]

https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListItemInfo
Check this one, accessible through lazyListState.layoutInfo

[Joel Denke]

Something like this could also work:

val scrollState = rememberLazyListState()
    val firstVisibleItemIndex = scrollState.firstVisibleItemIndex
    val visibleItemsCount = scrollState.layoutInfo.visibleItemsInfo.size
    val percent = (firstVisibleItemIndex / (itemsCount - visibleItemsCount).toFloat()) * 100f

[Albert Chang]

That estimating method is good enough for use cases like showing scroll bar but is definitely not for animating as it won't be smooth at all, unless all the items have the same height.

[Timo Drick]

Do you really need the exact percentage for your use case?
I do have a solution where i just use this code to show logo and also a chime to indicate that scrolling is possible:

val logoVisible by remember {
    derivedStateOf {
        listState.firstVisibleItemIndex == 0 && listState.firstVisibleItemScrollOffset < offsetThreshold
    }
}
val scrollDownAvailable by remember {
    derivedStateOf {
        listState.canScrollForward
    }
}

Screen_recording_20231221_102817.mp4

[Sergio Moral]

It is pretty similar but this is my situation. Meanwhile I am scrolling, this is the state of the animation and when I am scrolling up, then is the same animation but in reverse. Do you think I could achieve it using the same solution @Timo Drick ?

Grabación de pantalla 2023-12-21 a las 10.33.37.MOV

[Timo Drick]

I used an AnimatedVisibility so it will not animate in sync with the scroll.
But maybe it is engough for you to calculate the current visible pixels and use this for you animation. Or do you really want it to finish when it is scrolled down completely?

[Timo Drick]

If you list is short than of course you could just use a column and a scroll modifier. There you are able to get the exact percentage.

[Sergio Moral]

The list is long so is not only when I finish the scroll down completely, it should be just synchronize with the scroll, that’s why I think it would be a good solution to get the % of the scroll and then synchronize the animation with this %

[Sergio Moral]

Maybe there are another way just linking the scroll and then make the animation with that progress ( I don’t know exactly how but maybe I could try 😂 )

[Timo Drick]

Unfortunately this is not possible as @Albert Chang already mentioned. Because of the measuring of the cells only happens when they are visible. This is the whole point of lazy lists.
Of course you could track the pixel already scrolled. But you do not know how many will come until you reach the end of the list.

[Sergio Moral]

In that case I think I should modify this animation and use animation visibility as you do in your sample

[Timo Drick]

I placed the logo and shadows outside of the LazyColumn. So they do not scroll. It is just the enter and exit animation that looks like it is scrolled away.

[Sergio Moral]

Ok, I will try it, thanks!!

[Timo Drick]

AnimatedVisibility(
    visible = logoVisible,
    enter = slideInVertically(
        animationSpec = tween(1000),
        initialOffsetY = { -it }
    ) + fadeIn(tween(1000)),
    exit = slideOutVertically(
        animationSpec = tween(1000),
        targetOffsetY = { -it / 1 }
    ) + fadeOut(tween(1000))
) {
    StrazoonLogo()
}

[Timo Drick]

Of course you want maybe slideInHorzintally

[Sergio Moral]

I have found a solution that may help me. I need to read the post in more detail but it seems promising

https://medium.com/kotlin-and-kotlin-for-android/collapsing-toolbar-in-jetpack-compose-lazycolumn-version-f1b0a7924ffe

[Timo Drick]

Would be nice when you share your solution if you find it there.

[Sergio Moral]

Sure!!

[dewildte]

Agreed, please share the solution if you find it.
Also do you intended to solve this for paginated dat too?
I would be interested in that too.

I have not thought to much about this issue but my initial reaction to the problem was thinking about what I would require to know in order to solve the problem.

First, what is the number we need to know here?
A scroll bar is basically a point between two other points.
So we might need to know:
• What does the scroll bar represent semantically & mathematically?
• How many items do we have in total?
• Do the items have the same size?
• How far the first visible index is from the first item index?
• How far the last visible index is from the last item index?
• What does the middle point of the scroll handle represent semantically & mathematically?

[dewildte]

Also asking GhatGPT for help understanding the problem might help.
Provided you have access to that tool.