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?