Compose Material 3 SearchBar window insets

207 views Asked by At

I want to use SystemBar from Compose Material 3 in an edge-to-edge activity (I use enableEdgeToEdge()).

I want the SearchBar to cover the whole screen with its surface when it is active, including the area under the system bars, but I don't want its input field, its icons, or its content to be obscured by the system bars.

I expected windowInsets parameter to do exactly this when set to WindowInsets.systemBars, but it doesn't (it is actually already set to WindowInsets.systemBars by default).

What I want (trailing icons are not obscured by the navigation bar, but the surface of the SearchBar still fills the area under the navigation bar): SearchBar with trailing icons not obscured by the navigation bar

What I get (the last trailing icon is obscured by the navigation bar): SearchBar with the last trailing icon is obscured by the navigation bar

I could use Modifier.windowInsetsPadding(WindowInsets.systemBars) but then the surface of the SearchBar won't fill the area under the system bars.

1

There are 1 answers

0
Eyjafl On

For now I ended up manually adding window insets paddings to starts and ends of leading/trailing icons and the content and animating them. This looks almost perfect if you use the same animation spec as SearchBar does ("almost" because when I rotate the screen the paddings are also animated to push the contents from under the system bars instead of applying instantly). But if there is a better way, I'm still looking for it.