I'm using BasicTextField to stylize my text input field. I'm having a problem where when I focus on said text input on the lower part of the screen, keyboard overlaps my input a bit. Is there a way to fix it ? Here's my BasicTextField
Row(
modifier = Modifier
.fillMaxWidth()
.heightIn(min = 68.dp)
.border(width = 1.dp, color = Color.Blue)
.background(color = Color.White),
verticalAlignment = Alignment.Top
) {
BasicTextField(
modifier = Modifier
.offset(y = (8).dp)
.padding(start = 16.dp, top = 20.dp, bottom = 16.dp)
.weight(1f),
textStyle = TextStyle(fontSize = 24.sp, lineHeight = 37.sp),
maxLines = 5,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
value = input,
onValueChange = {
input = it
},
decorationBox = {
Text(
modifier = Modifier.offset(y = (-16).dp),
text = "amount",
fontSize = 12.sp,
color = Color.Gray,
fontWeight = FontWeight.Bold
)
it()
},
)
Row(modifier = Modifier.align(Alignment.CenterVertically)) {
Image(
modifier = Modifier.padding(start = 4.dp, end = 16.dp),
painter = painterResource(id = R.drawable.arrow_down),
contentDescription = null,
colorFilter = ColorFilter.tint(color = Color.Blue)
)
}
}
I tried adding specific height on BasicTextField, removing border and background from Row and adding to BasicTextField, but end result wasn't the text field looking like I want it to. I also need the text field to be able to expand on break line and that's where a lot of times it went bad when trying to adjust it. Maybe I'm missing something.