How to add Slide animation between activities in android?

23 Jun, 2022
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 -> AndroidResource Directory, make sure to select resource type as anim.Create the below files for different animations.Create slide_in_left.xml and add the following code.slide_in_left.xmlslide_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.xmlslide_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.xmlslide_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.xmlslide_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.xmlactivity_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.xmlactivity_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.javaMainActivity2.javapackage org.geeksforgeeks.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.javaMainActivity3.javapackage org.geeksforgeeks.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.xmlactivity_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.javaMainActivity.javapackage org.geeksforgeeks.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.Video Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20200612162819/Record_2020-06-12-16-26-51_362beaafa7b641b43e176a1856bf3d4f1.mp400:0000:0000:09Use Up/Down Arrow keys to increase or decrease volume.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.xmlstyle.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>Complete and Run the app.Video Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20200612164225/Record_2020-06-12-16-41-06_362beaafa7b641b43e176a1856bf3d4f1.mp400:0000:0000:08Use Up/Down Arrow keys to increase or decrease volume.
Create a new Android Resource Directory and for that right-click on res folder -> AndroidResource Directory, make sure to select resource type as anim.
Create the below files for different animations.Create slide_in_left.xml and add the following code.slide_in_left.xmlslide_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.xmlslide_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.xmlslide_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.xmlslide_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>
Create slide_in_left.xml and add the following code.slide_in_left.xmlslide_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>
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.xmlslide_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>
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.xmlslide_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>
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.xmlslide_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>
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.xmlactivity_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>
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.xmlactivity_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>
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.javaMainActivity2.javapackage org.geeksforgeeks.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);    }}
MainActivity2.java
package org.geeksforgeeks.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.javaMainActivity3.javapackage org.geeksforgeeks.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);    }}
MainActivity3.java
package org.geeksforgeeks.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.xmlactivity_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>
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.javaMainActivity.javapackage org.geeksforgeeks.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.Video Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20200612162819/Record_2020-06-12-16-26-51_362beaafa7b641b43e176a1856bf3d4f1.mp400:0000:0000:09Use Up/Down Arrow keys to increase or decrease volume.
MainActivity.java
package org.geeksforgeeks.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);    }}
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.xmlstyle.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>
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>
Complete and Run the app.Video Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20200612164225/Record_2020-06-12-16-41-06_362beaafa7b641b43e176a1856bf3d4f1.mp400:0000:0000:08Use Up/Down Arrow keys to increase or decrease volume.
vinayedula
android
Java
Java
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Interfaces in Java
ArrayList in Java
Collections in Java
Stream In Java
Set in Java
Singleton Class in Java
Initializing a List in Java
Introduction to Java
Constructors in Java
Multithreading in Java