Hide Fab In Nestedscrollview When Scrolling

May 27, 2024 Post a Comment

I am having a nestedscrollview with content like some linearlayouts and textviews. I am using a floatingactionbutton library for some reasons, as well. So I can't use any behavior

Solution 1:

Simple add this code below to your NestedScrollView ScrollChangeListener:

NestedScrollViewnsv= v.findViewById(R.id.nsv);
    nsv.setOnScrollChangeListener(newNestedScrollView.OnScrollChangeListener() {
        @OverridepublicvoidonScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
            if (scrollY > oldScrollY) {
                fab.hide();
            } else {
                fab.show();
            }
        }
    });

Solution 2:

Create FabScrollBehavior class

publicclassFabScrollBehaviorextendsCoordinatorLayout.Behavior<FloatingActionButton> {
    privateint toolbarHeight;

    publicFabScrollBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.toolbarHeight = AppUtil.getToolbarHeight(context);
    }

    @OverridepublicbooleanlayoutDependsOn(CoordinatorLayout parent, FloatingActionButton fab, View dependency) {
        return dependency instanceof AppBarLayout;
    }

    @OverridepublicbooleanonDependentViewChanged(CoordinatorLayout parent, FloatingActionButton fab, View dependency) {
        if (dependency instanceof AppBarLayout) {
            CoordinatorLayout.LayoutParamslp= (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
            intfabBottomMargin= lp.bottomMargin;
            intdistanceToScroll= fab.getHeight() + fabBottomMargin;
            floatratio= (float)dependency.getY()/(float)toolbarHeight;
            fab.setTranslationY(-distanceToScroll * ratio);
        }
        returntrue;
    }
}

Where AppUtil.getToolbarHeight(context) is -

publicstaticintgetToolbarHeight(Context context){
        final TypedArray styledAttributes = context.getTheme().obtainStyledAttributes(
                newint[]{R.attr.actionBarSize});
        int toolbarHeight = (int) styledAttributes.getDimension(0, 0);
        styledAttributes.recycle();

        return toolbarHeight;
    }

then in your layout add to FloatingActionButton layout_behavior:

   <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_task_accept"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_accepted"
        app:layout_behavior="pass.to.your.FabScrollBehavior.Class"
        app:theme="@style/Widget.AppTheme.Fab"/>

The whole layout looks like

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:animateLayoutChanges="true"android:orientation="vertical"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/Widget.AppTheme.AppBarOverlay"><includelayout="@layout/include_layout_toolbar_scroll"/></android.support.design.widget.AppBarLayout><includelayout="@layout/include_layout_content_with_nestedscroll"/><android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab_task_accept"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="end|bottom"android:layout_margin="@dimen/fab_margin"android:src="@drawable/ic_accepted"app:layout_behavior="pass.to.FabScrollBehavior.Class"app:theme="@style/Widget.AppTheme.Fab"/></android.support.design.widget.CoordinatorLayout>

Implemented from https://mzgreen.github.io/2015/02/15/How-to-hideshow-Toolbar-when-list-is-scroling(part1)/

Solution 3:

define variable type int in your Activity or fragment to set previous Scroll from ScrollView then use this method to listen change scroll in ScrollView Class

 scrollView.getViewTreeObserver().addOnScrollChangedListener(newViewTreeObserver.OnScrollChangedListener() {
        @OverridepublicvoidonScrollChanged() {

    // previousScrollY this variable is define in your Activity or Fragmentif (scrollView.getScrollY() > previousScrollY && floatingActionButton.getVisibility() == View.VISIBLE) {
                floatingActionButton.hide();
            } elseif (scrollView.getScrollY() < previousScrollY && floatingActionButton.getVisibility() != View.VISIBLE) {
                floatingActionButton.show();
            }
            previousScrollY = scrollView.getScrollY();
        }
    });

will work done all version of android

Solution 4:

After spending such time i have found the solution for it. It may work in all situations. Though it is a hack not the proper solution but you can apply it to make this thing work.

Baca Juga

As we know setOnScrollChangeListener will only work if minimum api 23, so what if my minimum api level is less then 23.

So I found out solution from stack overflow that we can use getViewTreeObserver().addOnScrollChangedListener for that so this will be compatible solution for all devices.

Now let's move to the final solution of over problem "Hide fab button when nested scroll view scrolling and Show fab button when nested scroll view in ideal state"

So for that we can use Handler with postDelayed to slove this issue.

Define on variable in you context private int previousScrollY = 0;
Then use getViewTreeObserver().addOnScrollChangedListener to your nested scroll view like this.

NESTEDSCROLLVIEW.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() { @Override public void onScrollChanged() { new Handler().postDelayed(new Runnable() { @Override public void run() { if (NESTEDSCROLLVIEW.getScrollY() == previousScrollY) { FABBUTTON.setVisibility(View.VISIBLE); } else { FABBUTTON.setVisibility(View.INVISIBLE); } } }, 10); previousScrollY = NESTEDSCROLLVIEW.getScrollY(); } });

Now you are ready to go....

Solution 5:

You can use this listener to observe and hide FAB when scrolling.

nestedScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() { @Override public void onScrollChanged() { if (nestedScrollView != null) { if (nestedScrollView.getChildAt(0).getBottom() <= (nestedScrollView.getHeight() + nestedScrollView.getScrollY())) { fab.setVisibility(View.INVISIBLE); } else { fab.setVisibility(View.VISIBLE); } } } });

Android Devweb