Download Code

Android Studio FrameLayout Example

In android studio framelayout example you will learn about FrameLayout and also you will use framelayout to design a sliding drawer with some UI components like Button,ImageView.Let’s talk about Frame 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 Create android studio framelayout example application project.

First i’ll demonstrate basic usage of Frame Layout.Go to your activity_main.xml Design View or go to Text View.Use Frame Layout as parent element and then within that Frame Layout put some UI components.

android studio framelayout,android studio framelayout example,framelayout example,

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 Design View and drag and drop sliding drawer from Containers.It will contain a Linear Layout and button.

Now put some UI components within the Linear Layout of sliding drawer.

android studio framelayout,android studio framelayout example,framelayout example,

Now run your android studio framelayout example application project.

android studio framelayout,android studio framelayout example,framelayout example,

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

MainActivity.java

package com.example.anonymous.studioframelayoutdrawer;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.SlidingDrawer;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements SlidingDrawer.OnDrawerOpenListener, SlidingDrawer.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.

android studio framelayout,android studio framelayout example,framelayout example,

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.

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.