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.