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.

Answer 1

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

Answer 2

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.