August 2013

Objectives :

• Which layouts does Android have?
• How to implement a layout in Android?
• How to use different layouts in Android?
• How to use Linear Layout in Android?
• How to use Relative Layout in Android?
• How to use Absolute Layout in Android?
• How to use Frame Layout in Android?
• How to use Table Layout in Android?
• How to use nested layouts in Android?
• How to use a layout inside another layout in Android?

In Android, there are main five (5) layouts which are as follows;

1. Linear Layout
2. Relative Layout
3. Absolute Layout
4. Table Layout
5. Frame Layout

Here I have used the same form controls/components in form to show how it looks in different layouts except Frame Layout.

Linear Layout in Android

Here I have used nested linear layout.

XML Code for Linear Layout :

[sourcecode language=”xml”]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

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

<TextView
android:text="User Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

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

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

<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

</LinearLayout>

[/sourcecode]

Here android:orientation=”vertical” will render controls in vertical manner and android:orientation=”horizontal” will render controls in horizontal manner.

Relative Layout in Android

Here in Relative layout we don’t need to nest layouts generally.

XML Code for Relative Layout :

[sourcecode language=”xml”]

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<TextView
android:id="@+id/userName"
android:text="First Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<EditText
android:id="@+id/editUserName"
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/userName"
android:layout_below="@id/userName"/>

<EditText
android:id="@+id/editpassword"
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/editUserName"
android:layout_alignLeft="@id/editUserName"/>

<TextView
android:id="@+id/password"
android:text="Password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/editpassword"
android:layout_below="@id/editUserName" />

</RelativeLayout>

[/sourcecode]

Here we need to specify android:layout_toLeftOf=”@id/controlId”, android:layout_toRightOf=”@id/controlId”, android:layout_below=”@id/controlId”, android:layout_alignLeft=”@id/controlId”, etc. parameters so as to render the control at particular place.

Absolute Layout in Android

Here in Absolute Layout we need to specify exact pixel location or (x,y) coordinate where we need to render our controls.

XML Code for Absolute Layout :

[sourcecode language=”xml”]
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView
android:layout_x="10px"
android:layout_y="110px"
android:text="User Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<EditText
android:layout_x="150px"
android:layout_y="100px"
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:layout_x="10px"
android:layout_y="160px"
android:text="Password"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<EditText
android:layout_x="150px"
android:layout_y="150px"
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</AbsoluteLayout>

[/sourcecode]

Table Layout in Android

Whenever you need to manage data in tabular manner, you can use Table Layout. Table Layout will help you to show data in rows and columns.
Here is the sample code showing how to use Table Layout :

[sourcecode language=”xml”]
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<TableRow>

<TextView
android:text="User Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />

<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</TableRow>

<TableRow>

<TextView
android:text="Password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />

<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</TableRow>

</TableLayout>
[/sourcecode]

Here in Table Layout, we use <TableRow> tag to add contents to a row same as that of HTML.

Frame Layout in Android

Frame Layout can be used to display various contents such as text, images, videos, image galleries, etc.
Sample code for Frame Layout is as follows :

[sourcecode language=”xml”]<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<TextView
android:text="http://aatul.me"
android:textSize="24sp"
android:textColor="#000000"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>

</FrameLayout>
[/sourcecode]