Floating Action Button icon image not showing after hide and show

Question

Hi i'm developing an android application with Floating Action Button.

At first time the FAB icon shows icon image. After when i hide and show the icon image will be blank when i click FAB icon

This is the code that is used to hide the FAB

   mainScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
            @Override
            public void onScrollChanged() {
                // previousScrollY this variable is define in your Activity or Fragment
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        Log.i(TAG, "onScrollChanged: scrollview position " + mainScrollView.getScrollY() + " " +
                                previousScrollY + " " +
                                mainScrollView.getChildAt(0).getHeight());
                        if (mainScrollView.getScrollY() > previousScrollY) {
                            fab.hide();
                        } else if (mainScrollView.getScrollY() < previousScrollY) {
                            fab.show();
                        }
                        if (mainScrollView.getScrollY() >= mainScrollView.getChildAt(0).getHeight()) {
                            previousScrollY = mainScrollView.getChildAt(0).getHeight();
                        } else if (mainScrollView.getScrollY() < 0) {
                            previousScrollY = 0;
                        } else {
                            previousScrollY = mainScrollView.getScrollY();
                        }
                    }
                }, 200);
            }

        });

onscrolling down the FAB icon will hide and onScrolling up the FAB icon will show.

And this is the code for FAB setOnClicklistener

    fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (sheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
                    sheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                    fab.setImageResource(R.drawable.ic_close);
                } else {
                    sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                    fab.setImageResource(R.drawable.ic_filter);
                }
            }
        });

This is the fab icon image that appear Before Scrolling and first time loading

this is the image after scrolling and clicking.

user_1758991 · Answer

I know it has been a long time since you posted this but I had the same problem. I solved it by doing a hide() and then a show() to the fab after clicking. (In my particular case I change the drawable in onClick. Doing hide() and show() after changing the drawable solved the issue).

Your code shall look like:

fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (sheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
                    sheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                    fab.setImageResource(R.drawable.ic_close);
                } else {
                    sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                    fab.setImageResource(R.drawable.ic_filter);
                }
                fab.hide();
                fab.show();
            }
        });

user_10416506 · Answer

Did face the same issue with dependency com.google.android.material:material:1.0.0. Upgrading the version to 1.1.0-alpha3 fixed the issue.

user_4929882 · Answer

Your code looks fine. Only thing that could perhaps cause that behaviour in my opinion is the delay handler in your onScrollChanged. Please go to the declaration of your global FloatingActionButtonfab and make it static. See if that helps.

PS: If it does not indeed help, try replacing your fab.hide() with fab.setVisibility(View.INVISIBLE) and fab.show() with fab.setVisibility(View.VISIBLE).

user_8265484 · Answer

use this

 fab.setVisibility(View.VISIBLE); && fab.setVisibility(View.GONE);

insted of this

fab.show(); &&  fab.hide();

user_6857580 · Answer

I solved it by call function hide and show again in onCreateView

fab.hide();
fab.show();

Floating Action Button icon image not showing after hide and show

5 Answers