5

If you use the last version of WhatsApp you will notice that if you long click a textbox in a chat, then the menu icons on the toolbar will change with a nice rotating animation.

How could I reproduce that effect? I know I should invalidate the menu but not how to make the animation.

user3290180
  • 4,260
  • 9
  • 42
  • 77

1 Answers1

24
  1. Use a Toolbar.
  2. Wait for the Toolbar to have its items inflated.
  3. Find the item in question
  4. Animate the item

Example:

mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
    @Override
    public void onLayoutChange(View v, int left, int top, int right, int bottom,
                               int oldLeft, int oldTop, int oldRight, int oldBottom) {
        View item = mToolbar.findViewById(R.id.action_add_item);
        if (item != null) {
            mToolbar.removeOnLayoutChangeListener(this);
            item.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    ObjectAnimator animator = ObjectAnimator
                            .ofFloat(v, "rotation", v.getRotation() + 180);
                    animator.start();
                }
            });
        }
    }
});

Note R.id.action_add_item is the id attribute of the MenuItem.

Simas
  • 43,548
  • 10
  • 88
  • 116
  • this is good, but how to make it rotate on z-axis and replace it with an icon on the same place in the next menu? – user3290180 Jun 11 '15 at 18:24
  • this kind of animation is related to a click event, I'd like to to intercept the changing and make it smoother – user3290180 Jun 11 '15 at 18:26
  • 2
    @user3290180 simply implement a long click listener on a `TextView` and animate the Toolbar views as in my example. To change the icons/drawables you can use a `TransitionDrawable`. – Simas Jun 11 '15 at 18:37