زمانی از این widget استفاده می شود که به عنوان مثال کاربر می خواهد چیزی را در ابتدا پنهان نماید و با زدن دکمه صفحه ی مورد نظر را باز نماید و ابزارهایی که داخل آن قرار دارد را نمایش دهد.

داخل این widget کاربر از یک handle استفاده کرده است که محتوای مورد نظر داخل آن قرار دارد handle جایی است که کاربر می تواند آن را drag نماید.

محتوای مورد نظر داخل این handle قرار دارد و به محض کشیدن صفحه با یک drag کردن به آن اطلاعات دسترسی پیدا می نماید.

کلاس sliding Drawer در api 17 استفاده می شود بنابر این در ورژن های قدیمی حتما با استفاده از یک widget آن را درست نمایید.

در این مثال ما از یک widget برای نمایش استفاده می نماییم.

یک پروژه ی جدید ایجاد نمایید.

نام پروژه و package را نام گذاری نمایید و ورژن اندروید هم انتخاب نمایید به صورت زیر:

 مرحله ی بعدی یک activity جدید ایجاد نمایید به صورت زیر:

حالا شما می توانید آیکون مورد نظر خود را انتخاب نمایید یا اینکه همون آیکون پیش فرض را در برنامه ی خود قرار دهید.

در مرحله ی بعد باید یک BlankActivity انتخاب نمایید:

داخل پوشه ی res یک فایل xml ایجاد نمایید به صورت زیر:

بعد از ایجاد پروژه به صورت زیر خواهد بود:

در زیر باید یک activity جدید ایجاد نماییم به صورت زیر:

<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"
    tools:context=".MainActivity" >
    <TextView
		android:id="@+id/text1"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="For more info drag the button..." />
    <SlidingDrawer
        android:id="@+id/slidingDrawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="30dp"
        android:content="@+id/content"
        android:handle="@+id/handle"
        android:orientation="vertical" >
        <Button
            android:id="@+id/handle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+" />
        <LinearLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
            <TextView
		        android:id="@+id/text2"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        android:text="Hello from JCG!" />
            <Button 
                android:id="@+id/click"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        android:text="Click me" />
        </LinearLayout>
    </SlidingDrawer>
</RelativeLayout>

ما باید یک handle تعریف نماییم و داخل آن از یک sliding drawer استفاده نماییم، برای هر کدام از صفت های تعریف شده یک id تعریف می نماییم در این مثال ما از یک دکمه داخل layout خود استفاده می کنیم که بیش از یک view در یک content قرار دارد.

تمام ابزارهایی که در صفحه قرار می گیرند باید یا به شکل vertical باشند یا به صورت horizontal باشد.

ابعاد محتوا برای sliding drawer از طریق دو صفت layout_width و layout_height به آن ها مقدار داده می شود.

داخل کلاس mainactivity باید قطعه کد زیر را قرار دهید:

package com.javacodegeeks.android.slidingdrawertest;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerOpenListener;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity {
	private SlidingDrawer drawer;
	private Button handle, clickMe;
	private TextView text1;
	private Context context;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		context = this.getApplicationContext();
		handle = (Button) findViewById(R.id.handle);
		text1 = (TextView) findViewById(R.id.text1);
		clickMe = (Button) findViewById(R.id.click);
		drawer=(SlidingDrawer)findViewById(R.id.slidingDrawer);
		drawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
			@Override
			public void onDrawerOpened() {
				handle.setText("-");
				text1.setText("Already dragged...");
			}
		});
		drawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
			
			@Override
			public void onDrawerClosed() {
				handle.setText("+");
				text1.setText("For more info drag the button...");
			}
		});
		clickMe.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				Toast.makeText(context, "The button is clicked", Toast.LENGTH_LONG).show();
			}
		});
	}
}

برای sliding drawer ما باید از دو متد به نام setondraweropenlistener و setondrawercloselistener استفاده کنیم.

متدی که برای open استفاده می شود زمانی است که کاربر می خواهد sliding drawer را باز نماید ولی متدی که برای close استفاده می شود برای زمانی است که کاربر می خواهد بخش مورد نظر خود را ببندد.

زمانی که listener صدا زده می شود متن مورد نظر تغییر خواهد کرد به متنی که قرار داده اید.

البته یک راه پویا تر و کامل تر آن این است که view مورد نظر تغییر کند بنابر این باید یک id unique به آن بدهیم.

حالا زمانی که کاربر این صفحه را می زند و drawer را باز می نماید یک دکمه بر روی صفحه قرار می گیرد که با زدن این دکمه یک پیغام toast نمایش داده می شود.

زمانی که برنامه را اجرا بگیریم به صورت زیر خواهد بود:

زمانی که کاربر دکمه ی مثبت پایین را می زند صفحه ی مورد نظر با ابزارهای مربوطه باز خواهد شد و وقتی که کاربر دکمه ی منفی را می زند صفحه بسته خواهد شد.

با زدن کلید مثبت رویداد مربوط به باز شدن صفحه باز خواهد شد و با زدن کلید منفی رویداد مربوط اجرا خواهد شد.

زمانی که کاربر دکمه ی مثبت را می زند صفحه باز خواهد شد به صورت زیر :

حالا وقتی کاربر بر روی دکمه ی مورد نظر کلیک نماید یک پیغام به صورت toast نمایش داده می شود: