Pleasures of Relative Layout - A boon for UI designers

One of the most difficult thing I experienced during android development was the proper use of layouts. When we created a game or a complex UI, it was very difficult for me to arrange the UI properly. My introduction with Relative layout made it very easier to create complex layouts.
Now I believe that with the help of Relative layout I should be able to make any complex UI.

Understanding the layouts is an important part of application design.

Here in this tutorial i will explain the following in detail:

What is Relative Layout?

Simple sample program to show the Relative layout.

Helpful Relative Layout attributes and properties

Solving a Complex Sample problem with Relative Layout.

Tips for RelativeLayout

What is Relative Layout?

Relative layout is the layout which organizes controls relative to another. This layout can also place controls with respect to its parent control. There are options to place controls on top, bottom, right or left of another control. These can be defined in the android layout xml or can be coded programmatically.

Simple Sample Program to Show the Relative Layout

Lets look at a simple example to understand Relative layout and its power.

The above example has the following controls:

Button to Increment the value of the edit text by 1. This is aligned to the left corner.

Edit text which displays the number. This is placed in the center of the screen.

Button to decrement the value of the edit text by 1. This is aligned to the right corner.

Lets slice and dice each controls to understand the relative layout attributes used to control the positioning of each of these controls. Please note that all controls are added as child control under the Relative layout. Here the layout orientation is set as horizontal.

Button to Increment the value of the edit text by 1. This is aligned to the left corner.

To place the button on the right corner,the attribute android:layout_alignParentRight is set to true.

Here is the Java code which implements the Increment and Decrement functionality.

package com.dn.test;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.view.View.OnClickListener;

publicclass RelativeLayoutTestActivity extends Activity {

/** Called when the activity is first created. */

@Override

publicvoid onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

setActions();

}

privatevoid setActions()

{

Button addBtn = (Button)findViewById(R.id.add);

Button subBtn = (Button) findViewById(R.id.sub);

addBtn.setOnClickListener(new OnClickListener() {

@Override

publicvoid onClick(View v) {

EditText display = (EditText) findViewById(R.id.display);

String currentValueStr = display.getText().toString();

int currentValue = Integer.parseInt(currentValueStr);

currentValue = currentValue + 1;

display.setText(currentValue + "");

}

});

subBtn.setOnClickListener(new OnClickListener() {

@Override

publicvoid onClick(View v) {

EditText display = (EditText) findViewById(R.id.display);

String currentValueStr = display.getText().toString();

int currentValue = Integer.parseInt(currentValueStr);

currentValue = currentValue - 1;

display.setText(currentValue + "");

}

});

}

}

Helpful Relative Layout attributes and properties

Here I will introduce the attributes of relative layout which I widely use in my programs. These properties or attributes are the key for positioning the child controls. Once we get a good rapport on these properties, any Complex UI becomes easy for you.

android:layout_alignParentLeft

This will align the child controls left edge with it's RelativeLayout parent's left edge.

android:layout_alignParentRight

This will align the child controls right edge with it's RelativeLayout parent's right edge.

android:layout_alignParentTop

This will align the child controls top edge with it's RelativeLayout parent's top edge.

This will center the child horizontally with respect to the bounds of its RelativeLayout parent.

android:layout_centerVertical

This will center the child vertically with respect to the bounds of its RelativeLayout parent.

android:layout_centerInParent

This will center the child with respect to the bounds of its RelativeLayout parent.

android:layout_toLeftOf

This will align a child's right edge with another child's left edge.

android:layout_toRightOf

This will align a child's left edge with another child's right edge.

android:layout_above

This will align a child's bottom edge with another child's top edge.

android:layout_below

This will align a child's top edge with another child's bottom edge.

Solving a Complex Sample problem with Relative Layout

I just went through a simple sample above which will give a basic idea of what a RelativeLayout is. Here I will create a complex layout arrangement which I will solve with the help of RelativeLayout and its attributes. This will use the properties or attributes discussed above. Below is the UI arrangement we are going to attack.

Lets look at the layout xml for the above example.

<?xmlversion="1.0"encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_height="fill_parent"

android:layout_width="fill_parent">

<TextView

android:text="ONE"

android:id="@+id/TextView01"

android:layout_height="wrap_content"

android:background="#f00"

android:gravity="center"

android:textColor="#000"

android:layout_width="wrap_content"

android:padding="20dp"></TextView>

<TextView

android:text="TWO"

android:layout_height="wrap_content"

android:background="#f00"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView02"

android:layout_width="wrap_content"

android:layout_centerHorizontal="true"

android:padding="20dp"></TextView>

<TextView

android:text="THREE"

android:layout_height="wrap_content"

android:background="#f00"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView03"

android:layout_width="wrap_content"

android:layout_alignParentRight="true"

android:padding="20dp"></TextView>

<TextView

android:text="FOUR"

android:layout_height="wrap_content"

android:background="#0f0"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView04"

android:layout_width="wrap_content"

android:layout_toLeftOf="@+id/TextView05"

android:padding="20dp"

android:layout_centerVertical="true"></TextView>

<TextView

android:text="FIVE"

android:layout_height="wrap_content"

android:background="#0f0"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView05"

android:layout_width="wrap_content"

android:layout_centerInParent="true"

android:layout_margin="10dp"

android:padding="20dp"></TextView>

<TextView

android:text="SIX"

android:layout_height="wrap_content"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView06"

android:layout_width="wrap_content"

android:layout_toRightOf="@+id/TextView05"

android:background="#0f0"

android:padding="20dp"

android:layout_centerVertical="true"></TextView>

<TextView

android:text="SEVEN"

android:layout_height="wrap_content"

android:background="#00f"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView07"

android:layout_above="@+id/TextView08"

android:layout_centerHorizontal="true"

android:layout_width="wrap_content"

android:padding="20dp"></TextView>

<TextView

android:text="EIGHT"

android:layout_height="wrap_content"

android:background="#0fF"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView08"

android:layout_alignParentBottom="true"

android:layout_width="fill_parent"

android:padding="20dp"></TextView>

</RelativeLayout>

Lets slice and dice each of the control here.

1)ONE- This is placed on the left corner like the one we had in the previous sample.

<TextView

android:text="ONE"

android:id="@+id/TextView01"

android:layout_height="wrap_content"

android:background="#f00"

android:gravity="center"

android:textColor="#000"

android:layout_width="wrap_content"

android:padding="20dp"></TextView>

As the default position of each controls placed is on the top left corner of the relative layout, we dont need to do any special positioning for this.

2)TWO - This is placed on the top center(Horizontal).

<TextView

android:text="TWO"

android:layout_height="wrap_content"

android:background="#f00"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView02"

android:layout_width="wrap_content"

android:layout_centerHorizontal="true"

android:padding="20dp"></TextView>

Here android:layout_centerHorizontal is set to true to place the control on the horizontal center.

3)THREE - This control is placed to the right top corner of the Relative layout.

<TextView

android:text="THREE"

android:layout_height="wrap_content"

android:background="#f00"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView03"

android:layout_width="wrap_content"

android:layout_alignParentRight="true"

android:padding="20dp"></TextView>

Here android:layout_alignParentRight is set to true to place the control on right corner. Here we have aligned the controls right edge with the RelativeLayout's right edge.

4) FOUR - This control is placed in the vertical center of the whole relative layout but to the left of the Control FIVE.

<TextView

android:text="FOUR"

android:layout_height="wrap_content"

android:background="#0f0"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView04"

android:layout_width="wrap_content"

android:layout_toLeftOf="@+id/TextView05"

android:padding="20dp"

android:layout_centerVertical="true"></TextView>

Here to place the control on the center of the parent vertically we need to set android:layout_centerVertical

to true. To place the control on the left side of Control FIVE, we need to set android:layout_toLeftOf="@+id/TextView05". Here the ID of control FIVE is the anchor ID.

5) FIVE - This control is placed in the center of the whole relative layout.

<TextView

android:text="FIVE"

android:layout_height="wrap_content"

android:background="#0f0"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView05"

android:layout_width="wrap_content"

android:layout_centerInParent="true"

android:layout_margin="10dp"

android:padding="20dp"></TextView>

6) SIX - This control is placed on the vertical center right on Control Five.

<TextView

android:text="SIX"

android:layout_height="wrap_content"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView06"

android:layout_width="wrap_content"

android:layout_toRightOf="@+id/TextView05"

android:background="#0f0"

android:padding="20dp"

android:layout_centerVertical="true"></TextView>

Here to place the control on the center of the parent vertically we need to set android:layout_centerVertical

to true. To place the control on the right side of Control FIVE, we need to set android:layout_toRightOf="@+id/TextView05". Here the ID of control FIVE is the anchor ID.

7) SEVEN - This control is placed above the Control EIGHT and aligned to the horizontal center.

<TextView

android:text="SEVEN"

android:layout_height="wrap_content"

android:background="#00f"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView07"

android:layout_above="@+id/TextView08"

android:layout_centerHorizontal="true"

android:layout_width="wrap_content"

android:padding="20dp"></TextView>

Here to place the control on the center of the parent horizontally we need to set android:layout_centerHorizontal to true. To place the control on the top of Control EIGHT, we need to set android:layout_above="@+id/TextView08". Here the ID of control EIGHT is the anchor ID.

8) EIGHT - This control is placed on the bottom on the parent. This means controls bottom edge will align with the RelativeLayout's bottom edge.

<TextView

android:text="EIGHT"

android:layout_height="wrap_content"

android:background="#0fF"

android:gravity="center"

android:textColor="#000"

android:id="@+id/TextView08"

android:layout_alignParentBottom="true"

android:layout_width="fill_parent"

android:padding="20dp"></TextView>

Here android:layout_alignParentBottom is set to true to align the child controls bottom edge to the parent RelativeLayout's bottom edge.

Tips for RelativeLayout

1) Avoid Circular Rules. Circular rules happens when two controls have set of rules which point to one another.

2) Use RelativeLayout instead on nested LinearLayouts to improve performance on the application.