Jetpack Compose FAB hide on scroll behavior

In the XML-based UI, FAB had a field to override the custom scroll behavior. Since there is no such parameter in the function in Compose FAB implementation, it became a little unclear how to implement the hide on scroll behavior.

I use Scaffold with the nestedScroll modifier in order for my СollapsingAppBar to work. I assumed at first that it was necessary to create an object inherited from the NestedScrollConnection interface. And also connect it with the nestedScroll modifier to Scaffold. But unfortunately, as I understand it, it is impossible to connect several scrollBehavior objects to one Scaffold at once.

val scrollBehavior = TopAppBarScrollBehavior()
val scrollBehavior1 = FloatingActionButtonScrollBehavior()

    modifier = Modifier
        //this one won't work


  • If someone is interested in how to implement this behavior, I found this solution:

    fun AnimatedFloatingActionButton(
        listState: LazyListState
    ) {
            visible = listState.isScrollingUp().value,
            enter = //TODO: your enter animation,
            exit = //TODO: your exit animation
        ) {

    You only need to create a LazyListState inside your Composable parent, and pass it inside the AnimatedFloatingActionButton. And also define an extension function for LazyListState.

    fun LazyListState.isScrollingUp(): State<Boolean> {
        return produceState(initialValue = true) {
            var lastIndex = 0
            var lastScroll = Int.MAX_VALUE
            snapshotFlow {
                firstVisibleItemIndex to firstVisibleItemScrollOffset
            }.collect { (currentIndex, currentScroll) ->
                if (currentIndex != lastIndex || currentScroll != lastScroll) {
                    value = currentIndex < lastIndex ||
                            (currentIndex == lastIndex && currentScroll < lastScroll)
                    lastIndex = currentIndex
                    lastScroll = currentScroll