Step By Step Create SlidingDrawer User Interface

Step By Step Create SlidingDrawer User Interface

SlidingDrawer layout container is direct subclass of ViewGroup class.It expand the screen area which can be used by user interface components.It should be used as an overlay inside Layout.SLidingDrawer can be used horizontally or vertically.It is special widget composed of two child views .

• First one is Handle,user drag.
• Second one is Content,which is attached with the handle and dragged with it.

so lets learn it step by step that how to use.

• first open the eclipse select File -> New -> Project.

• Then Select Android -> Android Application Project and then click next.
• Now fill with following details:

• Project name- SlidingDrawerExample
• Application name- SlidingDrawerExample
• package name-sliding.Drawer
• Minimum required SDK- select android 3.0
• tick on create custom laucher icon.
• tick on create project in workspace.

• In Config Launcher Icon window click Next and finally choose Blank Activity in Create Activity window and the click Next and then Finish.
• Now you have configured the Eclipse and ready to use SlidingDrawer.Now select your project SlidingDrawerExample and click on res ->layout ->activity_main.xml. 
• After opening the activity_main.xml you will see the following code.

• Now you need to add SlidingDrawer inside Relative Layout so replace Textview with SlidingDrawer xml lines .therefore the finally activity_main.xml will look like this.

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <RelativeLayout  
3:  xmlns:android="http://schemas.android.com/apk/res/android"  
4:  android:layout_width="fill_parent"  
5:  android:layout_height="fill_parent">  
6:  <SlidingDrawer  
7:  android:id="@+id/drawer"  
8:  android:layout_width="320dip"  
9:  android:layout_height="440dip"  
10:  android:orientation="vertical"  
11:  android:handle="@+id/handle"  
12:  android:content="@+id/content">  
13:  <ImageView  
14:  android:id="@+id/handle"  
15:  android:layout_width="48dip"  
16:  android:layout_height="48dip"  
17:  android:src="@drawable/icon" />  
18:  <AnalogClock android:id="@+id/content"  
19:  android:background="#D0A0A0"  
20:  android:layout_width="fill_parent"  
21:  android:layout_height="fill_parent" />  
22:  </SlidingDrawer>  
23:  </RelativeLayout>  

• So lets understand some new lines which are added in the above activity_main.xml file.
• At line 6- SlidingDrawer widget is added inside relative layout.
• At line 11-SlidingDrawer defines the id of the handle which is necessary. 
• At line 12-SlidingDrawer defines the id of the content which is necessary.
• At line 13-ImageView is used for handle uses the id of handle used for drag.
• At line 17-we have added an image of 48x48 pixels(standard size) uses for ImageView.
• At line 18-AnalogClock is used as content uses the id of content.

• Now we need to add image for ImageView.so for adding the image you need a image(48x48 pixels recommended).
• name the image as icon which should be same as given in activity_main.xml.
• open the folder res under your project.
• click on res -.>drawable.
• Right click on drawable folder and paste the image.
• You can download copy image icon.png from here.

• Now click src ->sliding.Drawer ->MainActivity.java  you will see the following already written.

1:  1: package relative.Layout;   
2:  2: import android.os.Bundle;   
3:  3: import android.app.Activity;   
4:  4: import android.view.Menu;   
5:  5: public class MainActivity extends Activity {   
6:  6:  @Override   
7:  7:  public void onCreate(Bundle savedInstanceState) {   
8:  8:   super.onCreate(savedInstanceState);   
9:  9:   setContentView(R.layout.activity_main);   
10:  10:  }   
11:  11:  }   

• This is the main java file of the project so lets discuss the basic points of this java file.
• first line shows the package where all your java file resides
• the Activity class which is a super class for any activity you create ,therefore wee needs to import the android.app.Activity
• android.os contain the classes of operating system utilities .and one of the class is Bundle which creates Bundles of variables for convenience.
• note-Platform is the highest level of hierarchy of java which contain all the core packages.
• onCreate() method is declared as public so that it is open to the any part of the android application.
• savedInstanceState object is a Bundle object ,it is a collection of all of the state of activity screen user interface elements.It stores all the states of user interface elements before it is replaced by any other screen.]
• the super keyword calls the method( onCreate() ) of  superclass android.app.Activity so it is just a shortcut of android.app.Activity.onCreate(savedInstanceState).
• setContentView(R.layout.activity_main) loads the activity_main.xml file from res ->layout folder. It  is  a method of android.app.Activity.
• Now for running your projects you need to compile the project.
• As you have already set up emulator for android.
• so to compile right click on top level of project SlidingDrawerExample project folder in the package explorer and select run as ->android application.
• The emulator will take approximately 30 sec then after it will launch your project in the emulator  environment.
• In the emulator 1 image click on Image button you will see emulator image 2.

• Image 1(Handle),click in on icon

• Image