How to create a collapsing element inside compose scaffold? (not collapsing top app bar)

Question

I want this row of chips to collapse when you scroll up in the lazy grid but appear again when you scroll down, basically the same behaviour you would get by using TopAppBarDefaults.enterAlwaysScrollBehavior() with the top app bar.

ui initial state

The row is not part of the top app bar, is part of the content of the screen and currently stays visible all the time when scrolling.

Is there a way to apply a TopAppBarDefaults.enterAlwaysScrollBehavior() like behaviour to the row independently from the top app bar? I still want the top app bar to stay visible all the time.

I'm working with Material3 and compose 1.4.1

So far I've only applied TopAppBarDefaults.pinnedScrollBehavior() to the top app bar, but even that is not working (on this screen at least, I assume it's because the ChipsSection is in between the actual scrollable content TvShowsSection and the top app bar so I'm hopping that would fix itself if the chips section collapses on scroll)

@Composable
fun HomeScreen(
    state: HomeState,
    tvShows: LazyPagingItems<TvShow>,
    onEvent: (HomeEvent) -> Unit,
    onNavigateToTvShow: (TvShow) -> Unit,
    onNavigateToProfile: () -> Unit
) {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

    Scaffold(
        topBar = {
            HomeTopAppBar(
                onProfileClick = onNavigateToProfile,
                scrollBehavior = scrollBehavior
            )
        }
    ) { padding ->
        Column(modifier = Modifier.padding(padding)) {
            // I want this chips section to collapse on scroll 
            ChipsSection(
                selectedFilter = state.showFilter,
                onFilterClick = { onEvent(HomeEvent.OnShowFilterClick(it)) },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
            )
            // This just contains the LazyGrid without any custom scroll state or behaviour
            TvShowsSection(
                tvShows = tvShows,
                onShowClick = onNavigateToTvShow,
                modifier = Modifier
                    .fillMaxSize()
                    .padding(8.dp)
            )
        }
    }
}

@Composable
fun HomeTopAppBar(
    onProfileClick: () -> Unit,
    scrollBehavior: TopAppBarScrollBehavior? = null
) {
    TopAppBar(
        title = { Text(text = stringResource(id = R.string.home_title_label)) },
        actions = {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Rounded.Search,
                    contentDescription = stringResource(id = R.string.search_icon_desc)
                )
            }
            IconButton(onClick = onProfileClick) {
                Icon(
                    imageVector = Icons.Rounded.AccountCircle,
                    contentDescription = stringResource(id = R.string.profile_icon_desc)
                )
            }
        },
        scrollBehavior = scrollBehavior
    )
}

@Composable
fun ChipsSection(
    modifier: Modifier = Modifier,
    selectedFilter: ShowFilter,
    onFilterClick: (ShowFilter) -> Unit
) {
    Row(
        modifier = modifier.horizontalScroll(rememberScrollState())
    ) {
        enumValues<ShowFilterUi>().forEach {
            FilterChip(
                selected = selectedFilter == it.value,
                onClick = { onFilterClick(it.value) },
                label = { Text(text = stringResource(id = it.label)) },
                modifier = Modifier.padding(horizontal = 4.dp)
            )
        }
    }
}

I've tried to add scroll states to the chips section but it seems to do nothing as well the top app bar behaviour (hopping it would magically work)

score 0 · Answer 1 · answered Apr 16 '23 at 21:30

Well if you want a scroll behavior, you need a scrollable container in the first place. Then, you need to connect that scollable container with your scroll behavior using nested scroll connection. In your case, the scrolling container would be the TvShowsSection most likely, so you have to do something like this:

TvShowsSection(
    modifier = Modifier
        .verticalScroll(rememberScrollState())
        .nestedScroll(scrollBehavior.nestedScrollConnection)
)

How to create a collapsing element inside compose scaffold? (not collapsing top app bar)

1 Answers1