Add Simple animations in your android application

anchit

22 September 2017

In this blog, we will learn about how you can add simple animations in your android application.

We all know that adding some small animations in your application can indeed increase the User Experience and the User Engagement of your application.

While you can definitely use some animation libraries like Lottie (from Airbnb) and Shimmer (from facebook). But do we really need their animation? The answer, in reality, is “NO”.
The Android supports many simple animations by default and you can use them on your views and their use is very easy.

If you are new to android animations you can read this blog and get a quick start :

Some basic animations in Android

After reading this small piece, you can easily understand that adding animations is a very easy task.

Also, You can start trying the basic animation by just using this line whenever you start a new activity

// you need to add this line after calling startActivity()
overridePendingTransition(android.R.anim.fade_in,android.R.anim.fade_out);

1 2	// you need to add this line after calling startActivity() overridePendingTransition(android.R.anim.fade_in,android.R.anim.fade_out);

See, using animations is as easy as adding this simple line.

Now, we will learn how to add some animations to some views so that when they are created they appear with some animation.

APPROACH :

In the”res” folder of your project, create a new folder and name it “anim”.
You need to create an xml file in which you will write the code for your animation.
Get the object of the view in your activity/fragment.
Call the startAnimation() method on the view. This method call requires you to send an object of animation in params.
You can either create a new animation object and assign it the value returned by AnimationUtils.loadAnimation()method or directly pass the AnimationUtils.loadAnimation() method in the method used in step4.
The AnimationUtils.loadAnimation() method takes two paramaters : first one is the Context , second one is the id of your xml file in which the animation is set. You need to pass the resourceId of the file you created in step2 (something like R.anim.your_file_name)

CODE :

my_custom_animation_horizontal_scrolling.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:interpolator="@android:anim/linear_interpolator"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:fromXDelta="-300"
    android:toXDelta="300"/>

<?xml version="1.0" encoding="utf-8"?>

<translate xmlns:android="http://schemas.android.com/apk/res/android"

android:duration="4000"

android:interpolator="@android:anim/linear_interpolator"

android:repeatCount="infinite"

android:repeatMode="restart"

android:fromXDelta="-300"

android:toXDelta="300"/>

my_custom_animation_vertical_bounce.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/bounce_interpolator"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:fromYDelta="0"
    android:toYDelta="600" />

<?xml version="1.0" encoding="utf-8"?>

<translate xmlns:android="http://schemas.android.com/apk/res/android"

android:duration="2000"

android:interpolator="@android:anim/bounce_interpolator"

android:repeatCount="infinite"

android:repeatMode="reverse"

android:fromYDelta="0"

android:toYDelta="600" />

Code in your Activity :

        TextView textView = (TextView)findViewById(R.id.textView);
        textView.startAnimation((Animation) AnimationUtils.loadAnimation(SplashScreenActivity.this,R.anim.translate_vertical_bounce));
        
        Animation animation = (Animation)AnimationUtils.loadAnimation(SplashScreenActivity.this,R.anim.translate_horizontal);
        TextView byTextView = (TextView)findViewById(R.id.textView_by);
        byTextView.startAnimation(animation);

TextView textView = (TextView)findViewById(R.id.textView);

textView.startAnimation((Animation) AnimationUtils.loadAnimation(SplashScreenActivity.this,R.anim.translate_vertical_bounce));

Animation animation = (Animation)AnimationUtils.loadAnimation(SplashScreenActivity.this,R.anim.translate_horizontal);

TextView byTextView = (TextView)findViewById(R.id.textView_by);

byTextView.startAnimation(animation);

And it is done.

For seeing the demo of what these animations will be like check the gif.
The “Simple animations demo ” view has bounce effect on it and the “By : Anchit Makkar” has horizontal movement effect on it.

You can explore more animations by changing the values in XML. Explore more till you find what you need