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!.
View Comments (0)