How to place the Floating Action Button exclusively on one fragment only in Tab layout

Question

I am trying to achieve the following with no success.I have two material design swipe tabs.I used this library 'com.oguzdev:CircularFloatingActionMenu:1.0.2' to achieve FAB but when i swipe the tab to the second tab,the FAB is still attached to the new fragment.

I would like to hide the FAB on the second Fragment. Is there a way to achieve this?

Answer 1

There are 2 situations that I can think of that make this happen:

1. When getting to the second tab, the previous view, which displayed the FAB button, is not removed when you navigate to your second tab, which leaves it there. For this I suggest looking into removeAllViews().

2. You're inflating the same xml layout file for both tabs. If you want the two tabs to have different content, then they probably should have differently defined xml layout files (in this case, one that mentions a FAB button, one that does not).

Good luck!

Answer 2

It seems like this library assumes that you want to attach the FAB to your activity. The layout params that it generates also seems to assume that the parent is a FrameLayout. It is a little bit hacky, but you can detach it and reattach it where you want after you build() it.

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    FrameLayout root = (FrameLayout) inflater.inflate(R.layout.fragment_fab, container, false);

    FloatingActionButton actionButton = new FloatingActionButton.Builder(getActivity())
            .build();

    actionButton.detach();
    root.addView(actionButton);

    return root;
}

Answer 3

You might check out my answer here: FAB animation with viewpager/tabslider

I think that might be roughly what you're looking for, but you will have to use the Support Library's FAB to accomplish it.

Answer 4

in your firstfragment.xml you must define the floating action button using the above library. i think u r defining it in you activity which has two fragments.

Answer 5

Here is what I did for a similar kind of problem. I declared a coordinator layout for the fragment. Inside that coordinator layout as you can see in the image i have declared a recyclerView that I use and below that i declared my floating action button.

After this I inflated the layout for floating action button in the onCreateView fragment method.

Here is my XML File Code:

<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusableInTouchMode="true">

    <EditText
        android:id="@+id/search_string"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_margin="5dp"
        android:layout_marginTop="50dp"
        android:hint="Search Keyword"
        android:drawableLeft="@drawable/search"
        android:gravity="left" >
    </EditText>

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/photo_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="50dp"
    android:scrollbars="vertical"/>

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_action_name6" />
</android.support.design.widget.CoordinatorLayout>

Here is my Java File Code:

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_photo_list, container, false);

        FloatingActionButton fab = (FloatingActionButton) view.findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Photo photo = new Photo();
                PhotoLab.get(getActivity()).addPhoto(photo);
                Intent intent = PhotoPagerActivity.newIntent(getActivity(), photo.getId());
                startActivity(intent);
                /*Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();*/
                }
        });

        mSearchString=(EditText) view.findViewById(R.id.search_string);
        mPhotoRecyclerView = (RecyclerView) view.findViewById(R.id.photo_recycler_view);
        mPhotoRecyclerView.setLayoutManager(new GridLayoutManager(getActivity(), 3));

        updateUI();
        return view;
    }

Answer 6

If you want it to only be on one fragment, then you could add the FAB on on the fragment xml file itself.