FloatingActionButton rotate on clicking button itself

Question

I am using FloatingActionButton and OnClick. I wanted to display PopupMenu and rotate the same FAB button with nice Animation (rotating 90 degree).

On click, it should animate itself :

I am able to display a PopupMenu on its OnClick method but i am not able to rotate FAB itself. In fact, I am able to animate all other FloatingActionButton around it but i tried non of the FloatingActionButton can animate itself OnClick method.

I also tried NOT using FloatingActionButton, but a Simple Button that can animate (rotate) itself..

public class FloatingButtonPanel extends Fragment {

    //.... Other code... 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {


        //.... Other code... 
        final FloatingActionButton butA = (FloatingActionButton) view.findViewById(R.id.fb_menu);

        butA.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                rotateAnimation(v);
            }
        });

        return view;
    }
    public static void rotateAnimation(View v){
        // Create an animation instance
        final Animation an = new RotateAnimation(0, 90, v.getWidth()/2, v.getHeight()/2);
        an.setDuration(1000);
        an.setFillAfter(true);
        v.clearAnimation();
        v.startAnimation(an);
    }
}

Can anyone help ?

Answer 1

First thing is never try to show Over flow menu in the FloatingActionButton(FAB) options menu as per Google design.

Second Thing Fab is just an image view. So like the other image vies you can rotatate it using Matrix

    Matrix matrix = new Matrix();
    FloatingActionButton fab=new FloatingActionButton(this);
    fab.setScaleType(ImageView.ScaleType.MATRIX);   //required
    matrix.postRotate((float) angle, pivX, pivY);
    fab.setImageMatrix(matrix);

You can proceed further with Animators to hide and show the options menu.

Answer 2

Thank you very much @Karthik.

With the useful info you game in your answer, I found another way to work around this, and create same floating menu buttons using help of this post.

By using this custom-circle-button I could use animation + floating menu.