Frame Layout

What is Frame Layout

I have already described you Linear Layout and Relative Layout In my previous tutorials. In this tutorial we will talk about Frame Layout.

Mostly we use Frame Layout when we require overlapping views. Is very easy to use you can set views on the other views very simply by using Frame Layout in comparison to Relative Layout. Suppose use have take a view if you take another view so in Frame Layout the next view will arrange on the left top corner of first view, means a single view you can see on this space if the height and width are same. In this case it will block the area to display a single view.

Now it’s time to have fun by creating a interesting program by using Frame Layout. It will also clear the scenario to use Frame Layout.

Implementation

Create a new project and Name it “FrameDemo” set your package name as com.akanksha.framedemo then create a xml and name it “framelay” and make it like this :-

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

  >

    <Button

        android:id="@+id/button1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#00fff0"

        android:text="First Button"

        android:textColor="#ff0000" />

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Second View"

        android:textAppearance="?android:attr/textAppearanceMedium"

        android:textColor="@android:color/black" />

</FrameLayout>

Now use this “framelay.xml” file in your MainActivity. Inside onCreate method write          

setContentView(R.layout.framlay);

Then Declare it this Activity as Launcher Activity in your Manifest.xml file and Run it. You will get a view on another view this all we done by using Frame Layout.

Now Let’s have some more fun with Frame Layout. Create another layout in your “layout” folder,  and name it “secframe”. Copy two image file in your drawable folder and use these images in background of your image view, you can also use src property in place of background. Here “ic_launcher” and “flower” re name of my image files.

Inside “secframe.xml” write this:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:src="@drawable/ic_launcher"

      />

    <ImageView

        android:id="@+id/imageView2"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="@drawable/flower"

       />

    <Button

        android:id="@+id/changeimg"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#fff000"

        android:text="change image" />

</FrameLayout>

Create an Activity in your project and name it “FrameActivity”

 and make it like this :-

public class FrameActivity extends Activity {

     private ImageView img1;

     private ImageView img2;

     private Button changeimg;

     boolean checkclik=false;

     @Override

     protected void onCreate(Bundle savedInstanceState) {

          // TODO Auto-generated method stub

          super.onCreate(savedInstanceState);

          setContentView(R.layout.secframe);

          getViews();

         

          changeimg.setOnClickListener(new OnClickListener() {

             

              @Override

              public void onClick(View v) {

          if(!checkclik){

              img2.setVisibility(v.GONE);

              checkclik=true;

          }else {

              img2.setVisibility(v.VISIBLE);

              checkclik=false;

          }

         

                  

              }

          });

     }

     private void getViews() {

         

          img1 = (ImageView) findViewById(R.id.imageView1);

          img2 = (ImageView) findViewById(R.id.imageView2);

          changeimg=(Button)findViewById(R.id.changeimg);

     }

}

Define this class in your manifest.xml file, and make it Launcher activity. When you Run it you will get output like this:

Now just click on change image button your  screen will look like this :

Now you can play hide and seek with you Frame Layout.