android: Show fab icon only on first tab

Question

I have layout with 5 tabs inside a coordinator layout.

I want to show the fab icon only on the first tab and hide on the rest.

I tried this and its working:

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {

                switch (position) {
                    case 0:
                        fab.show();
                        break;

                    default:
                        fab.hide();
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

the problem is I also wanted the hide on scrolling effect for the fab button.

so I create a ScrollAwareFABBehavior class which extends FloatingActionButton.Behavior and associate the CoordinatorLayout Behavior to the Floating Action Button

package com.simha.yatras;    
import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.View;

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    public ScrollAwareFABBehavior(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 implement it by

<android.support.design.widget.FloatingActionButton
.
.
app:layout_behavior="com.simha.yatras.ScrollAwareFABBehavior"/>

If I got to any tab from the first tab, the icon disappears. (which is what i wanted). But inside that tab if i scroll, the icon is visible if i am at the top and disappears when reached the bottom.

Its appearing in all the tabs.

ScrollAwareFABBehavior is acting on all tabs. How to restrict it to act only on first tab.

score 0 · Answer 1 · edited May 23 '17 at 12:23

I got it worked. I found the solution lately on stackoverflow. Android - FAB to hide when navigating between different fragments in a viewpager

add viewPager as static in the MainActivity then in the scroll behavior do

if (MainActivity.viewPager.getCurrentItem() == 0) {
        if (dyConsunmed > 0 && child.getVisibility() == View.VISIBLE ) {
            child.hide();
        } else if (dyConsunmed < 0 && child.getVisibility() != View.VISIBLE) {
            child.show();
        }

    }

android: Show fab icon only on first tab

1 Answers1