Skip to content
Related Articles

Related Articles

Improve Article

How to add Slide animation between activities in android?

  • Last Updated : 25 Jun, 2020

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:

  1. 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 the below files for different animations.

    • Create slide_in_left.xml and add the following code.

      slide_in_left.xml




      <?xml version="1.0" encoding="utf-8"?>
          <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"?>
          <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"?>
          <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"?>
          <translate
              android:duration="@android:integer/config_mediumAnimTime"
              android:fromXDelta="0"
              android:toXDelta="100%p" />
      </set>

  2. 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: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>

  3. 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: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>

  4. 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.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);
        }
    }

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

    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);
        }
    }

  6. 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: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>

  7. 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.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.

  8. 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>

  9. Comple and Run the app.

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :