Floating Action Button Scroll weird behavior

Question

I have a FloatingActionButton that implements a behavior for hiding it when scrolling down, and showing it when scrolling up.

However, sometimes when I scroll up, it hides itself and then reappears again. This isn't understandable according to my code, since it's supposed to hide only when scrolling down.

Perhaps it's connected with my CollapsingToolbar that is also scrolling?

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 be happening? I'd appreciate any help.

Thanks.

Answer 1

Call super.

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

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

And why you do that?

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

You can just use the child instead floatingActionButtonChild.

Answer 2

Use this call to set the scroll behaviour of your floating action button.

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 have designed your FAB set its behaviour

<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 behavioural class like this

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