IssueTracker

Jetpack Compose version: BOM 2024.06.00

Material Library Version (M2, M3 or Both?): M3

Material Compose component used: SearchBar

Android Studio Build: 2024.1.1

Kotlin version: 2.0.0

Steps to Reproduce or Code Sample to Reproduce:

1. Put a SearchBar as topBar and a LazyColumn of items as content into a Scaffold.
2. Run the app and click on the SearchBar.
3. Notice that the expand animation of SearchBar pushes content below away instead of overlaying above it, and closing it pulls back the content below.
4. This is a result of SearchBar increasing its layout height in-place, which means the content will be given less height during measurement.

This can be seen in blog posts about how to use SearchBar as well, e.g. https://medium.com/@shivathapaa/custom-topappbar-using-android-jetpack-compose-f9b33388a125 (disclaimer: I'm not the author of it) has a GIF recording which shows this problem if one observe carefully.

This isn't a problem in Compose Material Catalog SearchBarSamples because the sample is using a Box and a fixed top padding for the list. However, that doesn't work in most real world scenarios e.g. when people need to use Scaffold.

I think the material-components-android approach for SearchBar, which is to offer SearchBar and SearchView separately, is more flexible and will make it possible to handle layout (and window insets） correctly under all scenarios.

Stack trace (if applicable): N/A