How to animate FloatingActionButton of new Design Support Library

Question

I am using a TabLayout with 5 different fragments. On 3 of these fragments a android.support.design.widget.FloatingActionButton should appear. Right now I simply set the visibility of the FAB when the tab changes, but I would like to have an animation, where the FAB comes in and out. How can I achieve this in Android?

Solution 1

Because I did not want to extend the FloatingActionButton, I made it this way:

FloatingActionButton createButton;

// ...

Animation makeInAnimation = AnimationUtils.makeInAnimation(getBaseContext(), false);
makeInAnimation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationEnd(Animation animation) { }

    @Override
    public void onAnimationRepeat(Animation animation) { }

    @Override
    public void onAnimationStart(Animation animation) {
        createButton.setVisibility(View.VISIBLE);
    }
});

Animation makeOutAnimation = AnimationUtils.makeOutAnimation(getBaseContext(), true);
makeOutAnimation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationEnd(Animation animation) {
        createButton.setVisibility(View.INVISIBLE);
    }

    @Override
    public void onAnimationRepeat(Animation animation) { }

    @Override
    public void onAnimationStart(Animation animation) { }
});

// ...

if (createButton.isShown()) {
    createButton.startAnimation(makeOutAnimation);
}

// ...

if (!createButton.isShown()) {
    createButton.startAnimation(makeInAnimation);
}

Solution 2

The hide/show animation for shrink/pop are automatically handled by the new version of the Support Library.(22.2.1) Then OnTabChange listener show or hide the floating action button using show/hide methods provided by the new library.

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

Solution 3

The design support library revision 22.2.1 (July 2015) added the hide() and show() methods to the FloatingActionButton class, so you can use these from now on.

http://developer.android.com/tools/support-library/index.html

Solution 4

You want something like this? But instead of animating it on onScrollListener you can animate it on onCreateView or onCreate method. Follow this --> Implement Floating Action Button – Part 2

Basically the code sums up only to this

Animate to Hide

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.animate().translationY(floatingActionButton.getHeight() + 16).setInterpolator(new AccelerateInterpolator(2)).start();

and

Animate back to Show

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();

but we dont want it to animate just to hide it so, 'Animate to Hide' will just be something like this

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16);

On 'Animate to Hide' put that on the onCreateView or onCreate method so that on your FAB is hidden when you create this fragment and you could then add a handler and runnable that will trigger 'Animate back to Show' after a second or two to show your animation

or you could use a time for short animations

int mShortAnimationDuration = getResources().getInteger(
            android.R.integer.config_shortAnimTime);

I tried this one on onScroll but haven't tried on onCreateView or onCreate but I guess it should work

--EDIT--

Try this code ;)

public class DummyFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        int mShortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);

        FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
        floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16);

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();

            }, mShortAnimationDuration);
        }
    }
}

Solution 5

The easiest way is to extend the FloatingActionButton class and override setVisibility. Like this:

public void setVisibility(final int visibility) {
    if (getVisibility() != View.VISIBLE && visibility == View.VISIBLE && inAnim != null) {
        animator = // create your animator here
        super.setVisibility(visibility);
    } else if (getVisibility() == View.VISIBLE && visibility != View.VISIBLE) {
        AnimatorListenerAdapter listener = new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animator) {
                Button.super.setVisibility(visibility);
            }
        });
        animator = // create your animator here
        animator.addListener(listener);
    }
}

The code above is taken from the Button class from my library. You can find sample implementations in sources.

View more solutions

Comments

[Gabriele Mariotti]

The best way is to use a custom FloatingActionButton.Behavior

[Alexander Farber]

I have replaced setAnimation() calls by startAnimation() in your answer - see similar question here: FAB does not animate - test code and screenshot attached

[ThanosFisherman]

They don't offer out of the box animation though

[Jarett Millard]

@ThanosF The FAB will animate when using show() or hide(), but only if the view has already been laid out.

[Hack5]

Can I use this in my (not non-profit) app? Should I give credit?