Android Sliding Drawer example tutorial

Top to bottom smooth sliding menu design in android like web designing slider menus.

Sliding drawer is is used to add smooth simple sliding drawer navigational menus on android applications. Sliding drawer works same as web designing sliding menus. It controlled by simple handle button automatically generated by SlidingDrawer tag. Sliding drawer always works inside layout and best work on linear layout. Sliding drawer contains handle buttons and after it another layout tag and all of hidden menus implements on there. So here is the complete step by step tutorial for Android Sliding Drawer example tutorial.

android-project-download-code-button

Working structure of Sliding drawer menus:

sliding drawer working structure

Android Sliding Drawer example tutorial for top to bottom or up to down in android.

Note: I am using two images first is an arrow image to display sliding drawer on arrow image click and another image is a sample image set in sliding drawer open. To test this application in your own compute using my code please put all below two images in res -> drawable folder.

sample_image

arrow_icon
Code for MainActivity.java file.

 package com.android_examples.com.slidingdrawer;
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.app.Activity;
import android.os.Build;
import android.os.Bundle;
import android.view.DragEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnDragListener;
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 {

 SlidingDrawer slidingdrawer;
 Button SlidingButton;
 @TargetApi(Build.VERSION_CODES.HONEYCOMB)
 @SuppressLint("NewApi")
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 slidingdrawer = (SlidingDrawer)findViewById(R.id.slidingDrawer1);
 SlidingButton = (Button)findViewById(R.id.handle);
 
 slidingdrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
 
 @Override
 public void onDrawerOpened() {
 
 Toast.makeText(MainActivity.this, "Sliding drawer open", Toast.LENGTH_LONG).show();
 }
 });
 
 slidingdrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
 
 public void onDrawerClosed() {
 
 Toast.makeText(MainActivity.this, "Sliding drawer close", Toast.LENGTH_LONG).show();
 
 }
 
 });
 
 }

}

Code for activity_main.xml layout file.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 tools:context="com.android_examples.com.slidingdrawer.MainActivity"
 android:orientation="vertical"
 
 >

 <SlidingDrawer
 android:id="@+id/slidingDrawer1"
 android:layout_width="wrap_content"
 android:layout_height="350dp"
 android:content="@+id/content"
 android:handle="@+id/handle"
 android:orientation="vertical"
 android:rotation="180" 
 >

 <Button
 android:id="@+id/handle"
 android:layout_width="wrap_content"
 android:layout_height="50sp"
 android:background="@drawable/arrow_icon"
 />

 <LinearLayout
 android:id="@+id/content"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:rotation="180" >
 
<!-- PUT HERE ANY WIDGETS OR BUTTONS, IMAGES, TEXTVIEW, EDITTEXT BOX, SEARCH BOX -->
<!-- TO OPEN INTO SLIDING DRAWER. -->
 
 <ImageView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/sample_image" 
 />
 
 </LinearLayout>
 </SlidingDrawer>

</LinearLayout>

Screenshot:

Sliding drawer close

Android Sliding Drawer example tutorial

Click Here To Download Android Sliding Drawer example tutorial for top to bottom project.

Leave a Reply

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