Want to learn more about Android development? This resource changed my life.
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.
Want to learn more about Android development? This resource changed my life.
hi Christian, thanks again for your nice tutorial.. i hope you’ll make more nice tutorial again :D
Regards,
Prabu
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.
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
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???
@ronnan:
just put a code for on back pressed…google it
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
what is the code for second.class ?
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
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
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.
hi thanks for this tutorial
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
great tutorial !
Thank you man, nice post.
Thanks man, it helped me a lot!
Very helpful post…
Thank u very much
is there a way to achieve this in lower api levels?
For API 14 you can do this in code (rest of stuff is same):
startActivity(intent);
overridePendingTransition(R.anim.animation, R.anim.animation2);
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.
Thank u chris u r very gud
Thanks Sir nice tutorial