Ashish Kumawat Ashish Kumawat - 4 months ago 160
Android Question

How to hide and show FAB on scroll of webview without using nestedScrollView

This is a floating action button in my XML layout.

My Webview inside NestedScrollView causes a crash of pinch zoom support.

<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="@drawable/filter_icon"
android:tint="#FFFFFF"
app:backgroundTint="@color/colorPrimary"
app:elevation="4dp"
app:fabSize="normal"
app:useCompatPadding="true"
app:layout_anchorGravity="bottom|end|right"
app:layout_behavior=".ScrollAwareFABBehavior">
</android.support.design.widget.FloatingActionButton>

Answer

Full working code to hide and show FAB on scroll of webview without using NestedScrollView.

public class NestedWebView extends WebView {

    private OnScrollChangedCallback  mOnScrollChangedCallback;

    public NestedWebView(Context context) {
        super(context);
    }

    public NestedWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public NestedWebView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mOnScrollChangedCallback != null) {
            mOnScrollChangedCallback.onScrollChange(this, l, t, oldl, oldt);
        }

    }

    public void setOnScrollChangedCallback(final OnScrollChangedCallback mOnScrollChangedCallback) {
        this.mOnScrollChangedCallback = mOnScrollChangedCallback;
    }

    public OnScrollChangedCallback getOnScrollChangedCallback() {
        return mOnScrollChangedCallback;
    }

    public interface OnScrollChangedCallback {
        /**
         * Called when the scroll position of a view changes.
         *
         * @param v          The view whose scroll position has changed.
         * @param scrollX    Current horizontal scroll origin.
         * @param scrollY    Current vertical scroll origin.
         * @param oldScrollX Previous horizontal scroll origin.
         * @param oldScrollY Previous vertical scroll origin.
         */
        void onScrollChange(WebView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY);
    }
}

In xml use custom Webview like this,

<com.essence.linuxcommands.NestedWebView
                android:id="@+id/myWebView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:elevation="@dimen/card_margin"
                android:scrollbarStyle="outsideOverlay"
                android:shadowRadius="2"
                android:visibility="gone"
            />

In Activity or fragment

NestedWebView webview = (NestedWebView) rootView.findViewById(R.id.myWebView);
webview.setOnScrollChangedCallback(new NestedWebView.OnScrollChangedCallback() {
           @Override
           public void onScrollChange(WebView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
               if (scrollY > oldScrollY && scrollY > 0) {
                   fab.hide();
               }
               if (scrollY < oldScrollY) {
                   fab.show();
               }
           }
       });