Using Android SlidingDrawer

Public on September 22, 2010
Remeber Android's 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
xmlns:android="http://schemas.android.com/apk/res/android"
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:




[Advertising]Faster Thinking - Speed up your brain


Faster Thinking Game



sentiment_satisfied Emoticon