Dragon warrior Dragon warrior - 6 months ago 20
Android Question

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

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?

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame">
<WebView
android:id="@+id/my_webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>


I wonder if there is anything I can do by the following code, so that the ActionBar will be hidden/shown when user swipe up/down the webView.

WebView webView = (WebView) findViewById(R.id.my_webview);
webView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch (View v, MotionEvent event) {
webView.onTouchEvent(event);
}
});

Answer

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff" >

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true" />

<RelativeLayout
    android:id="@+id/actionBar"
    android:layout_width="match_parent"
    android:layout_height="50dp" >

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="TextView" />

</RelativeLayout>

</RelativeLayout>

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;
    }
};