Relative Layout Tutorial

       In RelativeLayout all views are positioned relatively to each other. This means that you can create an EditText element and then create a button and say that you want this button to be positioned to left of the EditText. View can be positioned relatively to its sibling elements or to its parent layout. 

        Many say that RelativeLayout is the hardest to master, but I honesty don't think so at all. RelativeLayout is very flexible and I am sure that if you spend some time just playing around with it, you'll find it very easy to use as well ;)

RelativeLayout Example

       Here is a RelativeLayout example, that will help you understand the idea of it better: 

acitivity_main.xml file:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="top" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <EditText android:id="@+id/editext1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="7" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="Button 1" android:textColor="#A4C739" android:textStyle="bold"/> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/editext1" android:text="Button 2" android:textColor="#b500b5" android:textStyle="bold"/> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentBottom="true" android:text="Button 3" android:textColor="#F6A458" android:textStyle="bold" /> <ImageView android:src="@drawable/android_small" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"/> </RelativeLayout>

view rawactivity_main.xml hosted with ❤ by GitHub

DEMO

Android RelativeLayout

Explanation:

Button 1 position: android:layout_alignParentBottom="true"

If true, this attribute makes the bottom edge of the element match the bottom edge of the parent.

Button 2 position: android:layout_toRightOf="@id/editext1"

Positions the left edge of this view to the right of the given anchor view ID (in our case to the right of edittext1 element). 

Button 3 position: 
1. android:layout_alignParentEnd="true"       
   
If true, makes the end edge of this view match the end edge of the parent.       

2. android:layout_alignParentBottom="true"

If true, this attribute makes the bottom edge of the element match the bottom edge of the parent.

Here we are using two attributes to first position our button on the bottom of the parent view and then move it to the end of it.

ImageView position: android:layout_centerInParent="true"

If true, centers this child horizontally and vertically within its parent. 

Full list of all possible attributes can be found right here:

http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html

Source Code

References:
http://developer.android.com/guide/topics/ui/layout/relative.html
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html