CODEWITHSUNDEEP
androidandroid-layoutandroid-jetpack-composeandroid-jetpackandroid-jetpack-compose-text
y390
y390

Reputation: 161

Layout not moving up when keyboard is open in Jetpack Compose

I have a layout in Jetpack Compose where I have a couple of composables (text view and input) that I need to stay at the top of the screen, and then another composable (button) that I need to stay attached to the bottom of the screen. When the keyboard is opened to type into the text input, I need the button attached to the bottom of the screen to move up with it, however this isn't happening.

ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
    Column(
        verticalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier
            .fillMaxSize()
            .statusBarsPadding()
            .padding(0.dp, 32.dp, 0.dp, 0.dp)
            .navigationBarsWithImePadding()
            .verticalScroll(rememberScrollState()),

    ) {
        Column {
            
            CustomHeading6(
                modifier = Modifier.padding(0.dp, 0.dp, 0.dp, 32.dp),
                title = "Enter Email"
            )

            CustomBody1(
                modifier = Modifier.padding(0.dp, 0.dp, 0.dp, 12.dp),
                content = "Email:"
            )

            CustomEmailTextField(
                modifier = Modifier.padding(0.dp, 0.dp, 0.dp, 20.dp),
                text = viewModel.emailAddress,
                onValueChanged = { //removed }
            )
        }

        Column {
            CustomButton(
                modifier = Modifier.padding(0.dp, 32.dp),
                title = "Submit",
                onButtonClick = { //removed }
            )
        }
    }
}

I tried to achieve the attach to top/bottom by wrapping each set of items in their own columns and then using Arrangement.SpaceBetween on the wrapper column, but perhaps this isn't correct. I also tried without this and instead adding .weight(1f) to the column with the composables attached to the top. Neither of these allowed the layout to move up with the keyboard.

I also have this in the main activity:

 WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        ProvideWindowInsets {
            Theme {
                      // my content
            }
         }
     }

and this in the manifest for my activity:

android:windowSoftInputMode="adjustResize"

Upvotes: 5

Views: 6360

Answers (1)

Shashank Kumar Dahiya
Shashank Kumar Dahiya

Reputation: 41

If you are using jetpack compose the only android:windowSoftInputMode="adjustResize" this will not help

you have to create that one composable

@Composable
fun KeyboardAware(
    content: @Composable () -> Unit
) {
    Box(modifier = Modifier.imePadding()) {
        content()
    }
}

then use this composable

KeyboardAware {
    SearchSongScreen(...)       
 }

Upvotes: 2

Related Questions