Android Layouts : Linear, Relative And Table Layout

In this post I will be discussing about the different view layouts in an android mobile application.

1. Linear Layout
2. Relative Layout
3. Table Layout

Android layout allows you to create graphical view of your application. All layouts will be placed inside res/layout folder.

1. Linear Layout

Linear layout is a viewgroup that aligns all children in a single direction , vertically or horizontally.

horizontal : 

<LinearLayout android:orientation="horizontal">  . . . .  </LinearLayout>

Vertical :
<LinearLayout android:orientation="vertical">  . . . .  </LinearLayout>

Example for horizontal : 

<LinearLayout android:orientation="horizontal"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1" />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2" />
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3" />
    </LinearLayout>


Output :







Example for vertical :




<LinearLayout android:orientation="vertical"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1" />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2" />
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3" />
    </LinearLayout>


Output : 







2.Relative Layout

RelativeLayout is a view group that displays child views in relative positions.


Example : 

<RelativeLayout
    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:text="Button1" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:text="Button2" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_toRightOf="@+id/button2"
        android:text="Button3" />
</RelativeLayout>

Output :




3. Table Layout

Table layouts in Android works in the same way HTML table layouts work. You can divide your layouts into rows and columns Its very easy to understand.




Example :

<tablelayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:shrinkcolumns="*"
    android:stretchcolumns="*" >

    <!-- Row 1 with single column -->

    <tablerow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <textview
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:background="#b0b0b0"
            android:padding="18dip"
            android:text="Row 1"
            android:textcolor="#000"
            android:textsize="18dp" >
        </textview>
    </tablerow>
    <!-- Row 2 with 3 columns -->

    <tablerow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <textview
            android:id="@+id/TextView04"
            android:layout_weight="1"
            android:background="#dcdcdc"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 2 column 1"
            android:textcolor="#000000" >

            <textview
                android:id="@+id/TextView04"
                android:layout_weight="1"
                android:background="#d3d3d3"
                android:gravity="center"
                android:padding="20dip"
                android:text="Row 2 column 2"
                android:textcolor="#000000" >

                <textview
                    android:id="@+id/TextView04"
                    android:layout_weight="1"
                    android:background="#cac9c9"
                    android:gravity="center"
                    android:padding="20dip"
                    android:text="Row 2 column 3"
                    android:textcolor="#000000" >
                </textview>
            </textview>
        </textview>
    </tablerow>
    <!-- Row 3 with 2 columns -->

    <tablerow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <textview
            android:id="@+id/TextView04"
            android:layout_weight="1"
            android:background="#b0b0b0"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 3 column 1"
            android:textcolor="#000000" >

            <textview
                android:id="@+id/TextView04"
                android:layout_weight="1"
                android:background="#a09f9f"
                android:gravity="center"
                android:padding="20dip"
                android:text="Row 3 column 2"
                android:textcolor="#000000" >
            </textview>
        </textview>
    </tablerow>
</tablelayout>

Output :