TextField is hidden behind keyboard - Jetpack Compose

Viewed 1815

I was playing around with Jetpack Compose TextField and I found one strange behaviour with Keyboard.

If my TextField is around bottom of the screen and I open keyboard, the TextField is remain hidden behind the keyboard.

I tried some solutions as well.

  1. Modifying android:windowSoftInputMode="adjustPan" and android:windowSoftInputMode="adjustResize"

  2. If I use adjustPan, sometimes TextField is lifted up with the Keyboard but sometimes it does not.


Here is the code and images of what is happening.

enter image description here

enter image description here

1 Answers

Ok I did something that worked for me, I clarify that I have only been learning compose for a few weeks so don't expect much from me, I simply did something that may not be the right way but it is functional for me and may be useful to anyone.

What I did was create a main class that inherits the ComponentActivity() with all the toys.

    class Login : ComponentActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
    
            super.onCreate(savedInstanceState)
            setContent {
    
                HealthAtHansClientTheme {

                    Surface(
                        modifier = Modifier.fillMaxSize(),
                        color = MaterialTheme.colors.background
                    ) {
                        LoginLayout()
                    }
                }
            }
        }
    }

After that I imported my @Composable function which contained my layout with the LoginLayout, but the important part is this:

    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .padding(bottom = 100.dp, end = 40.dp, start = 40.dp)
            .verticalScroll(scrollState),
        verticalArrangement = Arrangement.SpaceAround,

    ) {

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 30.dp)
        ) {
            Text(text = "Hola !", style = TextStyle(fontSize = 40.sp))
        }

        Row(horizontalArrangement = Arrangement.Center) {
            Column(
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {


                TextField(
                    maxLines = 1,
                    modifier = Modifier.fillMaxWidth(),
                    value = documentNumber,
                    onValueChange = { documentNumber = it })

                Spacer(modifier = Modifier.height(100.dp))

                TextField(
                    maxLines = 1,
                    modifier = Modifier.fillMaxWidth(),
                    value = privateCode,
                    onValueChange = { privateCode = it })


            }

        }
    }

Note that the space between the Textfields is 100 this was just to test that it is functional.

and finally declare the Login class in my main activity in the following way, since the Mainactivity came by default but it was only for this test, the idea is only that they realize the line that I added

enter image description here

enter image description here

And voilĂ  that was all now my TextField is not hidden, I think it would be very feasible if you have extensive forms you create your "activity" in the manifest and add the line android:windowSoftInputMode="adjustResize" that way the problem is over.

I hope someone with more skill and knowledge can do something more efficient, for now it works for me.

enter image description here

If there is already a more efficient solution for that, the comment is appreciated, if my solution is stupid, I would appreciate feedback to learn.

One other thing that happens is that if you run the emulator with 'DefaultPreview', none of the ways I try to do it work.

enter image description here

If you run the emulation of your application in App, it works without problem.

But I wanted to go further, so I compiled this example in a release apk version where it is supposed to look like it should and it works perfectly as you can see in the image.

enter image description here

Related