Unwanted space while scrolling

[anil-agridroid]

Expected:

Currently:

scroll_issue.mp4

Implementation

@OptIn(ExperimentalPagerApi::class)
@Composable
internal fun MainScreen() {
    val state = rememberCollapsingToolbarScaffoldState()

    val tabData = listOf(
        "MUSIC" to Icons.Filled.Home,
        "MARKET" to Icons.Filled.ShoppingCart
    )
    val pagerState = rememberPagerState(
        pageCount = tabData.size,
        initialOffscreenLimit = 1,
        infiniteLoop = false,
        initialPage = 0,
    )

    val tabIndex = pagerState.currentPage
    val coroutineScope = rememberCoroutineScope()
    CollapsingToolbarScaffold(
        modifier = Modifier
            .fillMaxSize(),
        state = state,
        scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
        toolbar = {
            Box(
                modifier = Modifier
                    .height(400.dp)
                    .fillMaxWidth()
                    .background(Color.Blue)
            )

            TabRow(
                selectedTabIndex = tabIndex,
                indicator = { tabPositions ->
                    TabRowDefaults.Indicator(
                        Modifier.tabIndicatorOffset(tabPositions[tabIndex])
                    )
                },
                modifier = Modifier.road(
                    whenCollapsed = Alignment.CenterStart,
                    whenExpanded = Alignment.BottomEnd
                )
            ) {
                tabData.forEachIndexed { index, pair ->
                    Tab(selected = tabIndex == index, onClick = {
                        coroutineScope.launch {
                            pagerState.animateScrollToPage(index)
                        }
                    }, text = {
                        Text(text = pair.first)
                    }, icon = {
                        Icon(imageVector = pair.second, contentDescription = null)
                    })
                }
            }

        }
    ) {

        LazyColumn(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            items(100) {
                Text(
                    text = "Item $it",
                    modifier = Modifier.padding(8.dp)
                )
            }
        }
    }


}

`

[onebone]

It seems like it is an expected behavior. Because you passed Alignment.CenterStart to the whenCollapsed on road modifier, the tab row is moving to comply CenterStart alignment. Try passing the BottomEnd alignment to whenCollapsed.

[anil-agridroid]

@onebone Thanks :) it worked.