Android Sliding Drawer Tutorial

Hello Android developers,

In this post we will how to implement the Sliding Drawer widget in our android application.

What is sliding widget?

Sliding widget is a object container that has the ability to slide and occupy the full screen when ever there are triggered.

When this will be useful?

Sliding widget is much used in application that gives much preference to animation, Consider the notifcation and also the general application container in default android OS are Sliding widget.

We can use them to show notification in our application to intimate an even in our application or use them instead of dialog box having the click buttons in the sliding drawer.

There are two main important component

  1. Sliding Handler - This is the one contains handler button that is always visible in the application.
  2. Sliding Container - The object container that animate slide up/down to show the objects.

We hardly use coding in the tutorial most of the part are designed in XML layout itself.

Adjust sliding drawer height :

To adjust the sliding drawer size we can specify size in layout height in dip eg: 200 dip.

Adding image to sliding drawer handler :

We can set any resource image as background in button properties.

[sourcecode language="xml"]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/LinearLayout01"
android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:gravity="bottom" android:background="@drawable/androidpeople">
<SlidingDrawer android:layout_width="wrap_content" android:id="@+id/SlidingDrawer" android:handle="@+id/slideHandleButton" android:content="@+id/contentLayout" android:padding="10dip" android:layout_height="250dip">
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/slideHandleButton" android:background="@drawable/closearrow"></Button>
<LinearLayout android:layout_width="wrap_content" android:id="@+id/contentLayout" android:orientation="vertical" android:gravity="center|top" android:padding="10dip" android:background="#C0C0C0" android:layout_height="wrap_content">
<Button android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Content"></Button>
<Button android:id="@+id/Button02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Content"></Button>
<Button android:id="@+id/Button03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Content"></Button>
</LinearLayout>

</SlidingDrawer>

</LinearLayout>

[/sourcecode]

The java code here is use to toggle the handler button image between up and down.

[sourcecode language="java"]</pre>
import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.SlidingDrawer.OnDrawerOpenListener;

public class slidingDrawerExample extends Activity {

Button slideHandleButton;
SlidingDrawer slidingDrawer;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.main);
slideHandleButton = (Button) findViewById(R.id.slideHandleButton);
slidingDrawer = (SlidingDrawer) findViewById(R.id.SlidingDrawer);

slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {

@Override
public void onDrawerOpened() {
slideHandleButton.setBackgroundResource(R.drawable.openarrow);
}
});

slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {

@Override
public void onDrawerClosed() {
slideHandleButton.setBackgroundResource(R.drawable.closearrow);
}
});

}

}
<pre>[/sourcecode]

Screen Shots

slidingDrawer example-androidpeople slidingDrawerUp-androidpeople

Download Source code here.

Comments

@vinay, There are 2 types to

@vinay,

There are 2 types to open & close the slidingDrawer.

Open() - opens the SD without any animation directly.

Close() - Close the SD without any animation directly.

animateOpen() - opens the SD with animation.

animateClose() - close the SD with animation.

@satya, Its possible. Inside

@satya,

Its possible. Inside the LinearLayout i have added 3 Buttons instead of that 3 Buttons add your Listview.

@satya, You got it now ?

@satya,

You got it now ?

@satya, :)

@satya,

:)

@Kelvin, Its possible. You

@Kelvin,

Its possible. You can set the button to right. set the LinearLayout gravity to right.

@Richard, You can change the

@Richard,

You can change the gray part. Change the LinearLayout background to set your own background.