Android Button Animation Top 8 Styles you can apply in Android Studio

What's in this blog? Hide

Android Button Animation

Android Button Animation is a great way to provide a better user experience to your app users. In this blog learn about different types of animation styles you can apply to your Android buttons widget.

Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!

Android Button Animation

Getting Started

To get started with this tutorial from scratch you can create an empty android studio activity else you can skip this step and proceed further if you are already working on some Android Studio project and want to learn about Android button animation.

Creating Layout file

In an empty layout file, create a simple android button widget. Code for the following is as follow:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/hello_world"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Coding the Android Button Animation

Now first create the Button object in your java class and lets code their animation below:

Transparency Effect (Alpha)

To get the transparency effect in your android buttons like shown in the Medium app above, we play with alpha values of our buttons.

First set the alpha value of your button to zero and then animate the alpha value to 1.0f to get complete 100% opacity. Note here you can change the curation of the animation as well by using the setDuration function. See the code below:

        //findviewbyID
        Button helloWorld = findViewById(R.id.hello_world);

        //Set button alpha to zero
        helloWorld.setAlpha(0f);
        
        //Animate the alpha value to 1f and set duration as 1.5 secs.
        helloWorld.animate().alpha(1f).setDuration(1500);

Move the button (Translation)

To move your button like we have shown in the Medium example app above, we use the translation property i.e., transationX and translationY.

To achieve an animation like the Medium app buttons, we will first use setTranslationY to change position of our button on the Y asix and then animate its position to previous location by using translationByY.

        helloWorld = findViewById(R.id.hello_world);

        helloWorld.setAlpha(0f);
        helloWorld.setTranslationY(50);
        
        helloWorld.animate().alpha(1f).translationYBy(-50).setDuration(1500);

translationX vs translationXBy

While coding you may have noticed that there are two different properties of translation for both X and Y i.e., translationX vs translationXBy.

translationX is used to animate the Android button to that particular point on the activity where as translationXBy animates the Android Button by the amount mentioned.

Rotate the Button

If you wish to rotate the button you can easily do this by using the rotation property rotation();

helloWorld = findViewById(R.id.hello_world);
helloWorld.animate().rotation(120).setDuration(3000);

Rotate on Axis

If you want to rotate the button on axis i.e, on X axis or on the Y axis, you can achieve the same by using rotationX or rotationY.

helloWorld = findViewById(R.id.hello_world);
helloWorld.animate().rotationX(120).setDuration(3000);

Scale the Button

If you wish to scale your button then you can use scaleXBy or scaleYBy property. Here is an example for the same:

helloWorld = findViewById(R.id.hello_world);
helloWorld.animate().scaleYBy(1).setDuration(3000);

Set Delay

You can easily set Delay using the setStartDelay function.

helloWorld = findViewById(R.id.hello_world);
helloWorld.setAlpha(0f);
helloWorld.setTranslationY(50);
       helloWorld.animate().alpha(1f).translationYBy(-50).setStartDelay(200).setDuration(1500);

Set Actions

One can easily set the start or the end actions after animation starts or gets finished by using withStartAction or with EndAction methods.

//End Action

helloWorld.animate().alpha(1f).translationYBy(-50).setStartDelay(200).withEndAction(new Runnable() {
            @Override
            public void run() {
                //End Action
                Toast.makeText(MainActivity.this,"Animating Button",Toast.LENGTH_SHORT).show();
            }
        }).setDuration(1500);

TaDa Viola! So here we are done with learning 8 different animation actions you apply to your Android Button Animation.

To learn more about designing a button See here: Android Button Design, 6 different styles!.