[TUT] Sliding Drawer Activity – Animate an Activity

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="https://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="https://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="https://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.