Hi, I'm having some issues with imePadding. I have...
# compose
d
Hi, I'm having some issues with imePadding. I have imePadding set on the login button and systemBarsPadding on the help button (but that is irrelevant) and no other vertical padding anywhere else. There seem to be 2 problems: • When the keyboard is not shown and I press on the textfield to show it, the login button disappears when the keyboard moves up. But then when I toggle between the two textfields when the keyboard is already open, the login button appears and seems to behave like it should. See first video. • When I add any other padding, e.g. 10.dp on Login To SMS text, and then toggle between the textfields while the keyboard is open (to ignore the first issue), the login button is squished and less visible. If I add even more vertical padding to other components, the login button completely dissapears. See second video.
s
If you're in a lazy list add the padding as contentPadding instead, so it's part of the scrollable content. If you're in a normal column add a spacer at the bottom of the column with height equal to those insets, so again you don't clip the content, only add that much more content to the bottom of the scrollable container
d
Thank you, that solves most of it. Just one small other thing. I am adding it like this in a column:
Copy code
Spacer(modifier = Modifier.height(WindowInsets.ime.asPaddingValues().calculateBottomPadding() + 50.dp))
When I re-add vertical padding to other components, the login button goes slightly under the keyboard, so to compoensate I try to add 50.dp (same size as the components padding) to the Spacer, but that doesn't change anything, the login button is still slightly under.
d
This has more to do with focus/bringing into view than padding. Basically what you're experiencing is that the system tries to make sure the element you have focused (TextField) is visible and not covered by the keyboard. It basically "scrolls" your content just enough for your TextField to be above the keyboard. I'm not sure what's the best/neatest solution here to be honest but you could experiment with https://developer.android.com/reference/kotlin/androidx/compose/foundation/relocation/BringIntoViewRequester on the Button.
d
I still don't really understand how this works. BringIntoViewRequester doesn't seem to do anything (maybe because the column is not scrollable?). The Spacer approach is close, but as I start adding padding to my components, the button goes lower and lower under the keyboard. This is what my code looks like:
Copy code
Scaffold(
        modifier = Modifier.fillMaxSize().dismissFocusOnTap(focusManager)
    ) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            HelpButton(
                modifier = Modifier.statusBarsPadding(),
)

            Column(
                modifier = Modifier.align(Alignment.Center),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {

                LoadingIndicator(
                    modifier = Modifier.padding(bottom = 40.dp),
                    isLoading = state.isLoading
                )

                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.spacedBy(5.dp)
                ) {

                    LoginToText(
                        modifier = Modifier.align(Alignment.Start).padding(bottom = 16.dp, start = 4.dp),
                    )

                    EmailTextField(
                    )

                    PasswordTextField(
                    )

                    LoginButton(
                        modifier = Modifier.padding(top = 12.dp),
                    )

                    Spacer(modifier = Modifier.height(WindowInsets.ime.asPaddingValues().calculateBottomPadding()))
                }
            }
        }
    }
s
If your column isn't scrollable how do you expect it to scroll up for the button to be visible?