Hi. I’m trying to implement a collapsing toolbar b...

# compose

[Mohammad Sianaki]

Hi. I’m trying to implement a collapsing toolbar but my code is so laggy, and it causes recomposition of screen body while scrolling screen.

@Composable
fun Demo() {
    val scroll = rememberScrollState(0)
    Column(modifier = Modifier.fillMaxSize()) {
        CollapsingToolbar(scroll = scroll.value, title = "Screen Title")
        Body(scroll)
    }
}


@Composable
fun Body(scroll: ScrollState) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scroll)
    ) {
        repeat(5) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .background(Color.Red)
            )
        }
    }
}

@Composable
fun CollapsingToolbar(
    scroll: Int,
    title: String,
    onNavigateUpClicked: () -> Unit = {},
) {
    val collapseRange = with(LocalDensity.current) {
        (150.dp - 56.dp).toPx()
    }
    val collapseFraction = (scroll / collapseRange).coerceIn(0f, 1f)
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .heightIn(min = 56.dp)
            .wrapContentHeight()
            .background(Color.Green),
    ) {
        IconButton(
            onClick = onNavigateUpClicked,
            modifier = Modifier
                .padding(start = 8.dp, top = 8.dp)
                .background(Color.Cyan)
                .align(Alignment.TopStart)

        ) {
            Icon(
                imageVector = Icons.Default.ArrowBack,
                contentDescription = null,
                modifier = Modifier.background(Color.Red)
            )
        }
        Text(
            text = title,
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .padding(start = 24.dp, top = 150.dp * (1 - collapseFraction))
                .align(Alignment.CenterStart)
                .offset(x = 32.dp * collapseFraction)
        )
    }
}

[Jan Bína]

Have a look at the AppBar implementation from material3 and take inspiration from there:
https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]l3/src/commonMain/kotlin/androidx/compose/material3/AppBar.kt

[Zach Klippenstein (he/him) [MOD]]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1614355175421600

[Zach Klippenstein (he/him) [MOD]]

You probably want to use nested scrolling modifiers for this.