When the focus is on email or password and keyboar...

# compose

[Luis Daivid]

When the focus is on email or password and keyboard is shown up, I want to move the screen up and the Login button is visible, as shown in the image on the right. And I want to enable scrolling.

adjustResize is applied, and setDecorFitsSystemWindows is also set to false.

here is my current Login Screen composable sudo code.

Column(
 modifier = Modifier.verticalScroll(scrollState)
) {
  Box(modifier = Modifier.fillMaxWidth().weight(1f) {
    LogoImage()
   }

   Buttons(modifier = Modifier.fillMaxSize())
}

I have textfields inside Buttons, but when focused, the keyboard just hides the elements. How should I implement it?

[nuhkoca]

Does it work when you apply imePadding modifier to the button?

[AmrJyniat]

I think

this▾

will help you

[Luis Daivid]

@nuhkoca I tried applying it, but the padding is set to the size of the keyboard, so it rises too high.

[Luis Daivid]

@AmrJyniat This video doesn’t seem to apply to multiple devices of different lengths…

[Colton Idle]

use accompanist and set its imepadding() modifier to the login button?

[Zach]

This is something I struggled with for a long time but I have something that may work for you. My only caveat is it does it scroll when the screen is too small to show all contents, so things might get squished or overlapped, but on larger (modern) screens it works great

Scaffold(Modifier.imePadding()) {
    Box(
        Modifier
            .fillMaxSize()
            .background(Color.Black)
            .systemBarsPadding()
    ) {
        Column(Modifier.align(Alignment.TopCenter)) {
            // Your top app bar goes here
            Row(
                Modifier.fillMaxSize(),
                verticalAlignment = Alignment.CenterVertically
            ) {
                // Your onboarding content goes here (username/password fields)
            }
            // Your bottom button goes here
        }   
    }
}

[Zach]

In your main activity I advice setting

WindowCompat.setDecorFitsSystemWindows(window, false)

for easier control of how to fit your content within the system bars

[Zach]

You could potentially also use the floatingActionBar inside scaffold and set your button to that but it would require some extra modifiers I think