Tutorial: Activity slide animation

In this short tutorial I show you how you can add an animation to your activities when they go from one activity to another. In this tutorial the first activity slides to the left, while the new activity slides in from the right.

See the video, for the animation we build in this tutorial:

What we need:
- A button which initiates the launch of the new activity (Intent)
- Definition of our animations (through XML).
- Make the references in our Java class when to initiate the sliding animation.

First lets create two simple activities. The first one having a button to open the new activity and the second activity which shows a text so that we know we just ended up in the new activity.

Add a second Java class to your project and call it SecondActivity. Don’t forget to add this class into your AndroidManifest.xml as well.

Open your layout out folder and create a simple button in your activity_main.xml

activity_main.xml

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

    <Button
        android:id="@+id/btnWindowAnimation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Open Sesame !" />

</RelativeLayout>

Now add a new XML in the resources folder and call it screen2.xml (this is the activity which will open after you click on the button “Open Sesame”.

Screen2.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="198dp"
        android:text="I slided in from your right"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Now that we have done the practical stuff, we need to create the animations. We define each animation in a separate XML and call them animation.xml and animation2.xml. Create these two XML files in a folder called anim in your resources folder. Each animation defines an animation. Animation.xml defines the activity sliding in from the left (sliding the second activity over the screen). Animation2.xml defines the animation to slide the old activity to the left.

animation.xml

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

animation2.xml

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

Now that we have defined the animations we need to create the proper references in the Java file. Open your MainActivity.java class.

First create your references to your Button and call the button: btnopen. Second, set an OnClickListener to your button). The OnClick method will tell this class what to do when the button is clicked (btnopen).

Create in your OnClick an Intent which opens your SecondActivity class. Then, we would like to set the animations which need to be performed when the method opens your SecondActivity. For this we use the Android SDK API Bundle and MakeCustomAnimation method. As you can see the ActivityOptions.MakeCustomAnimation takes the the two animation which need to be performed (R.anim.animation and R.anim.animation2) and sets it to the bundle.

Finally we start the activity by setting the Intent and the Bundle.

MainActivity.java

package com.example.activityanimation;

import android.os.Bundle;
import android.app.Activity;
import android.app.ActivityOptions;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        Button btnopen = (Button)findViewById(R.id.btnWindowAnimation);
        
        btnopen.setOnClickListener(new View.OnClickListener() {
			
			
	
			@Override
			public void onClick(View v) {
				
				Intent slideactivity = new Intent(MainActivity.this, SecondActivity.class);
				
				Bundle bndlanimation = 
						ActivityOptions.makeCustomAnimation(getApplicationContext(), R.anim.animation,R.anim.animation2).toBundle();
				startActivity(slideactivity, bndlanimation);
				
			}
		});
        
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}

That’s all!

– Advertorial –
In case you want to learn more about Android, I can really recommend the following tutorials from learntoprogram.tv. I took the training, and I learned all the basic and some of the more advanced topics of Android. If you determined to take your learnings to the next level, this is a serious option.

22 Responses

  1. @prab_bu February 5, 2013 / 2:48 am

    hi Christian, thanks again for your nice tutorial.. i hope you’ll make more nice tutorial again :D

    Regards,
    Prabu

  2. @prab_bu February 5, 2013 / 3:33 am

    hi Christian, excuse me.. after i tried this tutorial, i got an error.. the ActivityOptions can’t recognize by my eclipse.. and the options are create class or constant of the ActivityOptions.. how do i fix it? thanks in advance.

    • Christian February 5, 2013 / 11:38 pm

      Hi Prab, thanks again for reading my tuts. I think this is caused by the SDK/API version support in your Android Manifest. The ActivityOptions.makeCustomAnimation is not supported in all versions of the Android SDK. Causing Eclipse not recognizing your code.

      Try to set in your Android Manifest the minimum SDK and TargetVersion to 16.

      This should do the trick

  3. ronan April 24, 2013 / 5:41 pm

    Hi…great tutorial, but i have a major problem…when i press a button it slides to the next activity o.k, but when i press the back button(physical button on phone), it just refreshes the activity….any ideas???

  4. risefire June 3, 2013 / 9:14 am

    @ronnan:
    just put a code for on back pressed…google it

  5. waheed June 15, 2013 / 11:31 pm

    Hi Plz can u tell that how can we add this sliding menu to every activity ….

    i am waiting for your answer

    Mail me Waheed.anjam@gmail.com

  6. gurjeet August 15, 2013 / 5:52 pm

    what is the code for second.class ?

    • Christian August 15, 2013 / 8:27 pm

      Hi Gurjeet,
      Its a plain activity referring to the screen2.xml

      public class SecondActivity extends Activity {

      @Override
      public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.screen2);
      }
      }

      hope this helps,

      Best
      Christian

      • gurjeet August 16, 2013 / 7:33 am

        thanks for the reply…….but i force close the application when i press the button of
        main activity…..in logcat it says NoClassDefFoundError……help me

        • Christian August 16, 2013 / 11:27 am

          Hi Gurjeet,

          ActivityOptions.makeCustomAnimation has been added in the Android API version 16. The issue you are referring to could be caused that in your project you target a lower SDK version.

          You can change the version in your Manifest.

          Hope this helps.

  7. Abhinav September 16, 2013 / 9:23 pm

    hi thanks for this tutorial

  8. shehmeer October 18, 2013 / 2:40 pm

    Hey im using Switch id coz i have more then one buttons how to apply the slide activity to all of them could you please help me out..
    Thank you

  9. Anonymous December 11, 2013 / 2:52 am

    Thank you man, nice post.

  10. chris December 11, 2013 / 2:54 am

    Thanks man, it helped me a lot!

  11. parag December 13, 2013 / 2:49 pm

    Very helpful post…

  12. Mohsen December 23, 2013 / 6:14 pm

    Thank u very much

  13. karthick January 7, 2014 / 12:38 pm

    is there a way to achieve this in lower api levels?

    • Jai January 1, 2015 / 12:03 pm

      For API 14 you can do this in code (rest of stuff is same):

      startActivity(intent);
      overridePendingTransition(R.anim.animation, R.anim.animation2);

  14. Dinesh Ratna July 23, 2014 / 7:39 pm

    Hi. Awesome tutorial. I am using this in my project. Thankyou man. Its working, but when i press back button, it doesnt go back in the same way. can you please tell a way to achieve this when back button is pressed, so that it goes to right now?
    Thankyou for the tut. Lovd it.

  15. pankaj July 9, 2015 / 6:30 pm

    Thank u chris u r very gud

  16. Soumen Das July 16, 2015 / 10:18 am

    Thanks Sir nice tutorial

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*