Floating action button. Scroll strange behavior.

Question

I have a FloatingActionButton that implements a behavior to hide when scrolling down and showing it when scrolling up.

However, sometimes when I scroll up, it hides and then reappears again. This is not clear according to my code, as it should hide only when scrolling down.

Perhaps this is due to my CollapsingToolbar , which also scrolls?

This is my layout:

 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="right" android:focusableInTouchMode="true" android:clickable="true" android:layoutDirection="rtl" android:fitsSystemWindows="true" android:id="@+id/drawer_layout"> <android.support.design.widget.CoordinatorLayout android:id="@+id/mainCoordinatorLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:layoutDirection="rtl" android:background="#EEEEEE" android:clickable="true"> <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:fitsSystemWindows="true" android:id="@+id/toolbar_layout"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:contentScrim="?attr/colorPrimary" app:collapsedTitleGravity="right|top" app:expandedTitleGravity="bottom|right" app:expandedTitleMarginBottom="64dp" app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance" app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance" app:expandedTitleMarginEnd="0dp" app:expandedTitleMarginStart="30dp"> <ImageView android:id="@+id/headerImage" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" android:background="@drawable/soldier" /> <View android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="100dp" android:background="@drawable/scrim_top" app:layout_collapseMode="pin" /> <View android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="88dp" android:layout_gravity="bottom" android:layout_alignBottom="@+id/headerImage" android:background="@drawable/scrim_bottom" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="104dp" android:gravity="top" app:titleTextColor="@color/White" android:layout_gravity="right" android:layoutDirection="rtl" app:layout_scrollFlags="scroll|enterAlways" app:layout_collapseMode="pin" app:contentScrim="?attr/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:titleMarginTop="15dp" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" app:tabIndicatorHeight="3dp" android:layoutDirection="ltr" app:tabIndicatorColor="@android:color/white" app:tabSelectedTextColor="@color/White" app:tabTextColor="@color/Black" style="@style/MyCustomTabLayout" app:tabMode="fixed" app:tabGravity="fill"> <android.support.design.widget.TabItem android:icon="@drawable/ic_book_white_24px" android:text="ספרים" /> <android.support.design.widget.TabItem android:icon="@drawable/soldierWhite" android:text="הלכות" /> <android.support.design.widget.TabItem android:icon="@drawable/ic_home_white_24px" android:text="בית" /> </android.support.design.widget.TabLayout> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/content_frame" android:visibility="gone" android:animateLayoutChanges="true" app:layout_behavior="@string/appbar_scrolling_view_behavior" app:behavior_overlapTop="0dp"> </FrameLayout> <android.support.v4.view.ViewPager android:id="@+id/mainPager" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:layout_width="match_parent" android:layout_height="match_parent" app:behavior_overlapTop="0dp" /> <android.support.design.widget.FloatingActionButton android:id="@+id/mainFab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_gravity="bottom|end" android:layout_marginLeft="16dp" android:layout_marginBottom="16dp" android:layout_marginTop="5dp" android:elevation="8dp" app:layout_behavior="@string/fab_scroll_translation_autohide_behavior" app:pressedTranslationZ="12dp" app:backgroundTint="?android:colorAccent" android:src="@drawable/ic_perm_phone_msg_white_24px" /> <LinearLayout android:id="@+id/miniFabFrame" android:focusableInTouchMode="true" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="invisible" android:layout_alignParentLeft="true" android:layout_gravity="bottom|end" android:layout_marginLeft="20dp" android:layout_marginBottom="80dp" android:padding="0dp"> <android.support.design.widget.FloatingActionButton android:id="@+id/messageFab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:elevation="8dp" android:layout_marginTop="5dp" android:layout_marginRight="0dp" android:layout_marginBottom="5dp" android:layout_marginLeft="5dp" app:pressedTranslationZ="12dp" app:backgroundTint="?android:colorPrimary" app:fabSize="mini" android:src="@drawable/ic_textSMS_white_24px" /> <android.support.design.widget.FloatingActionButton android:id="@+id/callFab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_marginTop="5dp" android:layout_marginRight="0dp" android:layout_marginBottom="5dp" android:layout_marginLeft="5dp" android:elevation="8dp" app:pressedTranslationZ="12dp" app:backgroundTint="?android:colorPrimary" app:fabSize="mini" android:src="@drawable/ic_call_white_24px" /> </LinearLayout> </android.support.design.widget.CoordinatorLayout> <android.support.design.widget.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="right" android:id="@+id/nav_view" android:layoutDirection="rtl" app:headerLayout="@layout/header" app:menu="@menu/nav_menu" /> </android.support.v4.widget.DrawerLayout> 

This is my behavior:

 [Register("ToratHamachane.ScrollAwareFABBehavior")] public class ScrollAwareFABBehavior : CoordinatorLayout.Behavior { public ScrollAwareFABBehavior(Context context, IAttributeSet attrs) : base(context, attrs) { } public override bool OnStartNestedScroll(CoordinatorLayout coordinatorLayout, Java.Lang.Object child, View directTargetChild, View target, int nestedScrollAxes) { return nestedScrollAxes == ViewCompat.ScrollAxisVertical || base.OnStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes); } public override void OnNestedScroll(CoordinatorLayout coordinatorLayout, Java.Lang.Object child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) { base.OnNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed); var floatingActionButtonChild = child.JavaCast<FloatingActionButton>(); if (dyConsumed > 0 && floatingActionButtonChild.Visibility == ViewStates.Visible) floatingActionButtonChild.Hide(); else if (dyConsumed < 0 && floatingActionButtonChild.Visibility != ViewStates.Visible) floatingActionButtonChild.Show(); } } 

Any ideas why this might happen? I would be grateful for any help.

Thanks.

Answer 1

The challenge is super.

 public ScrollAwareFABBehavior(Context context, IAttributeSet attrs) : base(context, attrs){ super(); } 

If this does not solve your problem, add the behavior to your collapsingtoolbar.

And why are you doing this?

 var floatingActionButtonChild = child.JavaCast<FloatingActionButton>(); 

You can simply use a child element instead of floatActionButtonChild.

Answer 2

Use this call to set the scroll behavior of your button with a floating action.

 public class ScrollAwareFabBehaviour extends FloatingActionButton.Behavior { public ScrollAwareFabBehaviour(Context context, AttributeSet attrs) { super(); } @Override public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton 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 FloatingActionButton 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 && child.getVisibility() == View.VISIBLE) { // User scrolled down and the FAB is currently visible -> hide the FAB child.hide(); } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) { // User scrolled up and the FAB is currently not visible -> show the FAB child.show(); } } } 

and in your xml where you developed your FAB, set its behavior

 <android.support.design.widget.FloatingActionButton android:id="@+id/fab_add_note" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="@dimen/fab_margin" android:clickable="true" android:src="@drawable/ic_add_white_24dp" app:backgroundTint="@color/blue_grey_accent_color" app:layout_anchor="@id/recycler_notes" app:layout_anchorGravity="bottom|right|end" app:layout_behavior="@string/fab_behaviour" app:rippleColor="#FFF" /> 

in strings.xml define your behavioral class as follows

 <string name="fab_behaviour">com.suman.swets.example.uiviews.ScrollAwareFabBehaviour</string>