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.

Relative Layout

What is Relative Layout

Relative Layout is a layout where its Child’s positions are related with its sibling’s views position. In Relative Layout you get some important tags, which are very useful to arrange view, anywhere on the screen with ease.

Why we need Relative Layout ?

In my previous tutorial I have discuss Linear Layout if you did not read it click here to go.

Have you tried to put a button on another button with Linear Layout? No.... so try it ones...

After trying this hope you understand you cannot put one view on another view inside linear layout.They will arrange views one after another horizontally or vertically.

To solve this problem we have to use another Layout. Well I am going to describe here Relative Layout, you can also solve this problem by using Relative Layout. Now we are moving on implementation part we will discuss about tags later.

Create new project then inside your project create a xml and name it "firstrelative".  Now make your "firstrelative.xml"  like this :- 

<RelativeLayout 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="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:background="#FF00FF"

        android:text="Button" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

         android:background="#00ffff"

        android:text="Second View" />

</RelativeLayout>

Inside your onCreate method write

setContentView(R.layout. firstrelative);

you will get the output like this:-

So here you can see in pink colour I have one button its width is fill fill_parent ,and next important tag I have used is

android:layout_alignParentTop="true"

so its align on the top of its parent and I used the same tag for another button and one more tag which is   

    android:layout_centerHorizontal="true"

to align this view on center in the horizontal direction .

and if you replace android:layout_alignParentTop="true" by

  

        android:layout_centerInParent="true"

so you will get the output like this by changing a single line.

How do you feeling.  Its so simple to work with Relative Layout if you are familiar with tags of Relative Layout.

A secrete which I am sharing with you, Do you know what???   You can also get the same look in Linear Layout if you change the background of Layout and keep a button on that Layout

But in Linear Layout you can keep buttons on Layout but you can not put a view on another View like as we put Button on another Button … Interesting  ? hmmm…..

Now let’s have some more experiment on Relative Layout. In Relative Layout you can relate one view with another view by id. like this:-

<RelativeLayout 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="fill_parent"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:background="#FF00FF"

        android:text="Button" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/button1"

        android:layout_centerHorizontal="true"

        android:background="#00ffff"

        android:text="Second View" />

    <Button

        android:id="@+id/button3"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_above="@+id/button1"

        android:layout_centerHorizontal="true"

        android:background="#00ff00"

        android:text="Button" />

</RelativeLayout>

I simply added one tag in button2

android:layout_below="@+id/button1"

to  arrange second button in the blow of first button and I took another button i.e. button3 and replace android:layout_below="@+id/button1"  by      android:layout_above="@+id/button1"       

you will get the look like this. Hope u enjoyed ….

Linear Layout

What are Layouts:

Before start building a Layout we must know what the Layout is? Layouts are nothing but a container which can contain your views. We can put many Views inside Layout and can create GUI(Graphical user interface)  for users, so that they can interact with the Application.

Types of Layout 

There are different types of Layouts available in Android. We use these Layouts according to our requirement. Well I will tell the scenarios also to you so that you can understand which Layout, where you should use .Different types of layouts are as follows 

• Linear Layout (Vertical )
• Linear Layout (Horizontal )
• Relative Layout
• Grid Layout
• Frame Layout
• Table Layout

Let’s start with Linear Layout

Linear Layout supports two types of orientation vertical and horizontal. In both types of orientation views will arrange one after another.

I want to throw some light on vertical orientation of Linear Layout. In this orientation when you put views inside this layout they will arrange vertically means one row can contain one view only.

If we talk about  horizontal  orientation of Linear Layout  so one row can have multiple views .

Now come to the implementation part. Don’t worry we will discuss all important tags of Linear Layout.

Now create a Linear Layout in your application and name it "firstlayout". 

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

   

 <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Akanksha's"

        android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Androids" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="hunt" />

</LinearLayout>

Bind this layout with your "MainActivity" by 

 setContentView(R.layout.firstlayout).

Like this:-

@Override

     protected void onCreate(Bundle savedInstanceState) {

          super.onCreate(savedInstanceState);

          setContentView(R.layout.activity_first);

              }

Make sure your Activity is declared in "manifest.xml" file.

Now Run your Application you will get output like this in vertical orientation.

In horizontal orientation like this:-

Let’s  discuss  some tags of Linear Layout in brief.

Setting width and height of layout is very essential part of any layout and Views.

android:layout_width="match_parent" android:layout_height="match_parent"

There are three types of width and height options are available in Android match_parent, fill_parent and wrap_content. you can use any one of these according to your need.

If you want to set width and height according to your content so use wrap_content.

If you want to set width and height according to its parent so use match_parent.

If you want to that width and height of the layout to fill on the screen so use fill_parent.

other then all these you can also set fixed width and height  .

Like android:layout_width="100dp"

But it is advisable to use one of these three match_parent, fill_parent , wrap_content . 

So that you can get the same look in aspect of width and height on different resolution’s tablets or Android Mobile.