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

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.

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()
    }