Home > Net >  (Compose UI) - Keyboard (IME) overlaps content of app
(Compose UI) - Keyboard (IME) overlaps content of app

Time:01-17

A few days ago I bumped on a problem where a part of my view is overlaped by keyboard.

Let's say we have 3 different dialogs (could be any content), which looks like this:

enter image description here

When I want to write in anything, last dialog is covered by keyboard:

enter image description here

And there's no way to see what user wrote. Here's my code:

@Composable
fun BuildWordsView(navController: NavController, sharedViewModel: SharedViewModel) {

        Column(
            modifier = Modifier
                .fillMaxWidth()
                .background(PrimaryLight)
                .fillMaxSize()

        ) {
            BuildWordsScreenContents()
        }

}

@Composable
fun BuildWordsScreenContents() {

    Column(
        Modifier
            .fillMaxSize()
            .padding(all = 16.dp)

    ) {

        val inputBoxModifier = Modifier
            .clip(RoundedCornerShape(10.dp))
            .background(Primary)
            .weight(12f)
            .wrapContentHeight()

        InputBlock("Dialog1", inputBoxModifier)
        Spacer(Modifier.weight(1f))
        InputBlock("Dialog2", inputBoxModifier)
        Spacer(Modifier.weight(1f))
        InputBlock("Dialog3", inputBoxModifier)
    }
}



@Composable
fun InputBlock(dialogText: String, inputBlockModifier: Modifier) {
    Column(modifier = inputBlockModifier) {
        Text(
            dialogText,
            fontSize = 30.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentSize(Alignment.Center)
        )
        var text by remember { mutableStateOf("") }

        TextField(
            value = text,
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentSize(Alignment.Center),
            onValueChange = { text = it },
            label = { Text("Label") }
        )
    }
}

This question seems to be similar to mine but answers modificate the content of view which I want to avoid:

enter image description here

Important Note For APIs 30-

For APIs lower then 30 you need to modificate the AndroidManifest.xml file

In <activity you need to add android:windowSoftInputMode="adjustResize" in order to make it work. It do not resize your components but it is obligatory to make this approach work

Manifest should look like this:

<activity
    android:name=".MainActivity"
    android:windowSoftInputMode="adjustResize"

Feel free to give me any tips how can I improve my question. AFAIK this problem is as old as android and I wanted to create a quick tutorial how to manage that. Happy coding!

  •  Tags:  
  • Related