Using Google Design Library how to hide FAB button on Scroll down?
Solution 1
If you're using RecyclerView
and you're looking for something simple, you can try this:
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener(){
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy){
if (dy > 0)
fabAddNew.hide();
else if (dy < 0)
fabAddNew.show();
}
});
By replacing 0
with a constant, you can adjust the sensitivity of triggering, providing smoother experience
Solution 2
Making a component react to scroll events is most easily done with a custom CoordinatorLayout.Behavior, as they receive scroll events automatically when you override onStartNestedScroll().
An example Behavior that hides and shows the FAB on scroll found in this FABAwareScrollingViewBehavior, built on top of cheesesquare:
public class FABAwareScrollingViewBehavior
extends AppBarLayout.ScrollingViewBehavior {
public FABAwareScrollingViewBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent,
View child, View dependency) {
return super.layoutDependsOn(parent, child, dependency) ||
dependency instanceof FloatingActionButton;
}
@Override
public boolean onStartNestedScroll(
final CoordinatorLayout coordinatorLayout, final View child,
final View directTargetChild, final View target,
final int nestedScrollAxes) {
// Ensure we react to vertical scrolling
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
|| super.onStartNestedScroll(coordinatorLayout, child,
directTargetChild, target, nestedScrollAxes);
}
@Override
public void onNestedScroll(
final CoordinatorLayout coordinatorLayout, final View child,
final View target, final int dxConsumed, final int dyConsumed,
final int dxUnconsumed, final int dyUnconsumed) {
super.onNestedScroll(coordinatorLayout, child, target,
dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
if (dyConsumed > 0) {
// User scrolled down -> hide the FAB
List<View> dependencies = coordinatorLayout.getDependencies(child);
for (View view : dependencies) {
if (view instanceof FloatingActionButton) {
((FloatingActionButton) view).hide();
}
}
} else if (dyConsumed < 0) {
// User scrolled up -> show the FAB
List<View> dependencies = coordinatorLayout.getDependencies(child);
for (View view : dependencies) {
if (view instanceof FloatingActionButton) {
((FloatingActionButton) view).show();
}
}
}
}
}
Where your scrolling view would have app:layout_behavior="com.support.android.designlibdemo.FABAwareScrollingViewBehavior"
instead of app:layout_behavior="@string/appbar_scrolling_view_behavior"
However you can replace hide()
and show()
with any action if you want. Details on how this was done can be found in this post and the follow up post for v22.2.1 and the follow up post for v25.1.0.
Note that this, like all scrolling behaviors of the Design Library, require that your view supports nested scrolling, which currently limits you to NestedScrollView, RecyclerView - ListView
and ScrollView
only work on API21+ devices.
Solution 3
If you're NOT using a RecycleView (that is, just regular ScrollView) this will do the trick:
mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
@Override
public void onScrollChanged() {
if (mScrollView.getScrollY() > oldScrollYPostion) {
fab.hide();
} else if (mScrollView.getScrollY() < oldScrollYPostion || mScrollView.getScrollY() <= 0) {
fab.show();
}
oldScrollYPostion = mScrollView.getScrollY();
}
});
Don't forget to declare:
private int oldScrollYPostion = 0;
inside you class.
Solution 4
The @ianhanniballake solution is working fine but the methods onStartNestedScroll()
and onNestedScroll()
were deprecated. Here is the updated version:
public class FabAwareScrollingViewBehavior extends AppBarLayout.ScrollingViewBehavior {
public FabAwareScrollingViewBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return super.layoutDependsOn(parent, child, dependency) ||
dependency instanceof FloatingActionButton;
}
@Override
public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout,
@NonNull View child, @NonNull View directTargetChild,
@NonNull View target, int axes, int type) {
// Ensure we react to vertical scrolling
return axes == ViewCompat.SCROLL_AXIS_VERTICAL ||
super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, axes, type);
}
@Override
public void onNestedPreScroll(@NonNull CoordinatorLayout coordinatorLayout,
@NonNull View child, @NonNull View target, int dx, int dy,
@NonNull int[] consumed, int type) {
super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);
if (dy > 0) {
// User scrolled down -> hide the FAB
List<View> dependencies = coordinatorLayout.getDependencies(child);
for (View view : dependencies) {
if (view instanceof FloatingActionButton) {
((FloatingActionButton) view).hide();
}
}
} else if (dy < 0) {
// User scrolled up -> show the FAB
List<View> dependencies = coordinatorLayout.getDependencies(child);
for (View view : dependencies) {
if (view instanceof FloatingActionButton) {
((FloatingActionButton) view).show();
}
}
}
}
}
Also there is a very good post by @ianhanniballake on this topic: Intercepting everything with CoordinatorLayout Behaviors
Solution 5
recyclerView.setOnFlingListener(new RecyclerView.OnFlingListener() {
@Override
public boolean onFling(int velocityX, int velocityY) {
if (velocityY < 0)
mScrollCallbacks.showUI();
//Code to hide the UI, I have a custom one that slides down the nav bar and the fab
else if (velocityY > 0)
mScrollCallbacks.hideUI();
//Code to show the UI
return false;
}
});
This works very well
drlobo
Updated on July 09, 2022Comments
-
drlobo almost 2 years
Google have released Design library, I am using
compile 'com.android.support:design:22.2.1'
However I cant see any code examples of how to use this library and how to animate the
FAB
bar on scroll. I guess I can listen for scroll events on theListView
and then animate the button myself, but is this not baked into the API (is this not the point of this support library).Is there examples for this ?
-
koras about 8 yearsThis is the right solution. Just additional explaination: to use it give your android.support.design.widget.FloatingActionButton this attribute: app:layout_behavior="org.example.something.ScrollAwareFABBehavior"
-
Yaroslav about 8 yearsThere is a method ViewCompat.setNestedScrollingEnabled(listView, true);
-
T.Coutlakis about 8 yearsWhat if your RecyclerView is in a Fragment?
-
tochkov about 8 yearsWhat will be the difference if it is?
-
T.Coutlakis about 8 yearsNo access to fabAddNew in Fragment?
-
Jared Burrows about 8 years@T.Coutlakis
((FloatingActionButton) getActivity().findViewById())
-
Jaeger almost 8 yearsWhat an awesome answer! simple and doesn't require any layout modification, +1 .
-
ianhanniballake over 7 years@Yaroslav - sure,
ViewCompat.setNestedScrollingEnabled()
exists, but that just does the version check for you - it is a no-op prior to API 21. -
Pratik Butani over 7 yearsHow it will work if you use custom Scrolling like
EndlessRecyclerViewScrollListener
-
oshurmamadov over 7 yearsafter making child hide [child.hide() ] OnNestedScroll is not calling at all,,,any idea ???
-
ianhanniballake over 7 years@oshurmamadov - that's a change in behavior in v25.1.0 - I've updated the code in the answer to do it the right way now.
-
Usman about 7 yearsIt is the simplest solution and works with a simple copy paste!
-
Mahdi Moqadasi over 5 yearsIt's better to add
fabAddNew.isShown()
to avoid much works on scroll. -
Diego Lovera about 5 yearsIn which elemnt do i have to set the behaviour?
-
Kzaf almost 5 yearsThanks, I was looking for a simple ScrollView solution, almost every article is about RecyclerViews
-
Xam over 3 yearsYou're a life saver. None of the other behaviors worked, but yours did. Thanks so much!
-
Clocker about 3 yearstried this and the fab doesn't come up as a dependency of the layout even though it is a child of coordinator layout so calls to hide/show never happen
-
YaMiN almost 3 yearsDespite all overly mixed programmatically solution with more votes I like this way because first it's working and second it's simple.