Change Behavior of FloatingButton when using CollapsingToolbarLayout

Question

I'm developing an app, where I have a page with a CollapsingToolbarLayout, and a ImageView (user's picture) in place of the FloatingActionButton.

The default behavior is hide the image when the CollapsingToolbarLayout is fully hide, but I want a different behavior: I would like that when the user scrolls up the page, the image keep going along, but slowly. So, when the it's fully hidden, the image appears below the toolbar,like this (just an example to better uderstanding):

before:

after:

is there a way to do this?

score 1 · Accepted Answer · answered Nov 26 '15 at 19:17

You need to extend the CoordinatorLayout.Behavior<FloatingActionButton> and override the behaviour on the method onDependentViewChanged.

public class ScrollingFABBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> {

    private int toolbarHeight;

    public ScrollingFABBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);

        this.toolbarHeight = GenericUtils.getActionBarHeight(context);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton fab, View dependency) {
        return dependency instanceof AppBarLayout || dependency instanceof Snackbar.SnackbarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton fab, View dependency) {
        if (dependency instanceof AppBarLayout) {
            CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
            int fabBottomMargin = lp.bottomMargin;
            int distanceToScroll = fab.getHeight() + fabBottomMargin;
            float ratio = dependency.getY() / (float) toolbarHeight;

            fab.setTranslationY(-distanceToScroll * ratio);

            return true;
        }

        if (dependency instanceof Snackbar.SnackbarLayout) {
            float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());

            fab.setTranslationY(translationY);

            return true;
        }

        return false;
    }

}

You can check an example of an open source app here: https://github.com/nowsecure/android-vts/blob/master/app/src/main/java/fuzion24/device/vulnerability/test/ScrollingFABBehavior.java

I made some changes to be applied to a ImageView and not FloatingActionButton, and got toolbarHeight through code found here: http://stackoverflow.com/questions/7165830/what-is-the-size-of-actionbar-in-pixels and worked like a charm!! very thanks — Eggakin Baconwalker, Nov 26 '15 at 22:35

Change Behavior of FloatingButton when using CollapsingToolbarLayout

1 Answers1