Enormous ime padding in Jetpack Compose

Question

I have a pinned bottom container with a textfield. And i use imePadding modifier. When keyboard appears seems like imePadding works twice. It happens only on some devices. Particular my is Samsung Galaxy A80 (Android 11)

Code example

        Scaffold(
            modifier = Modifier.fillMaxSize(),
            bottomBar = {
                Box(
                    Modifier
                        .imePadding()
                        .height(100.dp)
                        .background(Color.Red),
                ) {
                    BasicTextField(
                        modifier = Modifier.fillMaxWidth(),
                        value = "some text",
                        onValueChange = {},
                    )
                }
            },
        ) {
            Box(
                Modifier.fillMaxSize().padding(bottom = it.calculateBottomPadding()),
            ) {
                LazyColumn(
                    modifier = Modifier.fillMaxSize(),
                ) {
                    repeat((0..100).count()) {
                        item {
                            Box(Modifier.fillMaxWidth().height(100.dp).background(Color.Blue)) {
                            }
                        }
                    }
                }
            }
        }

UPD Issue reproduce when I add:

window.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)

Alverta

Adding some code snippets may help to solve this issue – Response

@Srimani789 here the example When I don't use imePadding on BasicTextField container devices without issue doesn't adjust the screen and there is no padding as expected. But in the same case problematical devices still have imePadding exectly to textfield – Alverta

Hey @VadimZhukov have you managed to resolve your issue? I am observing a similar thing happening on some Samsung devices. – Disapprove

@Disapprove nope. Just removed FLAG_LAYOUT_NO_LIMITS flag – Alverta

Answer 1

I also had this issue; more specifically, some devices would seem to ignore adjustResize, but adding imePadding alongside adjustResize would cause others to double it up.

I solved it for myself in the following way:

1. Set the manifest option to android:windowSoftInputMode="adjustNothing"
2. Set imePadding wherever needed.
3. If setting imePadding on the contents of a scaffold, I also called, consumeWindowInsets(contentPadding) on the Modifier of those contents, before imePadding, otherwise the contentPadding got consumed additively in the imePadding.

Something like:

Scaffold(...){ contentPadding -> 
    Box(
        modifier = Modifier
            .padding(contentPadding)
            .consumeWindowInsets(contentPadding)
            .imePadding()
    ){...}
}

I can't guarantee that this is best practice or that it works in all cases, but it worked for me.

Palla

Thanks for your solution. 'consumeWindowInsets(contentPadding)' solved my problem. – Sugarplum

use adjustNothing made my keyboard is hidden now, even though already has .imePadding in the textfield – Faubert

Answer 2

add this line to activity in AndroidManifest.xml file android:windowSoftInputMode="adjustResize". The activity's layout will be resized to ensure that all of its visible content remains visible even when the soft keyboard is shown without using any imePadding() modifiers.

here you can see improved code.

var value by remember { mutableStateOf("") }
Scaffold(
    bottomBar = {
        Box(modifier = Modifier
            .fillMaxWidth()
            .background(MaterialTheme.colorScheme.surface)) {
            OutlinedTextField(
                modifier = Modifier.fillMaxWidth(), value = value,
                onValueChange = { value = it }
            )
        }
    },
) { paddingValues ->
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues),
        contentPadding = PaddingValues(12.dp, 16.dp),
        verticalArrangement = Arrangement.spacedBy(4.dp),
    ) {
        items(100) {
            Card(modifier = Modifier.fillMaxSize()) {
                Text(text = "Item $it",  modifier = Modifier.padding(8.dp))
            }
        }
    }
}

Response