SlidingDrawer Demo in Android

In this blog post, I would like to show how to code SlidingDrawer in Android. [Note: currently Deprecated since API level 17]

SlidingDrawer hides content out of the screen and allows the user to drag a handle to bring the content on screen.

1. Create a new project File -> Android Project. On activity_main.xml copy paste this code:


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin" >

<SlidingDrawer
 android:id="@+id/slidingDrawer1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_centerInParent="true"
 android:content="@+id/content"
 android:handle="@+id/handle"
 android:orientation="horizontal" >

<Button
 android:id="@+id/handle"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Handle" />

<RelativeLayout
 android:id="@+id/content"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >

<Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:text="Button" />
 </RelativeLayout>
 </SlidingDrawer>

<Button
 android:id="@+id/button2"
 style="?android:attr/buttonStyleSmall"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_alignTop="@+id/slidingDrawer1"
 android:text="left" />

<Button
 android:id="@+id/button3"
 style="?android:attr/buttonStyleSmall"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignTop="@+id/slidingDrawer1"
 android:layout_toRightOf="@+id/button2"
 android:text="right" />

<Button
 android:id="@+id/button5"
 style="?android:attr/buttonStyleSmall"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignRight="@+id/slidingDrawer1"
 android:layout_alignTop="@+id/slidingDrawer1"
 android:text="top" />

<Button
 android:id="@+id/button4"
 style="?android:attr/buttonStyleSmall"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignTop="@+id/slidingDrawer1"
 android:layout_toLeftOf="@+id/button5"
 android:text="bottom" />

</RelativeLayout>

2. Now open your MainActivity.java and copy paste this code:


import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.SlidingDrawer.OnDrawerOpenListener;
import android.widget.Toast;

@SuppressWarnings("deprecation")
public class MainActivity extends Activity {
 Button b1, sliderButton, buttonTop, buttonBottom, buttonLeft, buttonRight;
 SlidingDrawer slidingDrawer;

@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 buttonTop = (Button) findViewById(R.id.button5);
 buttonBottom = (Button) findViewById(R.id.button4);
 buttonLeft = (Button) findViewById(R.id.button2);
 buttonRight = (Button) findViewById(R.id.button3);
 b1 = (Button) findViewById(R.id.button1);
 sliderButton = (Button) findViewById(R.id.handle);
 slidingDrawer = (SlidingDrawer) findViewById(R.id.slidingDrawer1);

b1.setOnClickListener(new View.OnClickListener() {

@Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 Toast.makeText(MainActivity.this, "I'm inside of slider",
 Toast.LENGTH_SHORT).show();
 }
 });
 buttonTop.setOnClickListener(new View.OnClickListener() {

@Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 slidingDrawer.setRotation(270);
 b1.setRotation(90);
 sliderButton.setRotation(90);
 }
 });

buttonBottom.setOnClickListener(new View.OnClickListener() {

@Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 slidingDrawer.setRotation(90);
 b1.setRotation(270);
 sliderButton.setRotation(270);
 }
 });

buttonLeft.setOnClickListener(new View.OnClickListener() {

@Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 slidingDrawer.setRotation(180);
 b1.setRotation(180);
 sliderButton.setRotation(180);
 }
 });

buttonRight.setOnClickListener(new View.OnClickListener() {

@Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 slidingDrawer.setRotation(0);
 b1.setRotation(0);
 sliderButton.setRotation(0);
 }
 });

slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
 @Override
 public void onDrawerOpened() {
 Toast.makeText(MainActivity.this, "Slider Opening",
 Toast.LENGTH_SHORT).show();
 }
 });

slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
 @Override
 public void onDrawerClosed() {
 Toast.makeText(MainActivity.this, "Slider Closed",
 Toast.LENGTH_SHORT).show();
 }
 });
 }

}

3. No Change in the AndroidManifest.xml.

 


ScreenShot:

on Right (Default):

Screenshot_2014-12-10-11-07-30  Screenshot_2014-12-10-11-15-46

on Bottom:

Screenshot_2014-12-10-11-15-55  Screenshot_2014-12-10-11-07-52

on Top:

Screenshot_2014-12-10-11-16-13  Screenshot_2014-12-10-11-07-59

on Left:

Screenshot_2014-12-10-11-16-19  Screenshot_2014-12-10-11-08-03

on Click:

Screenshot_2014-12-10-11-08-12 Screenshot_2014-12-10-11-08-15

 


Tips to Remember always:

1. SlidingDrawer can be used vertically or horizontally. By default, its vertical but there is an issue on right to left sliding and vice-versa. So i have changed to horizontal and set the other angles in the similar way that its looks like vertical. [On line-19, activity_main.xml]


android:orientation="horizontal"

2. If you have noticed well, each angle on setRotation is raised by angle 90. As i said before, just to make its looks like vertical but why do i need to rotate the other views? just to make sure that we can read the UI components even after rotation.

3. Looks like everything is simple, but the rotation on views on buttonTop and buttonButtom were again raised up angle 180.  Once Again, its just for our convenient to make up rotation so that we can read the UI components.

4. Inside an XML layout, SlidingDrawer must define the id of the handle and of the content. [on line -15-16, activity_main.xml]

 

Hope this helpful. Your valuable comments are always welcomed. It will help to improve my post and understanding.
Download Source Code from here.

durga chiranjeevi

durga chiranjeevi

I'm currently working as Android developer at Energy Alternatives India. Interested in Application and Game development.
durga chiranjeevi

Leave a Reply

Your email address will not be published. Required fields are marked *