Android SlidingDrawer (DEPRECATED)

May 30, 2015 By: Dr. Droid Android Basics, Android Drawer Comments: 0

SlidingDrawer represents a widget, where we can use in our Android applications. SlidingDrawer has the ability to hide and/or appear content when the user drags a handle. More specifically, it includes two basic views:

the handle where the user can drag.
the hidden content that is associated with the handle and it is shown up when the user drags the handle.

It is very important to mention that the SlidingDrawer class is deprecated in Android Api 17 and above, so it is recommended to use it in previous versions or make your own widget in the new ones.

Example

In this example I will show you how to implement Sliding Drawer.

VIDEO DEMO

Let’s get start by creating a project in Eclipse IDE.

1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java).

2. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i had taken one SlidingDrawer and inside it there is one Button for Handler and there is LinearLayout for Content that will be hidden and showed when handler button pressed or sliding drawer slided.

<LinearLayout 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"
    android:background="#CCFF"
    android:gravity="bottom"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Click on button to open drawer"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold|italic" >
    </TextView>

    <!-- Sliding drawer contatinig one handle view and one content layout that is hidden -->
    <SlidingDrawer
        android:id="@+id/SlidingDrawer"
        android:layout_width="wrap_content"
        android:layout_height="300dp"
        android:content="@+id/contentLayout"
        android:handle="@+id/slideButton"
        android:orientation="vertical"
        android:padding="10dip" >

        <!-- Handle button -->
        <Button
            android:id="@+id/slideButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/button_selector"
            android:ems="10"
            android:text="Show"
            android:textColor="#ffffff" >
        </Button>

        <!-- Content Layout -->
        <LinearLayout
            android:id="@+id/contentLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FFCC"
            android:gravity="center"
            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:background="@drawable/button_selector"
                android:text="Button 1"
                android:textColor="#ffffff" >
            </Button>

            <Button
                android:id="@+id/Button02"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:background="@drawable/button_selector"
                android:text="Button 2"
                android:textColor="#ffffff" >
            </Button>

            <Button
                android:id="@+id/Button03"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:background="@drawable/button_selector"
                android:text="Button 3"
                android:textColor="#ffffff" >
            </Button>

            <TextView
                android:id="@+id/text"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:background="@drawable/button_selector"
                android:text="Text View Item"
                android:gravity="center"
                android:padding="5dp"
                android:textColor="#ffffff" />
          
        </LinearLayout>
    </SlidingDrawer>

</LinearLayout>

<LinearLayout 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"

android:background="#CCFF"

android:gravity="bottom"

android:orientation="vertical" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Click on button to open drawer"

android:textColor="#000000"

android:textSize="20sp"

android:textStyle="bold|italic" >

</TextView>

<SlidingDrawer

android:id="@+id/SlidingDrawer"

android:layout_width="wrap_content"

android:layout_height="300dp"

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:layout_margin="2dp"

android:background="@drawable/button_selector"

android:ems="10"

android:text="Show"

android:textColor="#ffffff" >

</Button>

<LinearLayout

android:id="@+id/contentLayout"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#FFCC"

android:gravity="center"

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:background="@drawable/button_selector"

android:text="Button 1"

android:textColor="#ffffff" >

</Button>

<Button

android:id="@+id/Button02"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_margin="2dp"

android:background="@drawable/button_selector"

android:text="Button 2"

android:textColor="#ffffff" >

</Button>

<Button

android:id="@+id/Button03"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_margin="2dp"

android:background="@drawable/button_selector"

android:text="Button 3"

android:textColor="#ffffff" >

</Button>

<TextView

android:id="@+id/text"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_margin="2dp"

android:background="@drawable/button_selector"

android:text="Text View Item"

android:gravity="center"

android:padding="5dp"

android:textColor="#ffffff" />

</LinearLayout>

</SlidingDrawer>

</LinearLayout>

3. For buttons background drawable we have to make a drawable xml file for button selector in drawable directory naming button_selector.xml.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"><shape>
            <solid android:color="#AA000000" />

            <stroke android:width="1dp" android:color="#AA000000" />

            <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" />
        </shape></item>
    <item><shape>
            <gradient android:angle="270" android:endColor="#FF00" android:startColor="#FF00" />

            <stroke android:width="1dp" android:color="#FF00" />

            <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" />
        </shape></item>

</selector>

<?xml version="1.0" encoding="utf-8"?>

</shape></item>

</shape></item>

</selector>

4. Now, come to MainActivity.java and add the following code. In this class i had just done how to show/hide sliding drawer and implement clicklisteners on button clicks.

package com.android_slidingdrawer_demo;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.SlidingDrawer.OnDrawerOpenListener;
import android.widget.TextView;
import android.widget.Toast;

@SuppressWarnings("deprecation")
public class MainActivity extends ActionBarActivity implements OnClickListener {
	private static Button slideButton, b1, b2, b3;
	private static TextView textView;
	private static SlidingDrawer slidingDrawer;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		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);
		textView = (TextView) findViewById(R.id.text);

		// Setting Listeners to all buttons and textview
		setListeners();

		// Listeners for sliding drawer
		slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
			@Override
			public void onDrawerOpened() {

				// Change button text when slider is open
				slideButton.setText("Close");
			}
		});

		slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
			@Override
			public void onDrawerClosed() {

				// Change button text when slider is close
				slideButton.setText("Open");
			}
		});
	}

	// Listeners method
	void setListeners() {
		b1.setOnClickListener(this);
		b2.setOnClickListener(this);
		b3.setOnClickListener(this);
		textView.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {

		// Toast shown on sliding drawer items click
		if (v.getId() == R.id.text) {
			Toast.makeText(MainActivity.this, textView.getText() + " Clicked",
					Toast.LENGTH_SHORT).show();
		} else {
			Button b = (Button) v;
			Toast.makeText(MainActivity.this, b.getText() + " Clicked",
					Toast.LENGTH_SHORT).show();
		}
	}
}

package com.android_slidingdrawer_demo;

import android.os.Bundle;

import android.support.v7.app.ActionBarActivity;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.SlidingDrawer;

import android.widget.SlidingDrawer.OnDrawerCloseListener;

import android.widget.SlidingDrawer.OnDrawerOpenListener;

import android.widget.TextView;

import android.widget.Toast;

@SuppressWarnings("deprecation")

public class MainActivity extends ActionBarActivity implements OnClickListener {

private static Button slideButton, b1, b2, b3;

private static TextView textView;

private static SlidingDrawer slidingDrawer;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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);

textView = (TextView) findViewById(R.id.text);

// Setting Listeners to all buttons and textview

setListeners();

// Listeners for sliding drawer

slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {

@Override

public void onDrawerOpened() {

// Change button text when slider is open

slideButton.setText("Close");

}

});

slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {

@Override

public void onDrawerClosed() {

// Change button text when slider is close

slideButton.setText("Open");

}

});

}

// Listeners method

void setListeners() {

b1.setOnClickListener(this);

b2.setOnClickListener(this);

b3.setOnClickListener(this);

textView.setOnClickListener(this);

}

@Override

public void onClick(View v) {

// Toast shown on sliding drawer items click

if (v.getId() == R.id.text) {

Toast.makeText(MainActivity.this, textView.getText() + " Clicked",

Toast.LENGTH_SHORT).show();

} else {

Button b = (Button) v;

Toast.makeText(MainActivity.this, b.getText() + " Clicked",

Toast.LENGTH_SHORT).show();

}

5. Now, run the app and you will get the output as shown in video.

Thanks.