Skip to content

Android SlidingDrawer with Custom View

July 12, 2010

I was recently interested in using the SlidingDrawer widget in my Android application rather than having to start a new Activity. Having searched I found very little concrete and simple step by step examples of how to use the SlidingDrawer. Below is a simple example of using the SlidingDrawer widget and applying a custom view as the content of the SlidingDrawer. The code below is adapted from the SlidingDrawer example by commonsguy found here

Note you will need to get the drawer tray handle image from the above link

 

Download the full source

The SlidingDrawer Activity
public class SlidingDrawerActivity extends Activity {
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		try {
			setContentView(R.layout.main);
			LinearLayout lin = (LinearLayout) findViewById(R.id.linear);
			lin.setOnTouchListener(new OnTouchListener() {

				@Override
				public boolean onTouch(View v, MotionEvent event) {

					return true;
				}
			});

			SlidingDrawer slidingDrawer = (SlidingDrawer) findViewById(R.id.drawer);
			slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {

				@Override
				public void onDrawerOpened() {

				}
			});

			slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {

				@Override
				public void onDrawerClosed() {

				}
			});

			// Get the content of the SlidingDrawer i.e Our CustomView
			CustomView customView = (CustomView) findViewById(R.id.content);
			customView.setOnTouchListener(new OnTouchListener() {
				@Override
				public boolean onTouch(View v, MotionEvent event) {

					return true;
				}
			});

		} catch (Exception e) {

		}
	}
}

The CustomView Class

	public class CustomView extends View{
		public CustomView(Context context,AttributeSet attrs){
			super(context,attrs);
		}

		protected void onDraw(Canvas canvas) {
			super.onDraw(canvas);
			try {
				Paint paint = new Paint();
				paint.setStyle(Paint.Style.FILL);
				paint.setColor(Color.BLACK);
				canvas.drawPaint(paint);
				paint.setColor(Color.WHITE);
				canvas.drawCircle(100,100,30,paint);
			} catch (Exception e) {

			}
		}
	}

The Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linear" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical">

<SlidingDrawer xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:handle="@+id/handle"
android:content="@+id/content">

<bear.exmaple.CustomView
android:id="@+id/content" android:layout_width="fill_parent"
android:layout_height="fill_parent">
</bear.exmaple.CustomView>

<ImageView android:id="@id/handle" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/tray_handle_normal" />

</SlidingDrawer>
</LinearLayout>

package bear.exmaple;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.LinearLayout;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.SlidingDrawer.OnDrawerOpenListener;

public class SlidingDrawerActivity extends Activity {
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		try {
			setContentView(R.layout.main);
			// get the root linear layout
			LinearLayout lin = (LinearLayout) findViewById(R.id.linear);
			lin.setOnTouchListener(new OnTouchListener() {

				@Override
				public boolean onTouch(View v, MotionEvent event) {

					return true;
				}
			});

			// get the Sliding Drawer
			SlidingDrawer slidingDrawer = (SlidingDrawer) findViewById(R.id.drawer);
			slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {

				@Override
				public void onDrawerOpened() {

				}
			});

			slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {

				@Override
				public void onDrawerClosed() {

				}
			});

			// Get the content of the SlidingDrawer i.e Our CustomView
			CustomView customView = (CustomView) findViewById(R.id.content);
			customView.setOnTouchListener(new OnTouchListener() {
				@Override
				public boolean onTouch(View v, MotionEvent event) {

					return true;
				}
			});

		} catch (Exception e) {
		}

	}
}

From → Android

4 Comments
  1. Hi. Nice and simple example for beginners. I can’t understand one thing, though. If you remove the try-catch, it always throws an exception and force closes. Why is that?

    • Hi Stratos,

      I’m not too sure, I’l have a look at the exception which is caught and try figure out the problem. Thanks for bringing this to my attention.

      • I’ve added the exception handling code to print the error in ddms but no error was generated. I also removed the try and catch and no exception was thrown. Can you display the error in ddms and give me the stack trace.

  2. I’m sorry, my mistake. Your code is fine! I changed it a bit to adapt to my project (I’m just fooling around with Android programming) but I keep getting exceptions. I’ll seek your help when I narrow the problem down.

    Also, I keep having the IllegalArgumentException in the Eclipse xml editor that prevents me from previewing the visual layout of the app. Do you get that too? It only happens when I insert a SlidingDrawer in my layout.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: