[Beginners] Android Layout Tutorials (LinearLayout, RelativeLayout and TableLayout)

Today lesson will be on Layouts, Android let you create layout using xml the layout files are place in /res/layout folder.

Linear Layout
In Linear Layout all Element are place on straight line either vertical or horizontal using the attribute android:orienttion="vertical" or android:orienttion="horizontal" 

here is how Linear Layout code looks like:

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

Horizontal
<LinearLayout
android:orientation="horzontal"></LinearLayout>

Here is how the Two Orientations look like:

Lets Code an Example of the Linear Layout, Navigate to your Layout folder res/layout select your activity_main switch to Text now type the following code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Vertical Orientation" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:hint="Name"
        android:ems="10"
        android:id="@+id/editText" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:hint="email"
        android:id="@+id/editText3" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:hint="passrord"
        android:id="@+id/editText2" />

    <Button
        android:text="Submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Horizontal Orientation"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B2"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B3"/>
    </LinearLayout>

</LinearLayout>

The Output should look like This:

Study the code very well to understand it.

Relative Layout

In Relative Layout Elements are place relatively to each other that means it can be place anywhere in the view unlike linear which are place in a straight order. for Example

Type the following code in your layout file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="57dp"
        android:id="@+id/button2" />
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/button3" />
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/button2"
        android:layout_toRightOf="@+id/button3"
        android:layout_toEndOf="@+id/button3"
        android:layout_marginLeft="69dp"
        android:layout_marginStart="69dp"
        android:id="@+id/button4" />
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_toRightOf="@+id/button2"
        android:layout_toEndOf="@+id/button2"
        android:layout_marginBottom="149dp"
        android:id="@+id/button5" />
</RelativeLayout>

The output should look like

Table Layout

The Table layout divides the Layout to Rows and Columns just like html.

As you know Row are horizontal and Columns are Vertical

To draw table the:

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
</TableLayout>

To Add Rows:



<TableRow
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="center_horizontal">
        <TextView
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:text="Row"  
            android:layout_span="3"
            android:padding="20dip" />
    </TableRow>

The above is just a row no column.
and it should look like this



To add Columns you just have to add two or more elements to TableRow eg:

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

        <TextView
            android:text="column 1"
            android:layout_weight="1" 
            android:padding="20dip" 
            android:gravity="center"/>

        <TextView
            android:text="column 2"
            android:layout_weight="1" 
            android:padding="20dip" 
            android:gravity="center"/>

        <TextView
            android:text="column 3"
            android:padding="20dip" 
            android:gravity="center"/>


    </TableRow>

The ouput should look like

Adding the Rows and Columns up :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="center_horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Row"
            android:layout_span="3"
            android:padding="20dip"/>
    </TableRow>

    <TableRow
    android:id="@+id/tableRow1"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">
    <TextView
        android:text="column 1"
        android:layout_weight="1"
        android:padding="20dip"
        android:gravity="center"/>
    <TextView
        android:text="column 2"
        android:layout_weight="1"
        android:padding="20dip"
        android:gravity="center"/>
    <TextView
        android:text="column 3"
        android:padding="20dip"
        android:gravity="center"/>

</TableRow>
    </TableLayout>

Conclusion

Thats it you have seen how Linear, Relative and Table Layouts works, any question shout use the comment box below