Jetpack Compose: Bottom button moves up with keyboard, want it scrollable instead of resized

4 hours ago 1
ARTICLE AD BOX

I am building a screen using Jetpack Compose with Scaffold, Surface, and ConstraintLayout.
The screen has a BasicTextField in the center and a Continue button fixed at the bottom.

When I tap on the BasicTextField and the keyboard opens, the Continue button moves up with the keyboard.
However, I want a different behavior:

The button should stay at the bottom of the layout

It can go behind the keyboard

The screen should be scrollable, so I can scroll and bring the button into view when needed

The layout should NOT resize when the keyboard opens

Here is my simplified code:

Scaffold { Surface( modifier = Modifier .fillMaxSize() .background(Purple) .padding(it) .consumeWindowInsets(it) .imePadding() ) { ConstraintLayout( modifier = Modifier .fillMaxSize() .background(Purple) ) { val (phoneField, continueButton) = createRefs() Box( modifier = Modifier .constrainAs(phoneField) { linkTo(parent.top, parent.bottom) linkTo(parent.start, parent.end) width = Dimension.fillToConstraints } .padding(horizontal = 16.dp) .height(100.dp) ) { BasicTextField( value = phoneNumber, onValueChange = { newValue -> if (newValue.all { it.isDigit() } && newValue.length <= 10) { phoneNumber = newValue } }, modifier = Modifier.fillMaxWidth(), singleLine = true, keyboardOptions = KeyboardOptions( keyboardType = KeyboardType.Number ) ) } Box( modifier = Modifier .constrainAs(continueButton) { bottom.linkTo(parent.bottom, 16.dp) linkTo(parent.start, parent.end) width = Dimension.fillToConstraints } .height(42.dp), contentAlignment = Alignment.Center ) { Text("Continue") } } } }

Problem

When the keyboard opens:

The layout resizes

The bottom button is pushed up

The button never goes behind the keyboard

What I Want

Button should remain at the bottom

Button can be hidden behind the keyboard

Screen should be scrollable

Layout should not resize when keyboard opens

What I Tried

I also tried setting this in my AndroidManifest.xml:

android:windowSoftInputMode="adjustPan"

But it does not fix the issue in Jetpack Compose.

Question

How can I prevent my layout from resizing when the keyboard opens and instead make the screen scrollable so that the bottom button can be scrolled into view in Jetpack Compose?

Read Entire Article