[TUT] Sliding Drawer Activity – Animate an Activity

By blundell  

This tutorial is to show you how you can have a new activity animated to slide into view just like the Android Sliding Drawer. The tutorial show’s the animation coming in from the left and leaving from the left, but you can easily change this to animate from the left, right, up, down, you can even go crazy and have it spiral in or zoom past but those are tutorials in themselves on animations.

I wrote this to take the place of the Android Sliding Drawer, don’t get me wrong it’s a nice little widget but when you want to do more complex stuff within your drawer an inner view just doesn’t cut it. Having a whole new activity allows your code to be separated and lets the Android system look after it’s lifecycle separately.

This tutorial doesn’t have a ‘handle’ in the activity this could be used to open and close the drawer, using the back button is what I have opted for. Adding a slider handler would be pretty easy and you just attach finish(); to its onClickListener.

The tutorial uses android 2.2 for it’s minimum SDK, however I don’t use anything that isn’t available in 1.6. I use Froyo as we have to move forward at some point. At the time of writing less than 10% of android users are using below 2.2 (and continually falling). We have to take a leap at some point so I’ve chosen now! I’ve also included two ways of attaching the on click listeners to the buttons you can do this through the XML or through setting a listener, it’s completely personal preference which you use and I have arguments for both in different situations.

So Here .. We .. Go

Steps for doing this:

  • Create your main activity with a button to navigate
  • Create the animations for sliding in / sliding out
  • Create your sliding drawer activity
  • Add the animations to your sliding drawer activity

Thats it!

So here is the main activity with two click listeners. As I’ve said up top, it’s up to you which way you implement this in your own applications. The main activity has two buttons and they both start the SlidingDrawer activity, you don’t have to do anything special here just start it the normal way with a standard intent:
MainActivity.java

package com.blundell.tut.ui.phone;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;

import com.blundell.tut.R;

public class MainActivity extends Activity implements OnClickListener {
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // Set the onClick listener for the second button
        findViewById(R.id.buttonStartSlidingDrawer).setOnClickListener(this);
    }

	@Override
	public void onClick(View v) {
		switch(v.getId()){
		case R.id.buttonStartSlidingDrawer:
			startSlidingDrawerActivity();
			break;
		default:
			break;
		}
	}
	
	/**
	 * This method is referenced from your XML layout android:onClick="startSlidingDrawerFromXml"
	 * @param v
	 */
	public void startSlidingDrawerFromXml(View v){
		startSlidingDrawerActivity();
	}
	
	/**
	 * Start the new activity in the normal way with an intent
	 */
	private void startSlidingDrawerActivity(){
    	Intent intent = new Intent(this, SlidingDrawerActivity.class);
    	startActivity(intent);
    }
}

You’ll need three animations. When you are transitioning between two activities (with an intent) you can set the animation for the activity your leaving and the animation for the activity your going to. The three needed are ‘pull in’ ‘push out’ and ‘stay still’. You have to add these to your /res/anim/ folder.

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

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

<!-- hold.xml -->
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toXDelta="0" />

Now this is the juice of the tutorial, when your sliding drawer activity is started you can call the method overridePendingTransition this will set what animations are used for bringing your activity into view. You can also call this method again when your activity is about to go off screen (i.e. the onPause() method), to set the animation for leaving the activity.

SlidingDrawer.java

package com.blundell.tut.ui.phone;

import android.app.Activity;
import android.os.Bundle;

import com.blundell.tut.R;


public class SlidingDrawerActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// Override how this activity is animated into view
		// The new activity is pulled in from the left and the current activity is kept still
		// This has to be called before onCreate
		overridePendingTransition(R.anim.pull_in_from_left, R.anim.hold);
		
		setContentView(R.layout.activity_sliding_drawer);
	}
	
	@Override
    protected void onPause() {
		// Whenever this activity is paused (i.e. looses focus because another activity is started etc)
		// Override how this activity is animated out of view
		// The new activity is kept still and this activity is pushed out to the left
        overridePendingTransition(R.anim.hold, R.anim.push_out_to_left);
        super.onPause();
    }
}

And that’s it! Don’t forget to add your second activity to your manifest (which I always forget)!

Here’s the source code for the project:

—> SlidingDraw Activity Tut Source <---

Please comment with any questions or feedback.




15 Comments

  1. Josh
    Posted March 23, 2014 at 12:07 am | Permalink | Reply

    If I may point out an error, line #9 in your xml sources for the animations, you have pull_out_to_left when I believe you mean push_out_to_left.

  2. Mohamed Fadl
    Posted September 22, 2012 at 11:30 am | Permalink | Reply

    Thank you very much it helps me a lot.

  3. Ultimus
    Posted August 14, 2012 at 9:41 am | Permalink | Reply

    Thank you very much. You have been very helpful.

  4. Rob
    Posted June 9, 2012 at 1:00 pm | Permalink | Reply

    Hello,

    this is very interesting, thanks for sharing.

    It took me a while to figure out the res/anim/*.* part, but thanks to the added sources I understand it now.

    cheers,
    Rob

  5. Posted April 24, 2012 at 2:30 pm | Permalink | Reply

    Hi !
    (Sorry for my english, i am a young beginner french dev !).

    You say it is working on Android 2.2 ?
    But, i try it on a Galaxy Ace on 2.3.3, and nothing happend ( i try my version of the tuto and also your source).
    But, on the virtual device on 4.0, it works !

    Dit i forgot something ?

    Thanks ! :)

    • blundell
      Posted April 25, 2012 at 7:05 am | Permalink | Reply

      Hmm really. I don’t have a Galaxy Ace, but I can confirm it works on other 2.3 devices.

      • Posted August 13, 2012 at 3:22 am | Permalink | Reply

        Setting -> Display -> Animation ->
        Switch “No animations” to “All animations”
        Otherwise you cant see nothing no matter how you deal with the “overridePendingTransition” method`

    • siegi44
      Posted August 12, 2012 at 7:27 am | Permalink | Reply

      Whether animations are displayed depends on your system settings. If settings > display > animation(s) is set to “display no animations”, it does not work. Change the setting and it will work.

  6. Les
    Posted April 16, 2012 at 12:02 pm | Permalink | Reply

    Very interested in the tutorial.
    Thank you.
    Is the sliding drawer project source code on another link?

    • blundell
      Posted April 19, 2012 at 6:43 pm | Permalink | Reply

      Whoops sorry, updated the link to the right one!

  7. MBH01
    Posted April 5, 2012 at 1:41 pm | Permalink | Reply

    really Great Tutorial… Thank u alot

  8. jiashie
    Posted April 5, 2012 at 7:22 am | Permalink | Reply

    I’d rather say it’s NOT a slidingdrawer-liked demo?The most important feature of slidingdrawer is NOT animation?but drag slowly to show/open a new view/activity.

    • blundell
      Posted April 5, 2012 at 7:35 am | Permalink | Reply

      Sorry you wouldn’t be able to drag open an Activity. You would have to implement a custom view that has a ‘template’ of your activity, drag this open then have a completion listener that starts the activity with no animation. A bit of trickery!

  9. jyotikattna
    Posted March 7, 2012 at 2:49 pm | Permalink | Reply

    very nice article thanks for sharing

  10. Software
    Posted March 4, 2012 at 5:11 pm | Permalink | Reply

    Hi! I wish to say that this post is awesome, nice written and include approximately all important infos.
    I’d like to see more posts like this .

3 Trackbacks

  1. [...] a tutorial so that you can animate your activity’s in and out,Enjoy:http://blog.blundell-apps.com/animate-an-activity/ Related [...]

  2. [...] use normal intents. Wrote a tutorial so that you can animate your activity’s in and out,Enjoy:http://blog.blundell-apps.com/animate-an-activity/ Related [...]

Post a Comment

Your email is never shared. Required fields are marked *

*
*