CODEWITHSUNDEEP
android-softkeyboardandroid-jetpack-composeimelazylist
Akhha8
Akhha8

Reputation: 490

Jetpack compose LazyColumn or Scrollable Column and IME padding for TextField doesn't work

I am trying to set a list if text fields, and when user set the focus on one text field at the bottom I expect that the user can see the appearing IME soft keyboard and the text field being padded according to the configuration set in my manifest file android:windowSoftInputMode="adjustPan", but it doesn't work the first time, it works only when some of the listed textfield have already a focus.

Behavior in video.

My code in onCreate method.

    // Turn off the decor fitting system windows, which allows us to handle insets,
    // including IME animations
    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {

        // Provide WindowInsets to our content. We don't want to consume them, so that
        // they keep being pass down the view hierarchy (since we're using fragments).
        ProvideWindowInsets(consumeWindowInsets = false) {

            MyApplicationTheme {

                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background, modifier = Modifier.systemBarsPadding()) {

                    Column(modifier = Modifier.fillMaxHeight()) {

                        val list: List<@Composable () -> Unit> = (1..10).map {
                            {

                                Text(text = "$it")

                                Divider()

                                TextField(value = "", onValueChange = {}, modifier = Modifier.navigationBarsWithImePadding(),)
                            }
                        }

                        LazyColumn(modifier = Modifier.fillMaxSize().weight(1F)) {

                            itemsIndexed(list) { index, inputText ->

                                inputText()
                            }
                        }
                    }
                }
            }
        }
    }

Upvotes: 3

Views: 3313

Answers (1)

makif
makif

Reputation: 300

If your problem is going on, check Insets for Jetpack Compose.

Only add this dependency:

implementation 'com.google.accompanist:accompanist-insets:{insetsVersion}'

and use Modifier.imePadding() or the custom solution:

@Composable
fun ImeAvoidingBox() {
    val insets = LocalWindowInsets.current

    val imeBottom = with(LocalDensity.current) { insets.ime.bottom.toDp() }
    Box(Modifier.padding(bottom = imeBottom))
}

Upvotes: 0

Related Questions