I have an app that has an action bar and a Tabview. Inside the tabview there is a listview. What I want is the actionbar to hide when the user is scrolling down the list and pop up when the user is scrolling up and do it nicely. As an example youtube app for android is doing this.

I have tried this code https://gist.github.com/vakrilov/6edc783b49df1f5ffda5 but as I hide the bar a white space appears on the bottom of the screen so not really useful in this case. I tried and fail to modify it and increase the height as I hide the bar using:

var params = userList.android.getLayoutParams();
params.height = 500;
userList.android.setLayoutParams(params);
userList.android.requestLayout();    

Also this

var LayoutParams= android.view.ViewGroup.LayoutParams;
var params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

Finally I came out with a kind of working thing but it is too sudden no animation on the hiding/appearing

var isChangingBar = false;
var isBarHidden = false;
userList.on("pan", function(args) {
    var delta = args.deltaY;
    console.log("deltaY: " + delta);

    if (!isChangingBar) {
      if (delta > 0 && isBarHidden === true) {
        isChangingBar = true;
        isBarHidden = false;
        page.actionBarHidden = false;
        isBarHidden = false;
        setTimeout(function() {
          isChangingBar = false;
        }, 250);
      }
      else if (delta < 0 && isBarHidden === false) {
        isChangingBar = true;
        page.actionBarHidden = true;
        isBarHidden = true;
        setTimeout(function() {
          isChangingBar = false;
        }, 250);
      }
    }
}

Some idea if there is a better way?