Eggakin Baconwalker
Eggakin Baconwalker

Reputation: 583

Change Behavior of FloatingButton when using CollapsingToolbarLayout

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: enter image description here

after: enter image description here

is there a way to do this?

Upvotes: 1

Views: 438

Answers (1)

Sandro Machado
Sandro Machado

Reputation: 10215

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

Upvotes: 1

Related Questions