Android SlidingDrawer Example


In this example we will demonstrate how to implement sliding drawer in android. SlidingDrawer is a special widget which allows user to drag some content into the screen from outside and hide them if not needed. It has a handle and content , dragging the handle in shows the content and dragging the handle out hides the content.

So lets start:

1.Create a new project File ->New -> Project ->Android ->Android Application Project. While creating the new project, name the activity as SlidingDrawerActivity(SlidingDrawerActivity.java) and layout as main.xml. Press Ctrl+Shift+O for missing imports after typing the code.

SlidingDrawerActivity.java

 
public class SlidingDrawerActivity extends Activity implements OnClickListener {
 Button slideButton, b1, b2, b3;
 SlidingDrawer slidingDrawer;

 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_sliding_drawer);
  slideButton = (Button) findViewById(R.id.slideButton);
  slidingDrawer = (SlidingDrawer) findViewById(R.id.SlidingDrawer);
  b1 = (Button) findViewById(R.id.Button01);
  b2 = (Button) findViewById(R.id.Button02);
  b3 = (Button) findViewById(R.id.Button03);
  b1.setOnClickListener(this);
  b2.setOnClickListener(this);
  b3.setOnClickListener(this);
  slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
   @Override
   public void onDrawerOpened() {
    slideButton.setText("V");
   }
  });
  slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
   @Override
   public void onDrawerClosed() {
    slideButton.setText("^");
   }
  });
 }

 @Override
 public void onClick(View v) {
  Button b = (Button) v;
  Toast.makeText(SlidingDrawerActivity.this,
    b.getText() + " is Clicked :)", Toast.LENGTH_SHORT).show();
 }
}

2.Now design the UI for the above activity in the activity_sliding_drawer.xml file .

activity_sliding_drawer.xml

 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Drag the control at the bottom"
        android:textSize="20dp"
        tools:context=".SlidingDrawerActivity" />

    <SlidingDrawer
        android:id="@+id/SlidingDrawer"
        android:layout_width="wrap_content"
        android:layout_height="250dip"
        android:layout_alignParentBottom="true"
        android:content="@+id/contentLayout"
        android:handle="@+id/slideButton"
        android:orientation="vertical"
        android:padding="10dip" >

        <Button
            android:id="@+id/slideButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="^" >
        </Button>

        <LinearLayout
            android:id="@+id/contentLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dip" >

            <Button
                android:id="@+id/Button01"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:text="Button 1" >
            </Button>

            <Button
                android:id="@+id/Button02"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:text="Button 2" >
            </Button>

            <Button
                android:id="@+id/Button03"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:text="Button 3" >
            </Button>
        </LinearLayout>
    </SlidingDrawer>

</RelativeLayout>

3.Run the project by rightclicking project Run as → android project.

Output:

The output of this example would be similar to the one as follows

 

Labels: , ,