Download Code

FrameLayout Sliding Drawer Android

In framelayout sliding drawer android tutorial you will learn about FrameLayout and also you will use framelayout to design a sliding drawer with some UI components like Button,Image View.Let’s talk about Frames Layout.

FrameLayout

FrameLayout is used to hold single child view.Frame Layout used to display single view or overlapping views.For example displaying a text over the image view.Every UI component within this Layout just like stack structure recent one on top.

Using this Layout you will design a sliding drawer in this tutorial.

So let’s start go ahead and create framelayout sliding drawer android application project.

framelayout,sliding drawer,framelayout sliding drawer,framelayout sliding drawer android,sliding drawer android,

First i’ll demonstrate basic usage of Frame Layout.Go to your activity_main.xml Graphical Layout.Or go to XML view.Use Frame Layout as parent element and then within that Frame Layout put some UI components.Then your layout will look like this.

framelayout,sliding drawer,framelayout sliding drawer,framelayout sliding drawer android,sliding drawer android,

framelayout,sliding drawer,framelayout sliding drawer,framelayout sliding drawer android,sliding drawer android,

as you can see in above image ‘Android Codec’ is behind the image which mean UI components or views are overlapping.

Ok Let’s design sliding drawer.Now go ahead in Graphical Layout and drag and drop sliding drawer from layout.It will contain a Linear Layout and button.Then your layout will look like this.

framelayout,sliding drawer,framelayout sliding drawer,framelayout sliding drawer android,sliding drawer android,

framelayout,sliding drawer,framelayout sliding drawer,framelayout sliding drawer android,sliding drawer android,

Now put some UI components within the Linear Layout of sliding drawer.XML and output will look like this.

framelayout,sliding drawer,framelayout sliding drawer,framelayout sliding drawer android,sliding drawer android,

Output

framelayout,sliding drawer,framelayout sliding drawer,framelayout sliding drawer android,sliding drawer android,

after clicking handle button.

framelayout,sliding drawer,framelayout sliding drawer,framelayout sliding drawer android,sliding drawer android,

After that you will play with your MainActivity.java class 🙂 .In that activity first implement two interface ondrawopen and close listener.Then create sliding drawer variable,refer it’s xml id and apply onDrawerOpen and Close methods.Then your MainActivity will look this.

package androidcodec.framelayout;

/*
 * 
 * All Rights Reserved By:Farhan Rasheed
 * 
 * */

import android.support.v7.app.ActionBarActivity;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.SlidingDrawer.OnDrawerOpenListener;
import android.widget.Toast;


public class MainActivity extends Activity implements OnDrawerOpenListener , OnDrawerCloseListener {
	SlidingDrawer de;    // sliding drawer variable   deprecated in API level 17
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        de = (SlidingDrawer) findViewById(R.id.slidingDrawer1); // refering id of sliding drawer
        de.setOnDrawerOpenListener(this);    // applying onDrawerOpenListener to sliding drawer
        de.setOnDrawerCloseListener(this);   // applying onDrawerCloseListener to sliding drawer
    }
    // sliding drawer closed method when sliding is closed this function will call
	@Override
	public void onDrawerClosed() {
		// TODO Auto-generated method stub
		Toast.makeText(getApplicationContext(), "Drawer closed", Toast.LENGTH_SHORT).show();
	}
	// sliding drawer opened method when sliding is open this function will call
	@Override
	public void onDrawerOpened() {
		// TODO Auto-generated method stub
		Toast.makeText(getApplicationContext(), "Drawer open", Toast.LENGTH_SHORT).show();
	}
   
}

Now go ahead and run your android application project.Output should look this.When closed or opened.Here i have just given an example using Toast.

framelayout,sliding drawer,framelayout sliding drawer,framelayout sliding drawer android,sliding drawer android,

framelayout,sliding drawer,framelayout sliding drawer,framelayout sliding drawer android,sliding drawer android,

ok you are done with sliding drawer basic.So let me tell you one important point.When you want to overlap any layout with sliding drawer put that layout inside Frame Layout and Outside the Sliding Drawer just like this.

framelayout,sliding drawer,framelayout sliding drawer,framelayout sliding drawer android,sliding drawer android,

As i told you at the start that Frame Layout hold views just like stack recent is always on top.Remember this point when you are developing something using Frame Layout.Now using this xml layout when you click on handle button.Drawer will show overlapped to that button within the separated Linear Layout.

I hope you guys get the idea of Frame Layout and how to use Frame Layout with UI components.

Don’t forget to leave your feedback.Thanks.