What's the gist for dealing with keyboard covering text inputs in a full compose app? If I have a s...

# compose

[Colton Idle]

What's the gist for dealing with keyboard covering text inputs in a full compose app?

If I have a screen that is not scrollable and it just contains a logo at the top and two text fields, but the keyboard covers the second text field, what paths forward do I have?

1. Is windowSoftInputMode still recommended in a full compose app?
2. Should I just make the entire page scrollable? Even though requirements say the page shouldn't scroll.
3. Can I only make the text inputs scrollable (wrap in a scrollable column) to make sure the keyboard doesn't cover.
4. Something else I missed?
I initially was going to reach for windowSoftInputMode, but that always seemed fishy to me. Curious if there's a "proper" way forward with compose.

[Tin Tran]

Having the same question! When I use focus modifier in combination with next action on keyboard. The focus changed to the next textfield but it got covered by the keyboard.
If I manually hide the keyboard and tap on the text field previously covered the keyboard shows up and pushes the textfield up and not covering it. How do I do that with focus modifier

[Cicero]

Accompanist, insets. I have a sample text Field component if you're interest

[Tin Tran]

Thanks you! That would be great

[Abhishek Dewan]

use the navigationBarWithImePadding from insets library.

[Colton Idle]

Where do I put that? Set the padding on my text input? Or just the bottom text input? Or wrap both of them in a box?

I guess I can just experiment myself, but I'm on mobile right now.

[Abhishek Dewan]

i would suggest the top most container if your screen that hosts the textfield. It kinda depends on your UI

[Abhishek Dewan]

I’ve found that adding it to the root of all composables also works. Essentially making it so that when the keyboard is showing all of my UI has a padding bottom that matches the height of the keyboard

[Colton Idle]

Interesting. I will play around with it. Thanks.

[tad]

scrollable container + RelocationRequester should also work

[Colton Idle]

RelocationRequester? Hmm. Never heard of that. I'll have to look it up.

[dimsuz]

You also should search for it in this channel because it doesn't work in some situations without a delay(200) or something like that (which is weird).

IIRC it happens because you must use this relocation requester after your screen layout was changed after ime, but you get the ime-state-change event before layout is recomputed, so requesting relocation does nothing (because there's nothing scrollable at the time). Adding delay makes it go after layout and it works. Or using onGloballyPositioned might be cleaner.

Also I might be wrong and this may be already fixed.

[dimsuz]

Official example from documentation didn't work for me because of this (some time ago).

[Alex Clement]

I came across this thread when looking for solutions and wanted to share the solution I came up with. hope it helps! https://gist.github.com/alexrdclement/df28b794194690dce19d60433f6430e2

[dimsuz]

Looks solid, thank you, I was just about to do relocation-scrolling related stuff tomorrow, will try this out!