Setting animation in a FAB lib.

[Informatheus]

Hello! Congratulations at first. I want this amazing animation on the button of my radio player, but im already using a FAB lib (https://github.com/Clans/FloatingActionButton) and I was not able to understand how to put this effect on my button. Any help is appreciated. Thanks in advance.

[PrathameshKesarkar]

have you used co-ordinate layout

[PureDark]

I had the same need and I figured it out. Here's my example to start the animation when the FAB is clicked (I use FAB from android design library but it should be the same with the FAB lib you're using):

FloatingActionButton fab_add = (FloatingActionButton) findViewById(R.id.fab_add);
        final Animatable icon = (Animatable) ResourcesCompat.getDrawable(this, R.drawable.ic_arrow_to_drawer);
        fab_add.setImageDrawable((Drawable)icon);
        fab_add.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                icon.start();
            }
        });

It is pretty much the same case with any other view that supports drawable as icon or background.

[svenoaks]

@PureDark, this works, but only once for each drawable. How do you reset the animation state, so you can run the animation over and over?

[PureDark]

@svenoaks Store the drawable,

private Animatable icon;

and do as below every single time:

    fab.setImageDrawable((Drawable)icon);
    icon.start();

a more elegance way would be:

public class MyFloatingActionButton extends FloatingActionButton {
    private Animatable startIcon, endIcon;
    public MyFloatingActionButton(Context context) {
        super(context);
    }

    public MyFloatingActionButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyFloatingActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setStartIcon(Animatable startIcon){
        this.startIcon = startIcon;
        this.setImageDrawable((Drawable)startIcon);
    }

    public void setEndIcon(Animatable endIcon){
        this.endIcon = endIcon;
    }

    public void start(){
        if(startIcon!=null){
            this.setImageDrawable((Drawable)startIcon);
            startIcon.start();
        }
    }

    public void reverse(){
        if(endIcon!=null){
            this.setImageDrawable((Drawable)endIcon);
            endIcon.start();
        }
    }

}

And set the initial icon in onCreate

        Animatable crossStartIcon = (Animatable) ResourcesCompat.getDrawable(this, R.drawable.vector_animated_cross_0_to_45);
        Animatable crossEndIcon = (Animatable) ResourcesCompat.getDrawable(this, R.drawable.vector_animated_cross_45_to_0);
        fabAdd = (MyFloatingActionButton) findViewById(R.id.fab_add);
        fabAdd.setStartIcon(crossStartIcon);
        fabAdd.setEndIcon(crossEndIcon);

[svenoaks]

Thanks but gets messed up in random ways when screen rotates and variables reassigned. Only consistent way was to use AnimatedVectorDrawable to get the variable instead.