Edit: I just noticed this is called `SearchView` i...

# compose

[kotlinforandroid]

Edit: I just noticed this is called SearchView in Material 3. That is what I want: https://m3.material.io/components/search/guidelines#f825f20d-d6a8-4c29-b5e7-a58d93be285d

I want to use the ExpandedFullScreenSearchBar in one of my screens. However, I do not want to use a SearchBar in its unexpanded state, as it would clutter the UI. I already have to use a TopAppBar for said screen.

I got the animation fully working by updating the SearchBarState with the TopAppBar 's global coordinates. It is the same way that the SearchBar makes the animation work.

The problem I am facing is that the expanding animation will render the "fake Searchbar" over my TopAppBar as if there would be a real SearchBar. This fake one is then expanded into the fullscreen SearchBar.

I was hoping I can use the shared transition API, speficially sharedBounds, to somehow blend the animation properly. I get an exception though. The exception and code are inside the thread.

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

Please keep long code snippets to the thread.

[kotlinforandroid]

java.lang.IllegalArgumentException: layouts are not part of the same hierarchy

My code:

// Inherited via compositionLocalOf from `composable` call inside NavHost.
val animationVisibilityScope = LocalNavAnimatedVisibilityScope.current!!
// Inherited from SharedTransitionLayout that is wrapping NavHost.
val sharedTransitionScope = LocalSharedTransitionScope.current!!

NestedScaffold(
        topBar = {
            with(sharedTransitionScope) {
                val inputField = @Composable {
                    SearchBarDefaults.InputField(
                        modifier = Modifier.sharedBounds(
                            sharedContentState = rememberSharedContentState("topappbar"),
                            animationVisibilityScope
                        ),
                        searchBarState = searchBarState,
                        textFieldState = textFieldState,
                        onSearch = { coroutineScope.launch { searchBarState.animateToCollapsed() } },
                        placeholder = { Text("Search...") },
                        leadingIcon = {
                            if (searchBarState.targetValue == SearchBarValue.Expanded) {
                                Icon(Icons.Default.Search, null)
                            }
                        },
                    )
                }

                TopAppBar(
                    modifier = Modifier
                        .sharedBounds(
                            sharedContentState = rememberSharedContentState("topappbar"),
                            animationVisibilityScope,
                        )
                        .onGloballyPositioned {
                            searchBarState.collapsedCoords = it
                        },
                    title = { Text(text = "Track meal") },
                    navigationIcon = {
                        IconButton(onClick = navigateBack) {
                            Icon(Icons.AutoMirrored.Filled.ArrowBack, null)
                        }
                    },
                )


                ExpandedFullScreenSearchBar(
                    state = searchBarState,
                    inputField = inputField,
                ) { }
            }
        },
// ...

Is there any way to make this more smooth?

[bryankeltonadams]

could you share a snippet of your animation in SearchBarState? is the expectation for this component to have a search bar at the top and you're clicking it and going into an Expanded State? is that why the animation animates the close to the top and the expand animates from the top?

[bryankeltonadams]

Honestly, I just decided to use a ModalBottomSheet instead for my search implementation. I couldn't get the animation to be as smooth as a sheet anyway. I was able to use the ExpandedFullSCreenSearchBar without a regular SearchBar, I just added onGloballyPositioned to the element I wanted it to animate from and updated the states coordinates just like you mentioned.