How to add Slide animation between activities in android?

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

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • Create slide_in_right.xml and add the following code.

      slide_in_right.xml



      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • Create slide_out_left.xml and add the following code.

      slide_out_left.xml

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • Create slide_out_right.xml and add the following code.

      slide_out_right.xml

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

  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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    activity_main3.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    MainActivity3.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    activity_main.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    


    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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  9. Comple and Run the app.

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.