How can I implement a chrome like “auto-hide navigation” for my Android app?

Question

In Chrome, the address bar will be hidden/shown when user swipes up/down the content.

Can I implement the similar logic to my app?

Answer 1

First you need layout with alignParentBottom and match_parent WebView and some bar at top:

Then you need code:

1) Declare and set some internal values and resize WebView to make it below our bar:

private int baseHeight;
private int webViewOnTouchHeight;
private int barHeight;
private float heightChange;
private float startEventY;

barHeight = actionBar.getMeasuredHeight();
baseHeight = getView().getMeasuredHeight();
webView.getLayoutParams().height = webView.getMeasuredHeight() - barHeight;
webView.requestLayout();
webView.setOnTouchListener(listener);

2) Create resize method. Here we check new height with limits of screen top and bar height

private boolean resizeView(float delta) {
    heightChange = delta;
    int newHeight = (int)(webViewOnTouchHeight - delta);
    if (newHeight > baseHeight){ // scroll over top
        if (webView.getLayoutParams().height < baseHeight){
            webView.getLayoutParams().height = baseHeight;
            webView.requestLayout();
            return true;
        }       
    }else if (newHeight < baseHeight - barHeight){ // scroll below bar
        if (webView.getLayoutParams().height > baseHeight - barHeight){
            webView.getLayoutParams().height = baseHeight - barHeight;
            webView.requestLayout();
            return true;
        }
    } else { // scroll between top and bar
        webView.getLayoutParams().height = (int)(webViewOnTouchHeight - delta);
        webView.requestLayout();
        return true;
    }
    return false;
}

3) Create custom onTouch listener where we will resize WebView and change Y-value of our bar

private OnTouchListener listener = new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_DOWN:
            startEventY = event.getY();
            heightChange = 0;
            webViewOnTouchHeight = webView.getLayoutParams().height;
            break;
        case MotionEvent.ACTION_MOVE:
            float delta = (event.getY()+heightChange)-startEventY;
            boolean heigthChanged = resizeView(delta);
            if (heigthChanged){
                actionBar.setTranslationY(baseHeight - webView.getLayoutParams().height - barHeight);
            }
        }
        return false;
    }
};