https://kotlinlang.org logo
#compose
Title
# compose
j

jannis

10/19/2021, 9:38 AM
Is there any elegant way to hide the BottomBar when the keyboard is shown? I'm using the Accompanist Insets library which gives me my desired keyboard behavior, but I want my TextField directly above my keyboard after the user clicked on it.
👀 1
c

cb

10/19/2021, 9:58 AM
This should work. You can sprinkle some
AnimatedContent
over it too, to animate the change:
Copy code
bottomBar = {
    if (LocalWindowInsets.current.ime.isVisible) {
        BottomNavigation(...)
    }
}
👍 3
j

jannis

10/19/2021, 10:10 AM
Hmmm tried that. But it gave me weird wiggles on the screen. But only tried it on the emulator (API 29). Maybe I try it on a real device 🤔
I also saw that the method returned true for my initial composition (even though the keyboard was not shown). It immediately switched to false though
c

Chris Miller

10/19/2021, 10:49 AM
I wanted to do something similar recently: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1633538132142800 Note that
isVisible
returns true from the moment the animation starts displaying the keyboard. It also returns false the moment the animation starts when hiding the keyboard. So you may want to check for
isVisible || animationInProgress
. In the end I didn't do the above as it was proving fiddly for my particular setup. Instead I wrapped the bottom nav with the following composable:
Copy code
@Composable
fun HideFromIme(content: @Composable () -> Unit) {
  AnimatedVisibility(
    visible = !LocalWindowInsets.current.ime.isVisible,
    enter = expandVertically(),
    exit = shrinkVertically(),
  ) {
    content()
  }
}
That gave a pretty smooth transition of the bottom nav disappearing as the keyboard appears (and vice versa).
j

jannis

10/19/2021, 10:57 AM
Using
AnimatedVisibility
indeed gave me a good result. Thanks for the hint! ❤️
👍🏽 1
👍 1
👍🏼 1
5 Views