Android RelativeLayout example

What is Android layout?

Layout denotes the architecture of the application, where and how the controls should be organized in the UI.It defines the layout structure and holds all the elements that appear to the user.

Android allows us to create layouts for the applications using simple XML file and those layouts must be placed in /res/layout folder.

We can declare the layout in two ways and here we will discuss first way of doing it:

  1. Declare UI elements in XML
  2. Create UI elements at runtime using Java.

Layout Video Tutorial

Take a look at the video which walk you through the different types of Layouts supported in Android.

Different kinds of layouts in Android are:



Relative layout

In a relative layout, as the name suggests, all the controls are arranged relative to each other or to the parent elements.

Why Relative layout?

RelativeLayout – designed to display child View controls in relation to each other. For instance, you can set a control to be positioned “above” or “below” or “to the left of” or “to the right of” another control, referred to by its unique identifier.

[pgsubscribe]

You can also align child View controls relative to the parent edges. So if you are planning to create a stunning UI, go for Relative layout.

Before we start with developing application, download code from here to follow with the below listings.

Layout architecture:

The application that we are developing has a simple screen with few controls arranged relative to each other:

Quick Links

Project Structure

Create layout XML

  • Create new android project [File >> New >> Android Project] with project name RelativeLayoutExample
  • Click next and select target android device version [I chose version 2.2]
  • Click next and enter package name
  • Click finish

Code Listings

By default main.xml will be created (can be found under /res/layout folder) when you create new project and the same is set as layout for the application using setContentView(R.layout.main) method. Check the onCreate method in RelativeLayoutExampleActivity class to know about how the layout xml is set:

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);        
setContentView(R.layout.main);
}

Open main.xml, now you can view the layout as either XML or in graphical layout and just replace the XML with below one:

<?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">

<TextView android:id="@+id/label" android:layout_width="fill_parent"
   android:layout_height="wrap_content" android:text="Enter email address" />

<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"
   android:layout_centerHorizontal="true"/>
</RelativeLayout>

How the controls are arranged on the screen?:

Click the below image and take a look at the way the controls are arranged for the XML we added above:

  • TextView(Enter email address) and EditView(Email) controls are placed with no relative properties
  • Button(Login) is placed such a way that it is aligned left to the parent window and also below the ‘Email’ input box.
  • Button(Cancel) is placed top of the parent and just right to the ‘Login’ button
  • Button(Register) is placed bottom of the parent and also horizontally centered.

[pglinkadssmall1]

Demo

Let us test the application:
Run click on the project >> Run as >> Android application
You could see following screen:


Download Source Code

Entire project is zipped and is available for download. Unzip the downloaded project and to import the project into eclipse, launch eclipse >> File >> Import.. >> Choose downloaded project(How to import android project in eclipse). If you just want to run the application in your mobile and see the output but don’t want to hit your head with source code, download application(apk) file and install it in your mobile device.

Download Source Code Download Application(apk)

*apk in Android is the installation file simliar to exe in windows.

[pglinkadssmall]

I hope you enjoyed the post!! :)

Suggested posts for further reading


[pgfeedback]
[pgwriteforus]

Related Articles

Author: Android Guru

Share This Post On
468 ad
  • Ravi

    Good one.. :) Keep posting awesome posts..

  • Cesco

    Another great post by the Android Guru! Keep them coming, they are very instructive.

  • Wilson

    Awesome! Thanks!

  • rajesh

    how to develop a login page compatable with both mobile and tablet…please help me

  • David Kemptner

    Thanks for that example. Sadly I cannot get my RelativeLayout working on a real device. Can anybody give me a hint what I do wrong? See my question here: http://stackoverflow.com/questions/22306452/relativelayout-displays-incorrect-on-real-device

Join now to get more access to our Android Tutorials

Join now to get more access to our Android Tutorials

Once you Join, you will receive Mail containing latest Android Tutorials once a month !!

I promise I wont spam you !!

You have Successfully Subscribed!

Pin It on Pinterest

Shares