androidkotlinandroid-jetpack-composepaddingscaffold

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


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?


Solution

  • 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.

    Screenshot

    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 {} }
                )
            }
        }
    }