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):
What I get (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.
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.