Using Android SlidingDrawer

Remeber Androids old versions (prior to 2.2) launcher screen where we had a sliding pane at the bottom that when dragged upwards displays the applications menu of the phone, that is called the SlidingDrawer control.

consider this layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
 
 android_layout_width="wrap_content"
 android_layout_height="wrap_content">
 <SlidingDrawer
 android_layout_width="fill_parent"
 android_layout_height="fill_parent"
 android_id="@+id/drawer"
 android_handle="@+id/handle"
 android_content="@+id/content"
 >
 <ImageView
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_id="@+id/handle"
 android_src="@drawable/tray_handle_normal"
 />
 <LinearLayout
 android_layout_width="fill_parent"
 android_layout_height="fill_parent"
 android_orientation="vertical"
 android_id="@+id/content"
 >
 <TextView
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="This is some text"
 android_id="@+id/txt"
 />
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Click Me"
 android_id="@+id/btn"
 android_onClick="ClickHandler"
 />
 </LinearLayout>
 
 </SlidingDrawer>
</FrameLayout>

when the SlidingDrawer is pressed it looks like this:

the SlidingDrawer is a container that when dragged or pressed shows/hides its contents.

As the SlidingDrawer displays one content at a time, it must be declared within FrameLayout

the SlidingDrawer has two key properties:
android:handle: specifies the id of the control that acts as the handle.
android:content: specifies the id of the view that acts as content of the SlidingDrawer, most times will be a container.

you can open/close the drawer from the code like this:

if(drawer.isOpened())
 {
 drawer.close();
 btnToggle.setText("Open");
 }
 else
 {
 drawer.open();
 btnToggle.setText("Close");
 }

you can open/close the drawer with animation using these methods instead

drawer.animateClose();
drawer.animateOpen();

or you can handle the open/close operations automatically using toggle method:

drawer.toggle();
drawer.animateToggle();

you can lock/unlock the SlidingDrawer to enable/disable dragging or clicking of the drawer using these methods:

drawer.lock();
drawer.unlock();

Responding to SlidingDrawer Events:

SlidingDrawer has three key callbacks:

1. when the drawer is open, handled by implementing OnDrawerOpenListener.
2. when the drawer is close, handled by implementing OnDrawerCloseListener.
3. when the drawer is close, handled by implementing OnDrawerScroll
   Listener.

drawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
 
 @Override
 public void onDrawerOpened() {
 // TODO Auto-generated method stub
 TextView txtStatus=(TextView)findViewById(R.id.txtStatus);
 txtStatus.setText("Opened");
 ImageView view=(ImageView)drawer.getHandle();
 view.setImageResource(R.drawable.tray_handle_selected);
 
 }
 });
 
 
 
 drawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
 
 @Override
 public void onDrawerClosed() {
 // TODO Auto-generated method stub
 TextView txtStatus=(TextView)findViewById(R.id.txtStatus);
 txtStatus.setText("Closed");
 ImageView view=(ImageView)drawer.getHandle();
 view.setImageResource(R.drawable.tray_handle_normal);
 }
 });
 
 drawer.setOnDrawerScrollListener(new OnDrawerScrollListener() {
 
 @Override
 public void onScrollStarted() {
 // TODO Auto-generated method stub
 TextView txtStatus=(TextView)findViewById(R.id.txtStatus);
 txtStatus.setText("Scroll start");
 
 }
 
 @Override
 public void onScrollEnded() {
 // TODO Auto-generated method stub
 TextView txtStatus=(TextView)findViewById(R.id.txtStatus);
 txtStatus.setText("Scroll end");
 }
 });

Notes:

• you can make the drawer appear horizontally from right to left by setting the android:orientation property to horizontal in the xml file.
• you can find images used as a source for the handler from this site: http://www.netmite.com/android/mydroid/1.0/packages/apps/Phone/res/drawable-finger/  I used tray_handle_normal.9.png and tray_handle_selected.9.png

Related Posts by Categories