Sliding-Drawer in a nice and useful widget in android.

Please check one of my previous posts to do this in another way.

How to show a sliding window from below in Android?

Check this new One using Navigation Drawer

About Sliding drawer

SlidingDrawer hides content out of the screen and allows the user to drag a handle to bring the content on screen. SlidingDrawer can be used vertically or horizontally. A special widget composed of two children views: the handle, that the users drags, and the content, attached to the handle and dragged with it. SlidingDrawer should be used as an overlay inside layouts. This means SlidingDrawer should only be used inside of a FrameLayout or a RelativeLayout for instance. The size of the SlidingDrawer defines how much space the content will occupy once slid out so SlidingDrawer should usually use match_parent for both its dimensions. Inside an XML layout, SlidingDrawer must define the id of the handle and of the content:

You can read more from this link.

Here is a simple example to demonstrate this.

Sliding Drawer in Android

Sliding Drawer in Android

Sliding Drawer in Android

Create a project named SlidingDrawerDemo and copy this java code into it.

package pack.coderzheaven;

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

public class slidingDrawerDemo extends Activity implements OnClickListener {

	Button slideButton,b1, b2,b3,b4;
	SlidingDrawer slidingDrawer;

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

		setContentView(R.layout.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);
		b4 = (Button) findViewById(R.id.Button04);

		b1.setOnClickListener(this);
		b2.setOnClickListener(this);
		b3.setOnClickListener(this);
		b4.setOnClickListener(this);

		slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
			@Override
			public void onDrawerOpened() {
				slideButton.setBackgroundResource(R.drawable.closearrow);
			}
		});

		slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
			@Override
			public void onDrawerClosed() {
				slideButton.setBackgroundResource(R.drawable.openarrow);
			}
		});
	}

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

Here is the main.xml code. Make sure to put the resources in the res/drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/LinearLayout01"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical"
	android:gravity="bottom"
	android:background="@drawable/android">

	<TextView
		android:text="SlidingViewer Demo from CoderzHeaven"
		android:gravity="center|center_vertical"
		android:textColor="#ff0000"
		android:textSize="25sp"
		android:textStyle="bold|italic"
		android:id="@+id/TextView01"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content">
	</TextView>

	<SlidingDrawer
		android:layout_width="wrap_content"
		android:id="@+id/SlidingDrawer"
		android:handle="@+id/slideButton"
		android:content="@+id/contentLayout"
		android:padding="10dip"
		android:layout_height="250dip"
		android:orientation="vertical">
			<Button android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:id="@+id/slideButton"
				android:background="@drawable/closearrow">
			</Button>
			<LinearLayout
				android:layout_width="wrap_content"
				android:id="@+id/contentLayout"
				android:orientation="vertical"
				android:gravity="center"
				android:padding="10dip"
				android:background="@drawable/bkg1"
				android:layout_height="wrap_content">
			<Button
				android:id="@+id/Button01"
				android:layout_width="fill_parent"
				android:layout_height="wrap_content"
				android:background="@drawable/yellow_button"
				android:layout_margin="2dp"
				android:text="Option1">
			</Button>
			<Button
				android:id="@+id/Button02"
				android:layout_width="fill_parent"
				android:layout_height="wrap_content"
				android:background="@drawable/blue_button"
				android:layout_margin="2dp"
				android:text="Option2"></Button>
			<Button android:id="@+id/Button03"
				android:layout_width="fill_parent"
				android:layout_height="wrap_content"
				android:layout_margin="2dp"
				android:background="@drawable/yellow_button"
				android:text="Option3">
			</Button>
			<Button android:id="@+id/Button04"
				android:layout_width="fill_parent"
				android:layout_height="wrap_content"
				android:layout_margin="2dp"
				android:background="@drawable/blue_button"
				android:text="Option4">
			</Button>
		</LinearLayout>
	</SlidingDrawer>
</LinearLayout>

PLease leave your valuable comments on this post.

 

8 Comments

  1. Pingback: How to show a sliding window from below in Android? | Coderz Heaven

  2. Basri April 11, 2013 at 8:06 am

    Very good tutorial, thanks

     
  3. Pingback: Navigation Drawer Example in Android. | All Things Gadget

  4. Hassan August 23, 2013 at 10:17 am

    You have explained very good and useful tutorials. Thank you

     
  5. Nilesh September 16, 2013 at 6:19 am

    very good tutorial, but when i am going to display imageButton instead of button then it will gives error, can you please help? why it will happend..?

     
    • James September 16, 2013 at 1:51 pm

      Hi Nilesh

      Can you explain what is the error you are getting?

       
      • Nilesh September 17, 2013 at 6:11 am

        i have solve the problem sir…
        Thank you for reply..
        And one more question is i am able to make the sliding from right to left, top to bottom, bottom to top but i am not able to make the sliding from left to right, i am frustrated now, can you please help me? waiting for your reply.

         
  6. Marco December 6, 2013 at 5:36 pm

    Where is the resources? Thanks, this tutorial is very good

     

Leave a Reply

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

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.