android - Why does the imePadding cause the bottom element to bounce before aligning properly when the keyboard opens in Jetpack

I'm using Jetpack Compose, and I have a layout where I want a Column to shift upwards when the keyboard opens, using imePadding. However, when the keyboard appears, the blue box initially bounces up and then settles at the correct position. I would like to understand why this happens and how to prevent the bouncing behavior.Note that the sample function is getting called directly no inside any lazy column or did not use any windowInset modifier

Here is my @Composable function:

@Composable
fun Sample(modifier: Modifier = Modifier) {
    Column (
        modifier = Modifier.fillMaxSize().imePadding(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally
    ){
        Box(modifier = Modifier.background(Color.Red).size(50.sdp))
        TextField(value = "", onValueChange = {})
        Box(modifier = Modifier.background(Color.Blue).size(50.sdp))
    }
}

What I want: I would like to prevent the bouncing effect, so the layout transitions smoothly with the keyboard opening, and the blue box stays at the top of the keyboard without any jerky movements.

Has anyone faced a similar issue or can point me in the right direction to fix this?

I'm using Jetpack Compose, and I have a layout where I want a Column to shift upwards when the keyboard opens, using imePadding. However, when the keyboard appears, the blue box initially bounces up and then settles at the correct position. I would like to understand why this happens and how to prevent the bouncing behavior.Note that the sample function is getting called directly no inside any lazy column or did not use any windowInset modifier

Here is my @Composable function:

@Composable
fun Sample(modifier: Modifier = Modifier) {
    Column (
        modifier = Modifier.fillMaxSize().imePadding(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally
    ){
        Box(modifier = Modifier.background(Color.Red).size(50.sdp))
        TextField(value = "", onValueChange = {})
        Box(modifier = Modifier.background(Color.Blue).size(50.sdp))
    }
}

What I want: I would like to prevent the bouncing effect, so the layout transitions smoothly with the keyboard opening, and the blue box stays at the top of the keyboard without any jerky movements.

Has anyone faced a similar issue or can point me in the right direction to fix this?

• android
• kotlin
• android-jetpack-compose
• jetpack-compose-ime-padding

Share Improve this question Follow edited Feb 3 at 7:43 Bhushan Patil asked Feb 3 at 7:07 Bhushan PatilBhushan Patil 4311 silver badge44 bronze badges 1

• Do you have your Sample Composable wrapped in a LazyColumn or are you using any windowInsetsXXX Modifiers? If yes, please edit your post and also include that code. Because only with the code you provided, I can't reproduce the issue. – BenjyTec Commented Feb 3 at 7:20

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I have posted the same question myself, where my view snaps after the keyboard animation finishes.

Unexpected behavior with imePadding causing it to be applied after the keyboard animation

Interestingly, this behavior occurs only when running the app from Android Studio. When you build an APK or AAB from the environment (instead of running the debug version) it behaves as expected.