Floating action button will not disappear when going to another fragment

Question

I built a project based on Scrolling Activity, and faced a strange issue. Consider the following scenario:

I click on fab button to go to another fragment but when the fragment displaces, the fab button will not disappear!

Can anybody know how to fix this problem?

Here is my XML of Scrolling Activity that I added to my frameLayout:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="ir.apio.myapplication.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_scrolling" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />


    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>

content_scrolling.xml :

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="ir.apio.myapplication.ScrollingActivity"
    tools:showIn="@layout/activity_scrolling">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />

</android.support.v4.widget.NestedScrollView>

My fab ClickListener :

fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                getSupportFragmentManager()
                        .beginTransaction()
                        .replace(R.id.frame,new TestFragment())
                        .commit();
            }
        });

And also my TestFragment :

public static class TestFragment extends Fragment {

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

Here is the screen-shot in the first place:

Here is screen-shot when going to the new fragment:

Stith

Replace app:layout_anchor="@id/app_bar" by app:layout_anchor="@+id/app_bar" – Gallstone

@Gallstone I do it but nothing changed :( – Stith

Please share content_scrolling xml – Gallstone

@Gallstone I don't change anything I just go to another fragment , But i'll share it :) – Stith

Take FAB, FrameLayout & NestedScollView all inside a single view layout – Gallstone

@Gallstone not work , I Take them into single RelativeLayout too. – Stith

Are you still using include? – Gallstone

@Gallstone I test it in both situation :( – Stith

@LinX64 I just want to go another fragment when click on FAB . so as second screen-shot shows Fab Still visible in new fragment – Stith

That's weird, let's imagine it like this, we have one activity and one fragment, what are above codes for? for activity or fragment? why you couldn't hide it with that method you said to me before? what are the codes for that second fragment ? you should put that fragment codes here! by the way, i think you should read this: stackoverflow.com/help/mcve – Hornbeck

@LinX64 did you see sample activity which android studio provide when you want to create new project ? I choose one of them called Scrolling Activity then add action on FAB which when clicked go to new Fragment But when going to new fragment FAB still visible. It's placed on top of the Fragment while this should not happen. – Stith

@LinX64 I add Fab clickListener & my fragment class. – Stith

Answer 1

The reason you are still seeing the FAB is elevation, which refers to a views depth on the screen. It affects which elements are above or below one another and the shadows they cast(for example a FAB sits on top of the main content and casts a shadow).

The FAB by default will have some elevation, which you can override using the elevation attribute, eg app:elevation="4dp". The other elements will be at the 0dp level.

In your case, you've put the FrameLayout last in your layout file, and I presume that's where you are loading your fragment into. What this does is not actually replace your other content, but just cover it with the content of your FrameLayout.

The reason it doesn't cover the FAB, is because the FAB has some elevation and the FrameLayout doesn't. So although you've put your FrameLayout last and would normally expect that to be "on top", the FAB actually has a higher elevation which overrides that.

A quick fix, would be to give your floating action button app:elevation=0dp which would put it back on the same elevation level as everything else and the normal rules would apply, the FrameLayout is last and would be on top.

In reality, just putting a big frame covering the previous content is not usually the best thing to do and you would want to look at other ways to structure the app.

Treacy

Thanks , for your answer it's work , what do you suggest to do in this situation for following part of your answer I really appreciate if you guide me :) ? 'putting a big frame covering the previous content is not usually the best thing to do and you would want to look at other ways to structure the app' – Stith

Well, that's quite a large topic so not something I can go into too much detail about here. As a starting point I'd say if you want to replace everything on the screen with something new then it's likely you would use a new activity, but if you want to keep some parts(like keeping the same menu for example) then you probably want to replace part of screen with a new fragment. That's just a simple example though, there's a lot of information out there on when and how to use fragments. – Treacy

Just stumbled across this too, problem is I dont have elevation set on the fab and if i do to 0dp nothing changes... is there any best practise today? question is 2 years old :D if not i need to creat a question by myself – Examine

When you set the elevation to 0 the fab does disappear. However, It is still clickable. – Ament

Answer 2

I had the same problem. I called the .hide() method on the FragmentTransaction and it worked for me.

fab.setOnClickListener {
        val fragmentManager = fragmentManager
        val fragmentTransaction = fragmentManager?.beginTransaction()
        val fragment = YourFragment()
        fragmentTransaction?.add(R.id.fragment_container, fragment)
        fragmentTransaction?.addToBackStack(null)
        fragmentTransaction?.hide(this)
        fragmentTransaction?.commit()
    }

Mccandless