How to Add CrossFade Animation Between Activities in Android?

Android animations are the object which can be said the most important factor for a better user-interface and user-experience in an android application. In a wide series of articles on GeeksforGeeks for making a better UI, UX of an application, this is also going to be the one. In this article, we will know how to add crossfade animation between two activities in android. The meaning of CrossFading here is a smooth transition between two activities. Usually, It means the fading out the one, while fading in another activity. It creates a smooth transition, and for a short period of time users will get a feel for both the activities. Here’s a sample of the same type of animation we are going to create between activities. Note that we are going to implement this project using both Java and Kotlin language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. You can choose the language as per your choice because here we are giving the code for kotlin as well as java.

Step 2: Before going to the coding section first you have to do some pre-task

• Modify the strings.xml file:

XML

<resources>
    <string name="app_name">GFG App</string>
    <string name="go_to_main_activity">GO TO MAIN ACTIVITY</string>
    <string name="go_to_second_activity">GO TO SECOND ACTIVITY</string>
</resources>

• Modify the colors.xml file:

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#00AC28</color>
    <color name="colorPrimaryDark">#09d639</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

Step 3: Create another empty activity

Make sure that you have selected Android for project structure on the top left corner of the screen. Then navigate to java/your_package_name. Now, right-click on your package name and select new here, and select activity and empty activity.

Just give it a name of your choice like we are giving it SecondActivity and click on finish.

Step 4: Working with the layout files

Go to, res/layout/activity_second, and paste the below code. Here, we are using a ConstraintLayout with a Button for switching to another activity. 

Below is the code for the activity_second.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="#09d639"
    tools:context=".SecondActivity">

    <Button
        android:id="@+id/btnSecond"
        android:layout_width="130dp"
        android:layout_height="70dp"
        android:background="#fff"
        android:onClick="goToMainActivity"
        android:text="@string/go_to_main_activity"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="AN GFG APP WAS MADE DURING TUTORIAL"
        android:textColor="@android:color/white"
        android:textSize="19sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnSecond" />

</androidx.constraintlayout.widget.ConstraintLayout>

Also, navigate to the res/layout/activity_main and remove all the default code and paste the below code. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".SecondActivity">

    <Button
        android:id="@+id/btnFirst"
        android:layout_width="130dp"
        android:layout_height="70dp"
        android:onClick="goToSecondActivity"
        android:text="@string/go_to_second_activity"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="OnClick" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Working with the anim files

Please refer to How to Create Anim Folder & Animation File in Android Studio to create the anim folder and the animation file. We have created two animation files and name the file fade_in and fade_out. Now, remove all the default code from fade_in and paste the below code. Below is the code for the fade_in.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0" />

Below is the code for the fade_out.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="700"
    android:fillAfter="true"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="0.0" />

Step 6: Working with the MainActivity file

Just add the following code in your MainActivity class after the onCreate() method. This is the code for going to SecondActivity and we are setting the animation between it.

Java

public void goToSecondActivity (View view) {
        Intent intent = new Intent(MainActivity.this, SecondActivity.class);
        startActivity(intent);
        overridePendingTransition(R.anim.fade_in, R.anim.fade_out);
    }

Kotlin

fun goToSecondActivity(view: View?) {
        val intent = Intent(this@MainActivity, SecondActivity::class.java)
        startActivity(intent)
        overridePendingTransition(R.anim.fade_in, R.anim.fade_out)
    }

Step 7: Working with the SecondActivity file

Also, add the following code in your SecondActivity after the onCreate() method.

Java

public void goToMainActivity (View view) {
        Intent intent = new Intent(SecondActivity.this, MainActivity.class);
        startActivity(intent);
        overridePendingTransition(R.anim.fade_in, R.anim.fade_out);
    }

Kotlin

fun goToMainActivity(view: View?) {
        val intent = Intent(this@SecondActivity, MainActivity::class.java)
        startActivity(intent)
        overridePendingTransition(R.anim.fade_in, R.anim.fade_out)
    }

Output:

GitHub link: https://github.com/shivamparashar165/crossfade_android_anim