What are Layouts in Android ?

What is a Layout ?
-> Its is the backscreen on your page which lets you to lay out your elements like button ,checkbox in a specific way or order .

E.g. If you have ever played the game of marbles shown in the below image .
       You have to place marbles only in the round concave curves on the board . You can't place the marbles on the plane surface . The layout here is the board with semicircle depressions and the elements are the marbles .

       The layout (board) decides where to set the elements (marbles) .
Note : The XML page we design is itself a layout as a whole .
       Layouts can be dragged directly from the palette found in Eclipse .

There are 7 basic types of layouts in Android programming .

Types of Layouts

These are :

1. Grid
2. Linear
3. Relative
4. Frame
5. Table
6. Fragment
7. Space

1) Grid Layout : It enables to display the elements in a Grid shown in below diagram .

Elements are stored along boxes called grids . The API level required for Grid Layout is <14 , hence You must change the minimum sdk version to 14 android:minSdkVersion="14" in AndroidManifest.xml file .

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:columnCount="2"
            android:rowCount="2" >
            <TextView
                android:id="@+id/textView4"
                android:layout_gravity="left"
                android:layout_row="0"
                android:layout_column="0"
                android:text="row0 col0"
                android:textAppearance="?android:attr/textAppearanceLarge" />
            <TextView
                android:id="@+id/textView3"
                android:layout_gravity="right"
                android:layout_row="0"
                android:layout_column="1"
                android:text="row0 col1"
                android:textAppearance="?android:attr/textAppearanceLarge" />
            <TextView
                android:id="@+id/textView2"
                android:layout_gravity="left"\
                android:layout_row="1"
                android:layout_column="0"
                android:text="row1 col0"
                android:textAppearance="?android:attr/textAppearanceLarge" />
            <TextView
                android:id="@+id/textView1"
                android:layout_row="1"
                android:layout_column="1"
                android:layout_gravity="right"
                android:text="row1 col1"
                android:textAppearance="?android:attr/textAppearanceLarge" />
        </GridLayout>

Drag the Grid Layout from the palette to the left of Hello World and see the change in the code . The attributes are self explanatory.

2) Linear Layout : Elements are placed in a straight line (horizontal or vertical) .
a) Horizontal Linear Layout : Elements are placed in the a horizantal way side by side .

Here 3 Buttons are placed one after other in a horizontal manner (in a straight line). The code is as follows .

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
        </LinearLayout>

Since the default Linear Layout is horizontal , if there is no orientation parameter in the LinearLayout attributes it says that the Linear Layout is Horizontal .
br /> b)Vertical Linear Layout : The elements are placed in a vertical way side by side .

Here the elements are placed one below the other vertically (in a straight line) .The code is as follows

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical">
            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
</RelativeLayout>

The only change of attributes between horizontal and vertical Linear Layout is the orientation attribute is vertical (black colored in the code) . 3) Relative Layout : It lets us to display the elements relative to the margin of the page or other elements previously present on the page .

In the above screenshot you see a TextView which is placed at some distance to the top border and at some distance to the "HelloWorld" TextView . Here's the code :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginRight="20dp"
        android:layout_marginTop="55dp"
        android:layout_toLeftOf="@+id/textView1"
        android:text="TextView" />
</RelativeLayout>

Its the most easiest layout to use. The attribute layout_toLeftOf new TextView is to the left of HelloWorld . Hence the placement of the new TextView is Relative to Hello world
  4) Frame Layout : It is used to reserve a particular space for a single element .

The xml code of this page is :

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <ImageView
            android:src="@drawable/logo"
            android:scaleType="fitCenter"
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"/>
        <TextView
            android:text="Learn Android from Made in Android"
            android:textSize="24px"
            android:textColor="#00dd00"
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:gravity="center"/>
    </FrameLayout>

By using a Frame layout I have reserved the whole page for the image logo.png since the layout width and height fills the page.

android:layout_width="fill_parent"
android:layout_height="fill_parent"

But when I try to put a TextView in the same FrameLayout I found it to be overlapping the image that also in the center since the gravity of the TextView is center .

android:gravity="center"

5) Table Layout :It is used to make a Table .

The xml code for above layout is shown below :

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
            <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="20dp"
                    android:padding="10dp"
                    android:text="Row 1 Column 1" />
                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="20dp"
                    android:padding="10dp"
                    android:text="Row 1 Column 2" />              
            </TableRow>          
               <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="20dp"
                    android:padding="10dp"
                    android:text="Row 2 Column 1" />
                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="20dp"
                    android:padding="10dp"
                    android:text="Row 2 Column 2" />
            </TableRow>   
        </TableLayout>

It contains an element called TableRow which is like a horizontal linear layout but can only be used inside a TableLayout . Any number of columns and rows can be made by using TableLayout and TableRow .

  6) Fragment : It helps you do design two or more pages in a single page and by using single Activity

It is not possible to show the code of Fragment here since It contains high complexity and will be only understandable in another post.

7) Space :It is used to leave empty space between elements .

A small space of 50dp is left between Button a LargeText by using Space . The code for the above layout is as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />
        <Space
            android:id="sp1"
            android:layout_width="50dp"
            android:layout_height="10dp"
            />
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </LinearLayout>

we have discussed all the 7 basic layouts in Android Programming . It is possible to use one Layout under another as many times as possible. Custom layouts can be used by including external libraries in our projects .

Stay Tuned with Made In Android