FloatingActionButton doesn't hide

Question

I am trying to hide my FloatingActionButton fabLocation programmatically with :

fabLocation.setVisibility(View.GONE)

but it does not work.

If I add android:visibility="gone" in my XML layout, fabLocation is hidden when I run my activity but it reappears when I scroll.

Here is my layout:

<?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"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/colorOverlay"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/img_couverture"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/bg_navigation_drawer_header"
            app:layout_collapseMode="parallax" />

        <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/ThemeOverlay.AppCompat.Light" />

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

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v7.widget.CardView
            android:layout_marginTop="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="16dp">

                <TextView
                    android:id="@+id/tv_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="18sp" />

                <View
                    android:background="@drawable/separator_orange_gradient"
                    android:layout_marginTop="8dp"
                    android:layout_marginBottom="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="2dp"/>

                <TextView
                    android:id="@+id/tv_history"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textAppearance="@style/TextAppearance.RobotoLight" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </LinearLayout>

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

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:id="@+id/fab_location"
    android:src="@drawable/ic_fab_location_24dp"
    app:backgroundTint="@color/colorOrange"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end" />

Solution 1

It is due to the app:layout_anchor attribute. You must get rid of the anchor before changing visibility:

CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setAnchorId(View.NO_ID);
fab.setLayoutParams(p);
fab.setVisibility(View.GONE);

Solution 2

FloatingActionButtons anchored to AppBarLayouts have a special relationship where their visibility is controlled by the scroll position of the AppBarLayout.

You can turn this off via the behavior_autoHide attribute:

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="..."
    app:behavior_autoHide="false"/>

You can also do this programmatically if you wish:

EDIT:

fab.getBehavior() was not correct, use getBehavior() from its LayoutParams

CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
FloatingActionButton.Behavior behavior = (FloatingActionButton.Behavior) lp.getBehavior();
if (behavior != null) {
    behavior.setAutoHideEnabled(false);
} else {
    behavior = new FloatingActionButton.Behavior();
    behavior.setAutoHideEnabled(false);
    lp.setBehavior(behavior);
}

Solution 3

The most simplistic way to hide and show a floating action button would be to call this in your activity. This will also properly animate your FAB automatically.

Hide:

nameOfYourFAB.Hide();

Show:

nameOfYourFAB.Show();

Solution 4

I wasn't completely happy with any of the solutions posted. Some only worked part of the time, while others only worked for fab.setVisibility(). While I know this is technically what the original question asked, a few responses expressed interest in using fab.hide(), and messing with the layout parameters doesn't exactly get to the root of the issue.

As pointed out by @ChrisBanes, the FloatingActionButton.Behavior being tied to the AppBarLayout is what causes the issue. So, as with his answer, you have to setAutoHideEnabled(false) to disable that functionality. But this solution doesn't help if you actually want the FloatingActionButton to hide automatically and when you call hide() manually.

So in order to do this; I simply disable the auto-hide functionality before I manually hide the Button, then re-enable the functionality after I manually show the Button:

private void hideFloatingActionButton(FloatingActionButton fab) {
    CoordinatorLayout.LayoutParams params =
            (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
    FloatingActionButton.Behavior behavior =
            (FloatingActionButton.Behavior) params.getBehavior();

    if (behavior != null) {
        behavior.setAutoHideEnabled(false);
    }

    fab.hide();
}

private void showFloatingActionButton(FloatingActionButton fab) {
    fab.show();
    CoordinatorLayout.LayoutParams params =
            (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
    FloatingActionButton.Behavior behavior =
            (FloatingActionButton.Behavior) params.getBehavior();

    if (behavior != null) {
        behavior.setAutoHideEnabled(true);
    }
}

Solution 5

FloatingActionButton layers = (FloatingActionButton) findViewById(R.id.layers);
layers.hide();

It works for me, setVisibility doesn't work for FloatingActionButton as it belongs to another viewGroup that doesn't have setVisibility method.

View more solutions

Comments

[Gopal Singh Sirvi]

Thanks ! useful to get button back.

[Linxy]

How do we do this if we use fab.hide() instead of setVisibility(View.GONE)? Because right now your example will show the fab animate (getting smaller) in the top left of the screen for a split second before it dissapears, which is unwanted behavior, ideally you would want it to hide on the spot.

[Konstantin Konopko]

@Linxy have the same issue

[Gatunox]

For others like me. having the same issue with the animation. The solution is to set the fab.width and fab.height to zero as mentioned in this question. stackoverflow.com/questions/32732932/…

[Lisa Wray]

@Linxy: if you still need this, see my answer below. Even setting to width and height 0 didn't help me, I ended up removing and adding the FAB from the parent layout completely.

[NAUSHAD]

my FAB is inside the relative layout without app:layout_anchor and also tried setVisiblity programmatically and through XML. Any solution for this?

[KittoKatto]

fab.getBehavior() method not found?

[inhogo]

It works. get behavior from CoordinatorLayout.LayoutParams

[Jayakrishnan]

It does not work for me so i just set "x" of fab. fab.x = -500f; and fab.x = oldPos; for bring it back

[Mrusful]

Oh, Android, why so complex? Thank you

[Satendra Behre]

It works for me, setVisibility does't work for FloatingActionButton as it belongs to another viewGroup that does't have setVisibility method.

[leeCoder]

this does not work in all cases e.g FAB in CoordinatorLayout is involved

[wrozwad]

Using behavior_autoHide is not enough. By default it's created with default constructor. To make this attribute works you must specify layout_behavior explicit to com.google.android.material.floatingactionbutton.FloatingAct‌​ionButton$Behavior