CODEWITHSUNDEEP
androidandroid-animationfloating-action-button
Manisha
Manisha

Reputation: 873

FloatingActionButton rotate on clicking button itself

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

enter image description here

On click, it should animate itself :

enter image description here

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 ?

Upvotes: 2

Views: 5623

Answers (2)

Manisha
Manisha

Reputation: 873

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.

enter image description here

Upvotes: 0

Karthik kai
Karthik kai

Reputation: 141

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.

Upvotes: 1

Related Questions