Jetpack Compose Material 3 SearchBar in Scaffold Scrolling Issue

Question

I have a scaffold with a Column app bar and a SearchBar composable from md3, the content of my scaffold is a Column with vertical scroll behavior:

val appBarState = rememberTopAppBarState()
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(appBarState)

   Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        snackbarHost = {
            SnackbarHost(hostState = snackbarHostState)
        },
        topBar = {
            Column {
                AnimatedVisibility(visible = !isSearchActive) {
                    ActionToolbar(
                        scrollBehavior = scrollBehavior,
                        title = -1,
                        titleComposable = {
                            Text(
                                text = "Browsing in",
                                style = MaterialTheme.typography.labelLarge
                            )
                        },
                        modifier = Modifier.toolbarActions(),
                        primaryActionVector = Icons.Outlined.Notifications,
                        primaryAction = {

                        },
                        secondaryActionVector = Icons.Outlined.BookmarkBorder,
                        secondaryAction = {},
                        navigationIconAction = null,
                    )
                }

                EmbeddedSearchBar(
                    onQueryChange = {
                        queryText = it
                    },
                    onSearch = {},
                    isSearchActive = isSearchActive,
                    onActiveChanged = { isSearchActive = it },
                )

                UiStateComposable(
                    modifier = modifier,
                    snackbarHostState = snackbarHostState,
                    uiState = featuredArenasState,
                    useLinearProgressBar = true
                ) {
                }

            }

        },
        content = { padding ->

            ResourcesScreenContent(
                modifier = Modifier.padding(padding),
                featuredArenas = featuredArenasState.dataModel ?: emptyList(),
                onErrorMessageShown = {
                    viewModel.clearErrorState()
                }, onGetResources = {
                    viewModel.fetchMenu()
                }
            )
        }
    )

What I want to achieve is to make the whole content scrollable (with top app bar) while keeping the behavior of SearchBar upon clicking on it (which is to fully expands to the screen).

With the above code I managed to scroll the top app bar by passing the nestedScrollConnection behavior modifier but the SearchBar is pinned on top (since it does not accept a scroll behavior)

If I move the SearchBar to the scaffold content (ResourcesScreenContent()) which is a scrollable column so to achieve the required behavior, the SearchBar crashes on click on it when it tries to expand due to the constraints: java.lang.IllegalArgumentException: Can't represent a size of 671460339 in Constraints

How can I solve this?

visualisation

Answer 1

The only way this can be solved is by manually implementing the scroll behavior using NestedScrollConnections

Refer to this article by Levi Albuquerque:

https://medium.com/androiddevelopers/understanding-nested-scrolling-in-jetpack-compose-eb57c1ea0af0