Android Layouts: Relative Layout, Linear Layout and Table Layout

Total Views : 888
Zoom In Zoom Out Read Later Print

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

The different layouts are :

  • Relative Layout
  • Linear Layout
  • Table Layout

Android allows you to create view layouts using  XML file. All the layouts must be placed in /res/layout folder. We can also create a layout using java code.

1.Relative Layout

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

Example :

<Button 
android:id="@+id/btnLogin" ...>
</Button>

<Button
android:layout_toRightOf="@id/btnLogin"
android:layout_alignTop="@id/btnLogin" ...>
</Button>

Steps:

  1. Create a new project File -> New -> Android Project
  2.  In Package Explorer right click on res/layout folder and create a new Layout Resource XML File and name it as you wish. I am naming it as relative_layout.xml for now.
  3. Type the following code.

Example :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="16px">

<TextView
android:id="@+id/labelEmail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Email" />

<EditText
android:id="@+id/inputEmail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/labelEmail" />

<TextView
android:id="@+id/labelPass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Password"
android:layout_below="@+id/inputEmail"
android:layout_marginTop="20px"/>

<EditText
android:id="@+id/inputPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/labelPass" />
<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/inputPassword"
android:layout_alignParentLeft="true"
android:layout_marginRight="10px"
android:text="Login" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/btnLogin"
android:layout_alignTop="@id/btnLogin"
android:text="Cancel" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Register new Account"
android:layout_centerInParent="true"/>

</RelativeLayout>

Open your MainActivity.java file and set the layout to your newly created relative layout file.

Set Layout

package com.prodevsblog.layouts;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.relative_layout);
}
}

2.Linear Layout

In a linear layout, all the elements are displayed in a linear fashion(below is an example of the linear layouts), either  Vertically or Horizontally and this behavior is set in android:orientation which is an attribute of the node LinearLayout.

Vertical Layout :

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

Horizontal Layout :

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

Steps:

  1. Create a new project File -> New -> Android Project
  2.  In Package Explorer right click on res/layout folder and create a new Layout Resource XML File and name it as you wish. I am naming it as linear_layout.xml for now.
  3. Type the following code.

Example :

<?xml version="1.0" encoding="utf-8"?>
<!-- Vertical orientation -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16px">

<TextView
android:id="@+id/labelEmail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Email" />

<EditText
android:id="@+id/inputEmail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/labelEmail" />

<TextView
android:id="@+id/labelPass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Password"
android:layout_below="@+id/inputEmail"
android:layout_marginTop="20px"/>

<EditText
android:id="@+id/inputPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/labelPass" />

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

<!-- Horizontal orientation -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#00FFFF"
android:layout_marginTop="25dip">

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Home"
android:padding="15dip"
android:layout_weight="1"
android:gravity="center"/>

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="About"
android:padding="15dip"
android:layout_weight="1"
android:gravity="center"/>
</LinearLayout>
</LinearLayout>

Open your MainActivity.java file and set the layout to your newly created linear layout file.

Set Layout

setContentView(R.layout.linear_layout);

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. The screenshot below should give you an idea.

Steps:

  1. Create a new project File -> New -> Android Project
  2.  In Package Explorer right click on res/layout folder and create a new Layout Resource XML File and name it as you wish. I am naming it as table_layout.xml for now.
  3. Type the following code.

Table Layout :

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shrinkColumns="*"
android:stretchColumns="*"
android:background="#ffffff">
<!-- Row 1 with 1 column -->
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">
<TextView
android:id="@+id/TextView01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="1 - 1"
android:layout_span="3"
android:padding="18dip"
android:background="#b0b0b0"
android:textColor="#000"/>
</TableRow>
<!-- Row 2 with 2 columns -->
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">
<TextView
android:id="@+id/TextView02"
android:text="2 - 1"
android:layout_weight="1"
android:background="#dcdcdc"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>

<TextView
android:id="@+id/TextView03"
android:text="2 - 2"
android:layout_weight="1"
android:background="#a09f9f"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>
</TableRow>
<!-- Row 3 with 3 columns -->
<TableRow
android:id="@+id/tableRow1"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:id="@+id/TextView04"
android:text="3 - 1"
android:layout_weight="1"
android:background="#a09f9f"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView05"
android:text="3 - 2"
android:layout_weight="1"
android:background="#d3d3d3"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView06"
android:text="3 - 3"
android:layout_weight="1"
android:background="#cac9c9"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>
</TableRow>

</TableLayout>

Open your MainActivity.java file and set the layout to your newly created relative layout file.

Set Layout

setContentView(R.layout.table_layout);

See More

Latest Photos