2

I am animating a view so that a bottom navigation bar is hidden when the keyboard appears.

My issue is that I can translate away the bottom navigation bar and the main 'message area' can follow it, but at the top of the 'message area' a gap forms. Is there a way to translate, but keep the top of the 'message area' aligned with the action bar?

Here is an example of the animation and the gap that is forming: enter image description here

My animation code is as follows:

if (lowerNavigationBar.getVisibility() == View.VISIBLE) {

    lowerNavigationBar.animate()
            .translationY(lowerNavigationBar.getHeight()).setDuration(1000).start();
    viewPager.animate()
            .translationY(lowerNavigationBar.getHeight()).setDuration(1000).start();
    lowerNavigationBar.setVisibility(View.INVISIBLE);   

}
else{

    lowerNavigationBar.setVisibility(View.VISIBLE);
    lowerNavigationBar.animate()
            .translationY(0).setDuration(1000).start();
    viewPager.animate()
            .translationY(0).setDuration(1000).start();

}
Calco
  • 1,210
  • 1
  • 14
  • 28

1 Answers1

2

I ended up testing two things, the first from this stack overflow answer which adjusts the actual height of the layout, which did work, but wasn't as smooth as I would have liked.

The second being this library which uses ValueAnimators and provided a much smoother animation as well as further functionality. I ended up sticking with this library as it gives much better results visually and is simple to customise.

Calco
  • 1,210
  • 1
  • 14
  • 28