Search code examples
androidandroid-jetpack-composeandroid-jetpack-compose-material3

TopAppBar with scrollBehavior glitching with HorizontalPager

I have a Scaffold with a TopAppBar and a HorizontalPager. I want the TopAppBar to collapse when the content in the HorizontalPager is scrolled vertically.

Have a look at my code:

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun MainScreen() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text("Lagging Demonstration") },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->

        val loremIpsum = LoremIpsum(1000)
        val pagerState = rememberPagerState(pageCount = { 3 })

        HorizontalPager(
            modifier = Modifier.padding(innerPadding),
            state = pagerState
        ) { page ->
            Column(
                modifier = Modifier.verticalScroll(rememberScrollState())
            ) {
                Text(
                    text = loremIpsum.values.joinToString(),
                    modifier = Modifier.fillMaxWidth()
                )
            }
        }
    }
}

With this code, I experience that the TopAppBar is jumping around weirdly while scrolling upwards:

Screenrecording

My dependencies are defined as follows:

implementation "androidx.compose.ui:ui:1.6.2'
implementation 'androidx.compose.material3:material3:1.2.0'
implementation 'androidx.activity:activity-compose:1.8.2'

I found this issue on the Google Issue Tracker where they suggested to apply the nestedScroll(scrollBehavior.nestedScrollConnection) Modifier to the Column, however that did not fix it in my case.

Is there any workaround to resolve this behavior?

If you were able to reproduce the issue, please consider upvoting the issue on the Google Issue Tracker.

Solution

  • This problem was resolved with Compose Version 1.7 (beta02).
    If you update your dependencies accordingly, it will work,.