logo

In this tutorial we will be discussing about the different view layouts in an android mobile application. The six different layouts are

1. Linear Layout
2. Relative Layout
3. Table Layout
4. Grid View
5. Tab Layout
6. List View

Android allows you to create view layouts using simple XML file. All the layouts must be placed in /res/layout folder.

Android Layout Directory


Mostly in many applications we use “Linear Layout” and “relative layout” only. So we will learn these layouts below.

Linear Layout

In a linear layout, like the name suggests, all the elements are displayed in a linear fashion, either Horizontally or Vertically and this behavior is set in android:orientation which is an attribute of the node LinearLayout.
i.e.
Example of Vertical layout

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

Example of Horizontal layout

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

Let’s create project:
1) Create a new project File -> New -> Android Project
2) Create linear_layout.xml in res/layout and insert following

<?xml version="1.0" encoding="utf-8"?>
<!-- Parent linear layout with vertical orientation -->
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
 
  <TextView android:layout_width="fill_parent" 
     		android:layout_height="wrap_content"
     		android:text="Email:" />
 
  <EditText android:layout_width="fill_parent" 
     		android:layout_height="wrap_content"/>             
 
  <Button android:layout_width="fill_parent" 
		    android:layout_height="wrap_content"
		    android:text="Login"/>
 
  <!-- Child linear layout with horizontal orientation -->
  <LinearLayout android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" 
            android:background="#2a2a2a"
            android:layout_marginTop="10dp">

  <TextView android:layout_width="wrap_content" 
  			android:layout_height="wrap_content"
            android:text="Home" 
            android:gravity="center"/>
 
  <TextView android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:text="About" 
            android:paddingLeft="8dp"
            android:gravity="center"/>   
 
  </LinearLayout>
 
</LinearLayout>

Linear Layout Output

Here Email TextView, EditText and Login Button are vertical in layout. whereas Home and about are in horizontal layout.

Relative Layout

In a relative layout every element arranges itself relative to other elements or a parent element.

Relative To Container

These properties will layout elements relative to the parent container.

1) android:layout_alignParentBottom – Places the bottom of the element on the bottom of the container

2) android:layout_alignParentLeft – Places the left of the element on the left side of the container

3) android:layout_alignParentRight – Places the right of the element on the right side of the container

4) android:layout_alignParentTop – Places the element at the top of the container

5) android:layout_centerHorizontal – Centers the element horizontally within its parent container

6) android:layout_centerInParent – Centers the element both horizontally and vertically within its container

7) android:layout_centerVertical – Centers the element vertically within its parent container

Example

<RelativeLayout 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	xmlns:android="http://schemas.android.com/apk/res/android">
	<Button 
 		android:id="@+id/button01"
 		android:text="Top Button Horizontally center"
 		android:layout_alignParentTop="true"
 		android:layout_width="wrap_content"
 		android:textSize="10sp"
 		android:layout_centerHorizontal="true"
 		android:layout_height="wrap_content" />

	<Button 
 		android:id="@+id/button02"
 		android:text="Bottom Button Horizontally center"
 		android:layout_alignParentBottom="true"
 		android:layout_width="wrap_content"
 		android:textSize="10sp"
 		android:layout_centerHorizontal="true"
 		android:layout_height="wrap_content" />
 		
 	<Button 
 		android:id="@+id/button03"
 		android:text="Left Button Vertically center"
 		android:layout_width="wrap_content"
 		android:textSize="10sp"
 		android:layout_alignParentLeft="true"
 		android:layout_centerVertical="true"
 		android:layout_height="wrap_content" />	

<Button 
 		android:id="@+id/button04"
 		android:text="Right Button Vertically center"
 		android:layout_width="wrap_content"
 		android:layout_alignParentRight="true"
 		
 		android:layout_centerVertical="true"	
 		android:textSize="10sp"	
 		android:layout_height="wrap_content" />
</RelativeLayout>

Relative Layout Output-1

Relative To Other Elements

These properties allow you to layout elements relative to other elements on screen.

1) android:layout_above – Places the element above

the specified element

2) android:layout_below – Places the element below the specified element

3) android:layout_toLeftOf – Places the element to the left of the specified element

4) android:layout_toRightOf – Places the element to the right of the specified element

Example

<RelativeLayout 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	xmlns:android="http://schemas.android.com/apk/res/android">
	<Button 
 		android:id="@+id/button01"
 		android:text="Button1"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content" />
	<Button 
 		android:id="@+id/button02"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content"
 		android:layout_toRightOf="@id/button01"
 		android:layout_marginLeft="8dp" 
 		android:text="To the RightOf Button1"/>
 	<Button 
 		android:id="@+id/button03"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content"
 		android:layout_below="@id/button01"
 		android:layout_alignParentRight="true"
 		android:text="Button 2"/>
 	<Button 
 		android:id="@+id/button04"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content"
 		android:layout_below="@id/button01"
 		android:layout_toLeftOf="@id/button03"
		android:text="To Left of Button 2"/>

</RelativeLayout>

Relative Layout output-2

Alignment With Other Elements

These Properties allow you to specify how elements are aligned in relation to other elements.

1) android:layout_alignBaseline – Aligns baseline of the new element with the baseline of the specified element

2) android:layout_alignBottom – Aligns the bottom of new element in with the bottom of the specified element

3) android:layout_alignLeft – Aligns left edge of the new element with the left edge of the specified element

4) android:layout_alignRight – Aligns right edge of the new element with the right edge of the specified element

5) android:layout_alignTop – Places top of the new element in alignment with the top of the specified element

Example

<RelativeLayout 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	xmlns:android="http://schemas.android.com/apk/res/android">
	<Button 
 		android:id="@+id/button01"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content"
		android:text="Button-2 right boundary aligned with this button"/>
	<Button 
 		android:id="@+id/button02"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content"
 		android:text="Button-2" 
 		android:layout_below="@id/button01"
 		android:layout_alignRight="@+id/button01"/>
</RelativeLayout>

AUTHOR: Vikas Hiran
1 Comment
  • Mahavir

    Nice Article

    January 23, 2012

Leave a Comment

Your email address will not be published.