Animate your Android App easily in Android Studio without using any third-party library

Animations play an important part in almost every android application. Adding animations to apps make your app more user-friendly and make it more lovable. Here are my timeless tips and techniques to animate your application in minutes. Ready to dive in.

Creating a sample project

To create your first animation, create a new Sample app for playing around with the tips and techniques explained in this tutorial.

Let’s start creating a sample application. To do that, open your Android Studio and create a new project. You can also use any Android Studio version as we are not going to use any feature related to Android Studio. In my case, I am using Android Studio version 3.2.1.

Let me name the app as ‘AndroidAnimations’. You can always name as you like if you want to. 

I am using minimum SDK 21 because we are going to use some features which are available in API 21 or above only. Choose minimum SDK as API 21: Android 5.0 Lollipop

Choose an empty activity, and we can add new activities later on.

I am naming the new activity as ‘ActivityOne’ for simplicity, you can use any name if you want to.

Click finish and let Android Studio build the project files and perform a Gradle sync.

Building the UI

So, here is the default user interface generated by Android Studio

Delete the ‘Hello world’ text view and add a new linear layout on which we will apply our animations. Drag and drop the LinearLayout element onto the UI and here’s how the component tree looks like

Let’s make the background of the ConstraintLayout as #333333 and background of LinearLayout as #FFFFFF to differentiate the objects so that we can clearly see how the animation changes.

Let the id of the LinearLayout be ‘linearLayout’ so that it will become easy to reference this element in the future.

Also, set the alpha property of the linearLayout to 0.

And also let me quickly add the padding as 16dp to the ConstraintLayout to make it look more good. Here is how it looks like.

Here is the layout file

<?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"
    android:background="#333333"
    android:padding="16dp"
    tools:context=".ActvityOne">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FFFFFF"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:alpha="0"></LinearLayout>
</android.support.constraint.ConstraintLayout>

So we are done setting up the project and adding the basic elements to our UI. Let’s start adding animations to it.

Animation #1: Fade in/out

You can imagine fade in/out animations as a light bulb putting on and off. Fade in happens when you turn ‘ON’ a light bulb. The intensity of the light bulb changes from 0 to the maximum intensity it can give. And the fade-out happens when you turn off the light—the intensity changes from maximum to zero.

This animation can be achieved in Android by changing the alpha values within the given timeframe so that it appears appearing/disappearing slowly.

Let’s try to apply fade-in animation to the LinearLayout element which we have created earlier.

We’ll do this animation using the animate() method first and using ObjectAnimator later on.

Using the animate() method

package com.anirudhmergu.androidanimations;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.LinearLayout;

public class ActvityOne extends AppCompatActivity {

    private LinearLayout linearLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_actvity_one);

        linearLayout = findViewById(R.id.linearLayout);

        showAnimation();
    }

    public void showAnimation()
    {
        linearLayout.animate().alpha(1f).setDuration(1500);
    }
}

Android provides animate() API to add simple animations to UI elements. Call the animate() method on the UI element you want to animate.

Simply call the animate() method and call the property method. In my case, I am animating the alpha property, so I am calling alpha() method and setting its value to ‘1F,’ i.e. the maximum value and setting the duration to 1500ms. This animates the alpha property from its initial value to the maximum value in the timeframe of 1500ms.

Calling the showAnimation() method in the onCreate() method is not recommended as it is too early in the life cycle of an Activity. So let’s call showAnimation() method whenever the activity is focused. 

We can do that in the onWindowFocusChanged() method. To do that, we need to override this method. Let’s do this

Add the following code to your existing ActivityOne.java file

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if(hasFocus)
        {
            showAnimation();
        }
    }

hasFocus is a variable which tells us whether the Activity has focus or not. If you want to make the animation to show only once, you can declare a variable in the ActivityOne class and mark it whenever you display animation for the very first time and add a check in the onWindowFocusChanged method. If the animation is shown once, then ignore it or else show the animation. 

So, the final code will be

package com.anirudhmergu.androidanimations;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.LinearLayout;

public class ActvityOne extends AppCompatActivity {

    private LinearLayout linearLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_actvity_one);

        linearLayout = findViewById(R.id.linearLayout);

        showAnimation();
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if(hasFocus)
        {
            showAnimation();
        }
    }

    public void showAnimation()
    {
        linearLayout.animate().alpha(1f).setDuration(1500);
    }
}

Let’s quickly run the application and check whether the animation is showing up or not.