How do I make the button the user pressed, shrink in size upon being pressed?

Question

I am developing a mobile game, in the game, the user presses buttons before they shrink, in order to make the game 'fun,' the buttons shrink at a faster and faster rate, so when the user presses one button, another button pops up that shrinks faster. So far I have this code which handles the user input and shrinking of the button, however, once pressed there is no animation, it instantly snaps to the 'shrunk' size, I'm not sure how to go about fixing this issue.

button.setOnClickListener(new Button.OnClickListener(){
        @Override
        public void onClick(View arg0) {
            ViewGroup.LayoutParams params = button.getLayoutParams();
            Integer value = 120;
            while(value >= 2) {
                value = value - 1;
                SystemClock.sleep(50);
                params.width = value;
                params.height = value;
                button.setLayoutParams(params);
            };
        }
    });

I added the SystemClock.sleep(50) line as I thought that is why it was snapping (ie it was so quick that I just didn't see the animation) but that is not the case as the app just hangs until the button's size is updated.

Ps I am quite new when it comes to developing mobile apps.

Answer 1

Edit

Forget what I wrote in my original post. Please try the code below and let me know whether this helps you out.

final ValueAnimator valueAnimator = ValueAnimator.ofFloat(1.0f, 0.0f); //start and end value
        valueAnimator.setDuration(2000); //you can replace 2000 with a variable you can change dynamically
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float animatedValue = (float) animation.getAnimatedValue();
                button.setScaleX(animatedValue);
                button.setScaleY(animatedValue);
            }
        });
        valueAnimator.start();

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                valueAnimator.pause();
            }
        });

Original answer

I would follow the suggestion of 0X0nosugar.

In your Android file tree, under your res directory, add an Android Resource Directory (right-click on res folder > new) and call it "anim". Android Studio probably automatically treat as a folder which holds animation if you use that name. Right-click again on the anim-folder > new > Animation resource file. Name it what you want. In my example I have named it button_animator.

Your file tree will look like this:

Your button_animator.xml could look like this:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="0.1"
        android:fromYScale="1.0"
        android:toYScale="0.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="500" />

</set>

You can tailor the end scale of the button using these lines:

android:toXScale="0.1"

and

android:toYScale="0.1"

Inside your code you can dynamically tailor your animation:

button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Animation shrinkButton = AnimationUtils.loadAnimation(MainActivity.this, R.anim.button_animator); //reference the animator
                shrinkButton.setDuration(5000); //dynamically set the duration of your animation
                button.startAnimation(shrinkButton); //start the animation. Since it is inside an onclicklistener, the animation start on a button click event

                shrinkButton.setAnimationListener(new Animation.AnimationListener() { //you could use an AnimationListener to do something on certain event, like at the end of the animation
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) { //you probably want to something onAnimationEnd, otherwise the button will snap back into its original size.

                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });

            }
        });

In the onAnimationEnd you have to decide what you want to do at the end of the animation. Just a couple of ideas:

@Override
public void onAnimationEnd(Animation animation) { //you probably want to something onAnimationEnd, otherwise the button will snap back into its original size.
    button.setScaleX(0.1f); //same size as in toScale size in the animator xml
    button.setScaleY(0.1f);
}

Or, if you want the button to become invisible:

@Override
public void onAnimationEnd(Animation animation) {
    button.setVisibility(View.INVISIBLE);
}