How to change text color of button after being click,and revert back to default at second clicked?

Question

I have a like button,when user clicked at the 1st time,I want

1)Text color of like button change to blue color

2) setVisibility of another LinearLayout to visible

3) setText to another Text widget to certain string.

When user click the button for the second time,reverse to the previous state.Therefore I use ValueAnimator to detect whether the button have been clicked before and change the color of text.This works well,but when I add the code to do the action of 2 and 3 above,the ValueAnimator lose effect.

Here is my code

holder.like.setOnClickListener(new View.OnClickListener() {
ValueAnimator buttonColorAnim = null; // to hold the button animator

        @Override
        public void onClick(View v) {
            // first time this will be null
            //here is not the 1st time
            if(buttonColorAnim != null){
                // reverse the color
                buttonColorAnim.reverse();
                // reset for next time click
                buttonColorAnim = null;
               //here set the linear layout gone.
                holder.amountLayout.setVisibility(GONE);


                // add your code here to remove from database
            }
            else {

                //here is 1st time
                final Button button = (Button) v;
                // create a color value animator
                buttonColorAnim = ValueAnimator.ofObject(new ArgbEvaluator(), Color.BLUE, Color.BLACK);
                // add a update listener for the animator.
                buttonColorAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animator) {
                        // set the background color
                        button.setTextColor((Integer) animator.getAnimatedValue());
                    }
                });

                // start the animator..
                buttonColorAnim.start();

                //here I do the action 2 and 3
                holder.amountLayout.setVisibility(VISIBLE);
                holder.likeAmount.setText("You liked this!");



                // add your code here to add to database
            }

        }
    });

What I get is,button clicked at the 1st time, amountLayout showing, likeAmount text is set,but the color of like button is remain the same, like button text color only changed at the second time clicked. I attached the output I get at the image below

This is outlook before clicking the Like button

This is the outlook when Like button being clicked in the First time,suppose the text Like should turn to blue color and the You liked this shown up,but now the Like text color not change.

This is the outlook when Like button being clicked in the Second time,suppose here text color should be black and You liked this is gone,but now it is blue .

Somebody please help me take a look on my logic and point me to the right direction.Any help is appreciated.

UPDATE After following solution of @rckrd,which is adding this line in my code buttonColorAnim.setDuration(10000)

the like button text color doesnt turn back to change immediately to blue in 1st click,but still remain blue in the second click,after a certain time,then only it change back to black .

Can someone provide a solution,where the text color will change immediately either the 1st click the button or 2nd click of button?

Answer 1

The animation is set up to go from blue to black:

buttonColorAnim = ValueAnimator.ofObject(new ArgbEvaluator(), Color.BLUE, Color.BLACK);

The text color of the button is black from start and since no duration is set on the animation the default duration (300 ms) will be used. Thus, you will not see the any change of color. When the animation is reversed the text color will change from black to blue.

If the animation duration is increased, buttonColorAnim.setDuration(10000) , you will be able to see that your text change from blue to black.

You can also use the ObjectAnimator , this way you don't have to set a update listener. In the below example the text is changed from black to blue during 1.5 secods.

buttonColorAnim = ObjectAnimator.ofInt(button,"textColor", Color.BLACK,Color.BLUE);
buttonColorAnim.setEvaluator(new ArgbEvaluator());
buttonColorAnim.setDuration(1500);