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

Question

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>

I have uploaded my own implementation of code, might it help others. — Ashish Kumawat, Jun 23 '16 at 18:03

score 6 · Accepted Answer · answered Jun 23 '16 at 17:56

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

score 3 · Answer 2 · edited Sep 10 '17 at 18:59

Behavior class

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {


    public ScrollAwareFABBehavior() {
        super();
    }

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

    private int mXonTouchDown;
    private int mXonTouchUp;

    @Override
    public boolean onInterceptTouchEvent(CoordinatorLayout parent, FloatingActionButton child, MotionEvent ev) {


        if (ev.getAction() == MotionEvent.ACTION_DOWN) {
            mXonTouchDown = (int) ev.getY();
        } else if (ev.getAction() == MotionEvent.ACTION_UP) {
            mXonTouchUp = (int) ev.getY();
        }
        if(mXonTouchDown > mXonTouchUp)
            child.hide();
        else
            child.show();

        return super.onInterceptTouchEvent(parent, child, ev);
    }
}

score 1 · Answer 3 · edited May 23 '17 at 12:33

You can do it Create new Class name TouchyWebView

package your.package.name;

public class TouchyWebView extends WebView {

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

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

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

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            requestDisallowInterceptTouchEvent(true);
            int action = event.getActionMasked();
            String TAG = ActivityName.class.getSimpleName();
            float initialX = 0, initialY = 0;
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                    initialX = event.getX();
                    initialY = event.getY();
                    Log.d(TAG, "Action was DOWN");
                    break;

                case MotionEvent.ACTION_MOVE:
                    Log.d(TAG, "Action was MOVE");
                    break;

                case MotionEvent.ACTION_UP:
                    float finalX = event.getX();
                    float finalY = event.getY();
                    Log.d(TAG, "Action was UP");
                    if (initialX < finalX) {
                        Log.d(TAG, "Left to Right swipe performed");
                    }
                    if (initialX > finalX) {
                        Log.d(TAG, "Right to Left swipe performed");
                    }
                    if (initialY < finalY) {
                        Log.d(TAG, "Up to Down swipe performed");
                        // hide or show fab button here?
                        //fab.hide();
                    }
                    if (initialY > finalY) {
                        Log.d(TAG, "Down to Up swipe performed");
                        // hide or show fab button here?
                        //fab.show();
                    }
                    break;
                case MotionEvent.ACTION_CANCEL:
                    Log.d(TAG, "Action was CANCEL");
                    break;

                case MotionEvent.ACTION_OUTSIDE:
                    Log.d(TAG, "Movement occurred outside bounds of current screen element");
                    break;
            }

            return super.onTouchEvent(event);
        }
    }

Now instead of your webview in XML used newly created look below

Your WebView:

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/webview"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
/>

Replace with this:

<your.package.name.TouchyWebView 
  android:id="@+id/description_web"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"/>

Now you webview Object like

WebView webview = (WebView)findViewById(R.id.webView);

change to

TouchyWebView touchyWebView = (TouchyWebView) findViewById(R.id.description_web);

webView Touchy

score 1 · Answer 4 · answered Jun 12 '18 at 06:12

 final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.myFAB);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            webview.setOnScrollChangeListener(new View.OnScrollChangeListener() {
                @Override
                public void onScrollChange(View Webview,int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                    if (scrollY > oldScrollY && scrollY > 0) {
                        fab.hide();
                    }
                    if (scrollY < oldScrollY) {
                        fab.show();
                    }
                }

            });

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

4 Answers4

Linked