How to change FloatingActionButton between Tabs?

Question

I\'m trying to implement FloatingActionButton from Google Design Support Library into two of three tabs, and according to t

Answer 1

Finally, I've found a solution that's pretty easy and shows an animation that's exactly like the attached gif – in @Nauman's oder @Omid's solutions, the show animation starts before the hide animation has finished. But be sure to use the newest Support Library! I've tested it with version 23.2.1.

Use case:

• Show fab 1 on tab 1 (index 0)
• Show fab 2 on tab 2 (index 1)
• Don't show any fab on tab 3 (index 2)

In your xml, place to fabs with unique id's and visibility set to invisible:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/some_icon"
    android:visibility="invisible" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/another_icon"
    android:visibility="invisible" />

Then, add two fields for your fabs to your Activity (you can also use local variables or get the View each time by findViewById(...)):

public class MainActivity extends AppCompatActivity {
    private FloatingActionButton fab1;
    private FloatingActionButton fab2;

In your onCreate(...) function, find these views and save them into the declared fields:

fab1 = (FloatingActionButton) findViewById(R.id.fab1);
fab2 = (FloatingActionButton) findViewById(R.id.fab2);

Next declare a function that shows the right fab for the given position. The default case (tab 3 or more) is quite easy: Just call the hide() method on the fabs. show() and hide() already implement a scaling animation. But if we hide fab2 on tab 1, we have to wait until it has finished before we can show fab1. So set an FloatingActionButton.OnVisibilityChangedListener as parameter for the hide(...) method and show the desired new fab in the onHidden(...) method of that listener. The result is this:

public void showRightFab(int tab) {
    switch (tab) {
        case 0:
            fab2.hide(new FloatingActionButton.OnVisibilityChangedListener() {
                @Override
                public void onHidden(FloatingActionButton fab) {
                    fab1.show();
                }
            });
            break;

        case 1:
            fab1.hide(new FloatingActionButton.OnVisibilityChangedListener() [
                @Override
                public void onHidden(FloatingActionButton fab) {
                    fab2.show();
                }
            });
            break;

        default:
            fab1.hide();
            fab2.hide();
            break;
    }
}

That was the most difficult part! Now add a listener to the ViewPager to call the showRightFab(...) function each time the selected tab changes.

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageSelected(int position) {
        showRightFab(position);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override
    public void onPageScrollStateChanged(int state) {}
});

At last, call the function one time manually in the onCreate(...) method to show the fab at the default tab, because the ViewPager.OnPageChangeListener's onPageSelected(...) method isn't called on startup (e. g. otherwise if you open the app and it shows tab 1, no fab will be shown because the showRightFab(...) function has never been called).

showRightFab(viewPager.getCurrentItem());

That work's perfectly in my application!