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 ….