How to keep BottomBar above the keyboard in Jetpack Compose?

I'm trying to create a UI that consists of a text field and a bottom bar. When the user taps on the text field, I want the screen to resize so that the keyboard does not cover any content. Additionally, the bottom bar should move up and stay above the keyboard instead of being hidden.

Here are some key points:

The UI contains a text input field and a bottom navigation bar.

When the keyboard appears, the screen should adjust dynamically.

The bottom bar should be repositioned above the keyboard instead of overlapping with it.

The UI should work smoothly on different devices and screen sizes.

I've attached two illustrative images showing the expected behavior. How can I achieve this effect in Android?

• You can achieve that by using modifier modifier = Modifier.imePadding() apply this modifier to your BottomAppBar