Have LazyColumn and textfield pinned to bottom of screen. when textfield is focused, items in lazy column push it below keyboard

Question

I have a lazy column that contains a number of Text(string = "...") and a textfield pinned to the bottom of the screen below the LazyColumn. when the textfield is focused, the keyboard shows up and it pushes the textfield above the keyboard which is expected. however, when the items in the LazyColumn r too much, the textfield goes below the keyboard instead of allowing the user to scroll the lazy column. any reason for this? I already have set android:windowSoftInputMode="adjustResize" in my manifest's activity. here's the full code:

Column(modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
       verticalArrangement = Arrangement.SpaceBetween) {
                    
    LazyColumn {                      
      items(viewModel.options) { option ->                            
        Text(option.message)
      }
    }
                

  Row(modifier = Modifier.fillMaxWidth()) {
            
   TextField(
     modifier = Modifier.weight(1f),
     value = optionsText, 
     onValueChange = {optionsText = it }, 
     singleLine = true
    )
           
   Icon(
     Icons.Filled.Send, 
     contentDescription = "", 
     modifier = Modifier.align(Alignment.CenterVertically).clickable {...}
   )
  }
}

It is similar to a new case I just came across. But not exactly the same problem. I'm her case, the keyboard literally disappears after appearing for a brief moment, when the textfield is at the bottom of the screen. Got any ideas? Forget it I got an epiphany literally while typing this, I'll brilliantly solve a case now. — Richard Onslow Roper, Aug 22 '22 at 04:38
Your case wasn't as interesting as hers, so I elected not to go through the efforts to solve it at first, then I forgot about it. I'll have a look. — Richard Onslow Roper, Aug 27 '22 at 08:57

score 1 · Accepted Answer · answered Aug 27 '22 at 10:06

Solution, WEIGHTS !

LazyColumn(Modifier.weight(9f)) {
    items(listItems) {
        Text(it)
    }
}
Row(modifier = Modifier.fillMaxWidth().weight(1f, /*false*/)) {
    var loremText by remember { mutableStateOf("") }
    TextField(
        modifier = Modifier.weight(1f),
        value = loremText,
        onValueChange = { loremText = it },
        singleLine = true
    )
    Icon(
        Icons.Filled.Send,
        contentDescription = "",
        modifier = Modifier
            .align(Alignment.CenterVertically)
            .clickable { }
    )
}

You may remove the adjustResize from your manifest.

Have LazyColumn and textfield pinned to bottom of screen. when textfield is focused, items in lazy column push it below keyboard

1 Answers1