scroll lags when trying to listen to scroll position in android jetpack compose

Question

I'm using Jetpack compose in my project. I have a scrollable column. I want to show a column as the top bar when the user scrolls the screen. For this purpose, I listen to the state of the scroll in this way:

val scrollState = rememberScrollState()
    Box {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .verticalScroll(scrollState)
        ) {
          ...
          ...
          ...
        }

        TopBar(scrollOffset = (scrollState.value * 0.1))
    }

and the TopBar is another composable:

@Composable
fun HiddenTopBar(scrollOffset: Double, onSearchListener: () -> Unit) {
    val offset = if (-50 + scrollOffset < 0) (-50 + scrollOffset).dp else 0.dp
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)
            .offset(y = offset)
            .background(MaterialTheme.colors.secondary)
            .padding(vertical = MaterialTheme.space.small)
    ) {
        ...
        ...
        ...
    }
}

The problem is that due to constant recomposition, the scroll lags, and it is not smooth. Is there any way I can implement it more efficiently?

Answer 1

Yes, it's because of constant recomposition in performance documentation .

If you were checking a state derived from scroll state such as if it's scrolled you could go for derivedState but you need it on each change, nestedScrollConnection might help i guess.

This sample might help you how to implement it

 @Composable
private fun NestedScrollExample() {

    val density = LocalDensity.current
    val statusBarTop = WindowInsets.statusBars.getTop(density)


    val toolbarHeight = 100.dp
    val toolbarHeightPx = with(LocalDensity.current) { toolbarHeight.roundToPx().toFloat() }

    // our offset to collapse toolbar
    val toolbarOffsetHeightPx = remember { mutableStateOf(0f) }

    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                val delta = available.y
                val newOffset = toolbarOffsetHeightPx.value + delta
                toolbarOffsetHeightPx.value =
                    newOffset.coerceIn(-(2 * statusBarTop + toolbarHeightPx), 0f)
                return Offset.Zero
            }
        }
    }
    Box(
        Modifier
            .fillMaxSize()
            // attach as a parent to the nested scroll system
            .nestedScroll(nestedScrollConnection)
    ) {
        Column(
            modifier = Modifier
                .padding(
                    PaddingValues(
                        top = toolbarHeight + 8.dp,
                        start = 8.dp,
                        end = 8.dp,
                        bottom = 8.dp
                    )
                )
                .verticalScroll(rememberScrollState())
            ,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            Box(modifier = Modifier
                .fillMaxWidth()
                .height(2000.dp))
        }
        TopAppBar(modifier = Modifier
            .height(toolbarHeight)
            .offset { IntOffset(x = 0, y = toolbarOffsetHeightPx.value.roundToInt()) },
            elevation = 2.dp,
            backgroundColor = Color.White,
            title = { Text("toolbar offset is ${toolbarOffsetHeightPx.value}") })
    }
}