title: An empty space shows after translationY animation
body: <p>I am hiding the <code>Toolbar</code> when scrolled down, the only views left would be the <code>SlidingTabLayout</code> and the <code>ViewPager</code>, just like the behaviour that PlayStore has. But I can see a white empty space after the <code>SlidingTabLayout</code> is moved.  How do I eliminate this and let the <code>ViewPager</code> occupies that extra space?</p>
  
  <p>When scrolled up, <code>Toolbar</code> shows
  <img src="https://i.stack.imgur.com/dP8Cm.jpg" alt="When scrolled up, Toolbar shows"></p>
  
  <p>When scrolled down, it leaves empty space from <code>SlidingTabLayout</code>
  <img src="https://i.stack.imgur.com/7JDmC.jpg" alt="When scrolled down, it leaves empty space from SlidingTabLayout"></p>
  
  <pre><code>@Override
  public void onScrollUp() {
      if (isToolbarHidden()) showToolbar();
  }
  
  @Override
  public void onScrollDown() {
      if (isToolbarShown()) hideToolbar();
  }
  
  private void showToolbar() {
      moveToolbar(0);
      moveTabs(0);
  }
  
  private void hideToolbar() {
      moveToolbar(-mToolbar.getHeight());
      moveTabs(-mTabs.getHeight());
  }
  
  private void moveTabs(float toTranslationY) {
      if (ViewHelper.getTranslationY(mTabs) == toTranslationY) return;
  
      ValueAnimator animator = ValueAnimator.ofFloat(ViewHelper
              .getTranslationY(mTabs), toTranslationY)
              .setDuration(ANIMATE_TIME_MILLIS);
  
      animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
          @Override
          public void onAnimationUpdate(ValueAnimator animation) {
              float translationY = (float) animation.getAnimatedValue();
              ViewHelper.setTranslationY(mTabs, translationY);
          }
      });
      animator.start();
  }
  </code></pre>