Android Layouts - Relative , Linear and Table Layout (Part 1)

Choosing a correct layout is very important from the design point of view. Every layout has its own advantage and disadvantage. So, in this post I will be discussing about various layout available in android. 

Various Layouts are : 

1. Relative Layout
2. Linear Layout
3. Table Layout
4. Grid Layout
5. Tab Layout
6. Absolute Layout
7. ListView

Okay , so lets start by discussing each layout.

Relative Layout

In Relative Layout, as the name suggests every element places itself relative to the other elements. Various attributes such as android:layout_below , android:layout_toLeftOf are available to achieve this.

Create a new xml file in layout directory and type in the code as follows.

<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=".MainActivityFragment">

    <EditText
        android:id="@+id/userName"
        android:layout_width="250dp"
        android:hint="Username"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <EditText
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:id="@+id/passWord"
        android:hint="Password"
        android:layout_below="@+id/userName"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        android:id="@+id/button"
        android:layout_below="@+id/passWord"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp" />
</RelativeLayout>

Example of Relative Layout

Linear Layout

In Linear Layout, all the elements are placed linearly either vertically or horizontally. We have to specify the orientation i.e vertical or horizontal in android:orientation attribute.
Create a new xml file in layout directory and type in the code as follows.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivityFragment">

    <EditText
        android:id="@+id/userName"
        android:layout_width="250dp"
        android:hint="Username"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"/>

    <EditText
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:id="@+id/passWord"
        android:hint="Password"
        android:layout_marginTop="30dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        android:id="@+id/button"
        android:layout_marginTop="50dp" />

</LinearLayout>

Example of Linear Layout

Table Layout

In Table Layout, the layout gets divided into rows and columns. It's very easy to use.
Create a new xml file in layout directory and type in code as follows.

<TableLayout 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=".MainActivityFragment">

    <TableRow>
        <EditText
            android:id="@+id/userName"
            android:layout_width="150dp"
            android:layout_alignParentTop="true"
            android:layout_weight="1"
            android:hint="Username" />

        <EditText
            android:id="@+id/passWord"
            android:layout_width="150dp"
            android:layout_weight="1"
            android:hint="Password" />
    </TableRow>

    <TableRow>
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/passWord"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="50dp"
            android:text="Login" />
    </TableRow>

</TableLayout>
Example of Table Layout
Okay, I have discussed three layouts in this post, and the remaining layouts will be discussed in my next post Android Layouts - Part 2.