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.
Here is the layout xml which defines the above screen.
<?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="fill_parent"
android:orientation="horizontal" >
<Button android:text="@string/add" android:id="@+id/add" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentLeft="true"/>
<EditText android:text="0" android:hint="0" android:id="@+id/display" android:layout_width="wrap_content"
android:editable="false" android:cursorVisible="false"
android:layout_height="wrap_content" android:layout_centerHorizontal="true"/>
<Button android:text="@string/minus" android:id="@+id/sub" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentRight="true"/>
</RelativeLayout>
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.
<Button android:text="@string/add" android:id="@+id/add" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentLeft="true"/>
To place the button on the left corner, the attribute android:layout_alignParentLeft is set to true.
2) Edit text which displays the number. This is placed in the center of the screen.
<EditText android:text="0" android:hint="0" android:id="@+id/display" android:layout_width="wrap_content"
android:editable="false" android:cursorVisible="false"
android:layout_height="wrap_content" android:layout_centerHorizontal="true"/>
The edit text has to be placed in the center of the layout horizontally.
The attribute android:layout_centerHorizontal is set to true to acheieve it.
3) Button to decrement the value of the edit text by 1. This is aligned to the right corner.
<Button android:text="@string/minus" android:id="@+id/sub" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentRight="true"/>
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;
public class RelativeLayoutTestActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
setActions();
}
private void setActions()
{
Button addBtn = (Button)findViewById(R.id.add);
Button subBtn = (Button) findViewById(R.id.sub);
addBtn.setOnClickListener(new OnClickListener() {
@Override
public void 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
public void 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.
android:layout_alignParentBottom
This will align the child controls bottom edge with it's RelativeLayout parent's bottom edge.
android:layout_centerHorizontal
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.
<?xml version="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.
Sample Projects
1) Simple Relative Layout Sample Project.
2) Complex Relative Layout Sample Project.