Hide actionbar on scroll listview

Question

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?

score 0 · Answer 1 · answered May 05 '17 at 04:39

You can add actionbar animation on hide/show:

declare const java: any;
declare const android: any;

export enum LayoutTransitionTypes {
    CHANGE_APPEARING = 0,
    CHANGE_DISAPPEARING,
    APPEARING,
    DISAPPEARING,
    CHANGING
}

export function initPageActionBarVisibilityAnimations(page) {
    if (!page.actionBar) {
        return;
    }
    const actionBarH = page.actionBar.getMeasuredHeight();
    if (actionBarH < 1) {
        return;
    }
    const lt = new android.animation.LayoutTransition();
    lt.setAnimator(LayoutTransitionTypes.APPEARING, (function () {
        const a = new android.animation.ObjectAnimator();
        a.setPropertyName('translationY');
        a.setFloatValues([0.0]);
        a.setDuration(lt.getDuration(2));
        return a;
    })());
    lt.setAnimator(LayoutTransitionTypes.DISAPPEARING, (function () {
        const a = new android.animation.ObjectAnimator();
        a.setPropertyName('translationY');
        a.setFloatValues([-actionBarH]);
        a.setDuration(lt.getDuration(3));
        return a;
    })());
    lt.setStartDelay(LayoutTransitionTypes.CHANGE_APPEARING, 0);
    lt.setStartDelay(LayoutTransitionTypes.CHANGE_DISAPPEARING, 0);
    lt.setStartDelay(LayoutTransitionTypes.APPEARING, 0);
    lt.setStartDelay(LayoutTransitionTypes.DISAPPEARING, 0);
    lt.setStartDelay(LayoutTransitionTypes.CHANGING, 0);
    page.nativeView.setLayoutTransition(lt);
}

Now we may use page pan event to automatically hide/show action bar on scroll pan up/down events. Every change of page.actionBarHidden will start smooth actionbar hide/show transition.

export function onScrollPan(ev: PanGestureEventData) {
    const actionBar = page.actionBar;
    const scrollView: ScrollView = <ScrollView>page.getViewById('mainScrollView');
    const voffset = scrollView.verticalOffset;
    const dh = 50;
    if (page.actionBarHidden && ev.deltaY > dh * 5) {
        initPageActionBarVisibilityAnimations(page);
        page.actionBarHidden = false;
    } else if (!page.actionBarHidden
               && ev.deltaY < -dh
               && voffset > 0 && voffset > 2 * actionBar.getMeasuredHeight()) {
        initPageActionBarVisibilityAnimations(page);
        page.actionBarHidden = true;
    }
}

Hide actionbar on scroll listview

1 Answers1