Floating Action Button Scroll weird behavior

AmitaiRosenbergAmitaiRosenberg USMember ✭✭
edited July 2016 in Xamarin.Android

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

However, when I scroll up fast, it hides itself and then shows 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 Collapsing Toolbar that is also scrolling?

This is my layout:

<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>
<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" />
<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">
</FrameLayout>
<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:visibility="gone"
    style="@style/Base.Widget.AppCompat.ProgressBar" />
<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>

My behavior is this:

 [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?

Sign In or Register to comment.