How to make Scaffold content (but not Bottom Bar) move up when keyboard is shown?

Question

I have scaffold content with verticalArrangement = Arrangement.Bottom.

How can I make the content move upwards when the keyboard is shown, but keep the bottom bar of the scaffold in place?

Answer 1

I coded a full minimal example to familiarize myself with the mechanics, and since I had trouble finding good information myself, I thought I might as well post the code here to maybe help others.

Starting with an empty project (File -> New -> New project -> Empty Activity) in Android Studio, just add the line android:windowSoftInputMode="adjustNothing" to the <activity> block of AndroidManifest.xml and then replace the content of MainActivity.kt with the code below.

Note the added enableEdgeToEdge() in onCreate which might be easy to overlook.

package com.example.test

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.TextField
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Scaffold(
                containerColor = Color.Black,
                content = { innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                            .consumeWindowInsets(innerPadding)
                            .imePadding(),
                        verticalArrangement = Arrangement.Bottom
                    ) {
                        TextField(
                            modifier = Modifier.padding(4.dp),
                            value = "Cat",
                            onValueChange = {}
                        )
                    }
                },
                bottomBar = { BottomAppBar {} }
            )
        }
    }
}