How to add Slide animation between activities in android?

0 0 3 minutes read

In this article, we will learn about how to add slide screen animation between different activities to make UX better. Apps are made up of many activities and to navigate between the activities slide screen animation can be very useful. Animation plays a very critical role in any app if the app has animation in it then it surely attracts the user.

Approach:

Create a new Android Resource Directory and for that right-click on res folder -> Android
Resource Directory, make sure to select resource type as anim.

Create slide_in_left.xml and add the following code.

slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXDelta="-100%p"
        android:toXDelta="0" />
</set>

Create slide_in_right.xml and add the following code.

slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>

Create slide_out_left.xml and add the following code.

slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />
</set>

Create slide_out_right.xml and add the following code.

slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXDelta="0"
        android:toXDelta="100%p" />
</set>

Now create activity_main2.xml file. Add the following code. In this file we add onClick attribute to our button which will invoke the open3rdActivity function when clicked.

activity_main2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity2">
  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Learn Algorithm"
        android:textColor="#219806"
        android:textSize="30sp" />
  
    <Button
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="Open3rdActivity"
        android:text="Open Third Activity" />
  
</LinearLayout>

Now create activity_main3.xml file. Add the following code, it will add a textview in the layout.

activity_main3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity3">
  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Buy Course"
        android:textColor="#219806"
        android:textSize="30sp" />
  
</LinearLayout>

Now create MainActivity2.java file. Add the following code. Here we add a function, Open3rdActivity which is invoked when the button is clicked. It uses intent to open MainActivity3. Also we override onBackPressed function to add the animation for going back from the current activity.

MainActivity2.java

package org.zambiatek.gfgslidescreen;
  
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
  
public class MainActivity2 extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
    }
  
    // This function gets invoked automatically when the
    // user clicks on the button.
    public void Open3rdActivity(View view)
    {
        Intent intent = new Intent(this, MainActivity3.class);
        startActivity(intent);
    }
  
    // when the user pressed back button this function
    // get invoked automatically.
    @Override
    public void onBackPressed()
    {
        super.onBackPressed();
        overridePendingTransition(R.anim.slide_in_left,
                                  R.anim.slide_out_right);
    }
}

Now create MainActivity3.java file. Add the following code.

MainActivity3.java

package org.zambiatek.gfgslidescreen;
  
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
  
public class MainActivity3 extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
    }
}

Now add the following code in activity_main.xml file.In this file we add onClick attribute to our button.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GeeksForGeeks"
        android:textColor="#219806"
        android:textSize="30sp" />
  
    <Button
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="OpenSecondActivity"
        android:text="Open Second Activity " />
  
</LinearLayout>

Now add the following code in MainActivity.java file. Here we add function OpenSecondActivity which is invoked when the button is clicked. t uses intent to open MainActivity3. Also in the function we add animation for the transition to MainActivity2.

MainActivity.java

package org.zambiatek.gfgslidescreen;
  
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
  
    // when the user pressed back button this function
    // get invoked automatically.
    public void OpenSecondActivity(View view)
    {
        Intent intent = new Intent(this, MainActivity2.class);
        startActivity(intent);
        overridePendingTransition(R.anim.slide_in_right,
                                  R.anim.slide_out_left);
    }
}

Don’t forget to add activities in Manifest file.
Output:

You can observe that when the user click on OpenSecondActivity button and OpenThirdAcivity button then both button open activity in different animation.
When the user is at Third Activity and press the back button default animation get invoked whereas when the user is at Second activity and press back button our defined animation get invoked.

If you want to set the animation in whole app you can do so by following this simple step. Add the following code in style.xml file.

style.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">
                    @color/colorPrimary</item>
        <item name="colorPrimaryDark">
                    @color/colorPrimaryDark</item>
        <item name="colorAccent">
                    @color/colorAccent</item>
        <item name="android:windowAnimationStyle">
                    @style/MyCustomActivityAnimation</item>
    </style>
  
    <style name="MyCustomActivityAnimation"
                parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">
                    @anim/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">
                    @anim/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">
                    @anim/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">
                    @anim/slide_out_right</item>
    </style>
</resources>