Android Layout is used to define the user interface which holds the UI controls or widgets that will appear on the screen of an android application or activity.

Generally, every application is combination of View and ViewGroup. As we know, an android application contains a large number of activities and we can say each activity is one page of the application. So, each activities contains multiple user interface components and those components are the instances of the View and ViewGroup.

A View is defined as the user interface which is used to create an interactive UI components such as TextView, EditText, Radio Button, etc. and it responsible for event handling and drawing.

A ViewGroup act as a base class for layouts and layouts parameters which hold other Views or ViewGroups and to define the layout properties.

Types of Android Layout

  • Linear Layout
  • Relative Layout
  • Table Layout
  • Constraint Layout
  • Frame Layout
  • Coordinator Layout

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

layout directory

Okay, now lets get started with the view layouts.

1. Linear Layout

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

Example of Vertical layout snippet

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

Example of Horizontal layout snippet

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

android linear layout

Now that we know the two types of linear layouts, here are the steps you need to follow to create them.

1. Create a new project File -> New -> New Project.
2. In Package Explorer right click on res/layout folder and create a new Android XML File and name it as you wish. I am naming it as “linear_layout.xml”.
3. Now open newly created xml file (in my case “linear_layout.xml”) and type the following code.

<?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:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Email:"
        android:padding="5dip"/>

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dip"/>

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

    <!-- Child linear layout with horizontal orientation -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#5C5959"
        android:layout_marginTop="25dip">

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

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="15dip"
            android:text="About"
            android:textColor="#FFFFFF"
            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

4. To set this newly created view as the initial view of your app, Open your MainActivity.java file. You would see the following line inside the onCreate function setContentView(R.layout.main). Change R.layout.main to R.layout.linear_layout

package com.example.yashpwr;

import android.app.Activity;
import android.os.Bundle;

public class AndroidLayoutsActivity extends Activity {

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

5.  run the application You should see your newly created linear layout in the emulator.

LinerLayout Android

2. Relative Layout

In a relative layout every element arranges itself relative to other elements or a parent element.
As an example, lets consider the layout defined below. The “Cancel” button is placed relatively, to the right of the “Login” button parallely. Here is the code snippet that achieves the mentioned alignment (Right of Login button parallely)

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

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

Here are the steps to create a relative layout.

1. Create a new project File -> New -> New Project
2. In Package Explorer right click on res/layout folder and create a new Android XML File and name it as you wish. I am naming it as “relative_layout.xml”
res/layout -> Right Click -> New -> Android XML File.
3. Now open newly created xml file (in my case “relative_layout.xml”) and type the following code.

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

    <TextView
        android:id="@+id/label"
        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/label" />

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/inputEmail"
        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_centerHorizontal="true"/>
</RelativeLayout>

4. Same like before open your MainActivity.java file and set the layout to your newly created relative layout file. In my case its R.layout.relative_layout

setContentView(R.layout.relative_layout);

5. run the application. You should see your newly created relative layout in the emulator.

Relative 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 image below should give you an idea.

table layout sketch

1. Create a new project File -> New -> New Project.
2. In Package Explorer right click on res/layout folder and create a new Android XML File and name it as you wish. I am naming it as “table_layout.xml”
res/layout -> Right Click -> New -> Android XML File
3. Now open newly created xml file (in my case “table_layout.xml”) and type the following code.

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:shrinkColumns="*"
    android:stretchColumns="*"
    android:background="#ffffff">
    <!-- Row 1 with single column -->
    <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:textSize="18dp" android:text="Row 1"  android:layout_span="3"
            android:padding="18dip" android:background="#b0b0b0"
            android:textColor="#000"/>
    </TableRow>

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

    <!-- Row 3 with 2 columns -->
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="center_horizontal">
        <TextView
            android:text="Row 3 column 1"
            android:layout_weight="1" android:background="#b0b0b0"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>

        <TextView
            android:text="Row 3 column 2"
            android:layout_weight="1" android:background="#a09f9f"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>
    </TableRow>

</TableLayout>

4. Same like before open your AndroidLayoutsActivity.java file and set the layout to your newly created table layout file. In my case its R.layout.table_layout

tab layout

 

Download Code

Happy Coding 🙂