Android FloatingActionButton Hide/Show On Page Change

Question

I have a tabbed layout, using SmartTabLayout, with a FloatingActionButton in the bottom right corner. When I transition to another page I would like to hide the FloatingActionButton, then make it reappear as a different color and with a different icon. However when I call the hide() method, change the icon, then call the show() method the hide() method hasn't finished it's animation before the show() is called resulting in the FloatingActionButton not reappearing.

Why am I doing this? Well according to material design for Floating Action Buttons found here, you should follow these two rules when dealing with tabbed layouts:

1. If there is a floating action button on multiple lateral screens (such as on tabs), upon entering each screen, the button should show and hide if the action contained on each is different. If the action is the same, the button should stay on screen (and translate to a new position, if necessary.)
2. For tabbed screens, the floating action button should not exit the screen in the same direction as the screen exits. Doing so creates visual noise. It would also cause a nonfunctional floating action button to appear on screen. Furthermore, it incorrectly implies that the floating action button is at the same the z-level as the content, rather than at the level of the primary UI elements at the root level.

My first thought was to have one FloatingActionButton and simply change it's color and behavior with whichever page I'm on. This works great sans the disappearing act. Then I tried adding a FloatingActionButton to each page fragment, but then I'm getting the undesired result of the FloatingActionButton swiping away with the page (The no-no from #2).

So, now I am back to the one FloatingActionButton.

One other thing I've tried:

1. I've tried putting in an Async task that first calls hide(), changes the FloatingActionButton color, waits 250 milliseconds, then calls show(). This seems hacky, but worked when swiping between pages. But didn't work when clicking the tabs button.

So, if someone could point me in the correct direction, it would be much appreciated.

Current Code:

    HomeTabBar bar = new HomeTabBar();
    ViewGroup tab = (ViewGroup) findViewById(R.id.container);
    tab.addView(LayoutInflater.from(this).inflate( R.layout.demo_custom_tab_icons1 , tab, false));

    mViewPager = (ViewPager) findViewById(R.id.viewpager);
    SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);
    final ViewGroup view = (ViewGroup) findViewById(android.R.id.content);
    viewPagerTab.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

        private int currentPage;

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

        @Override
        public void onPageSelected(int position) {
            currentPage = position;
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            int colorIndex = Color.RED;
            mFab.hide();
            switch (currentPage) {
                case 0:
                    colorIndex = Color.RED;
                    mFab.setImageDrawable(getResources().getDrawable(R.drawable.plus_sign));
                    mFab.show();
                    break;
                case 2:
                    colorIndex = Color.argb(255, 76, 175, 80);
                    mFab.setImageDrawable(getResources().getDrawable(R.drawable.ic_add_bowling_ball_white_24dp));
                    mFab.show();
                    break;
                case 3: colorIndex = Color.BLUE;
                    mFab.setImageDrawable(getResources().getDrawable(R.drawable.ic_add_location_white_24dp));
                    mFab.show();
                    break;
                default: // Leaves the FAB hidden on any other tabs
                    break;
            }
            mFab.setBackgroundTintList(ColorStateList.valueOf(colorIndex));
        }
    });

    bar.setup(viewPagerTab);

    FragmentPagerItems pages = new FragmentPagerItems(this);
    for (Integer title : bar.tabs()) {
        switch( title ) {
            case R.string.player_fragment_tag:
                pages.add(FragmentPagerItem.of(getString(title), PlayerFragment.class));
                break;
            case R.string.series_fragment_tag:
                pages.add(FragmentPagerItem.of( getString( title ), SeriesFragment.class));
                break;
            case R.string.balls_fragment_tag:
                pages.add(FragmentPagerItem.of( getString( title ), BallsFragment.class));
                break;
            case R.string.location_fragment_tag:
                pages.add(FragmentPagerItem.of( getString( title ), BowlingAlleyFragment.class));
                break;
            default:
                break;
        }

    }

    FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
            getSupportFragmentManager(), pages){
        @Override
        public int getItemPosition(Object object) {
            return POSITION_NONE;
        }
    };

    mViewPager.setAdapter(adapter);
    viewPagerTab.setViewPager(mViewPager);

    mToolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
    setSupportActionBar(mToolbar);

Answer 1

I had a similar problem. I wanted to show a Snackbar, after the fab has appeared. I solved it like this:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

FloatingActionButton.OnVisibilityChangedListener fabListener;

fabListener = new FloatingActionButton.OnVisibilityChangedListener(){
  @Override
  public void onShown(FloatingActionButton fab) {

    Snackbar.make(fab, "Replace with your own action", Snackbar.LENGTH_LONG)
    .setAction("Action", null).show();

    super.onShown(fab);
  }
};

fab.show(fabListener);

I think you only need to use fab.hide(fabListener) and the the onHidden() Method which calls fab.show() after you changed the color.

Greetings