Move the Floating Action Button along with the swiped tab

Question

Let me brief about my idea and what I'm aiming to achieve,

Idea is to have a swipe tab with three tabs in it and each tab screen being represented by a seperate Fragment class. I did this using the "it.neokree:MaterialTabs:0.11" library and everything is working well. Then I created a floating action button (FAB) using the "com.oguzdev:CircularFloatingActionMenu:1.0.2" library.

Now what I'm trying to achieve is to fix this FAB to the fragment in the center tab and when I swipe the screen to go the previous or the next tab the FAB should slide out along with the tab fragment its in and should slide back in along with the center tab screen when I swipe back to it.

I have worked on it till now and now I'm able hide the view in other fragments and show it again in the center fragment by overriding the setUserVisibleHint() method in each fragment class like this.

@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);
   if (isVisibleToUser) {
       View tempView = getActivity().findViewById(R.id.myFAB);
       tempView.setVisibility(View.INVISIBLE);
      }
}

But the problem is I want the FAB to slide out and in along with the center tab just like other views in the tab's fragment class does, but my FAB is simply vanishing and reappearring.

In a way I want the FAB to be exclusive to the center tab and should be fixed to it.

I also tried defining the FAB inside the center Fragment class but it doesn't seem to make any difference. Any Advice and suggestion will be very helpful. Thanks in advance

Answer 1

If you want to show the FloatingActionButton only in the middle/single tab, then you can add the FAB in the Fragment instead of adding it in Activity in which all the Fragments are added.

Answer 2

This library adds it's view to the 'android.R.id.content' ViewGroup. That's why it doesn't matter, where you define it.

Animating such view may be difficult, but should be possible. You have translate the FAB while swiping the pager manually.

By the way, Google recommends to hide the FAB, not swipe:

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.

See: http://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior