Over the course of this tutorial, we will take a look into Android RelativeLayout and its properties.

RelativeLayout is one among the most used layout after LinearLayout. It allows its child views to position relative to each other or relative to the container or another container. For example, if we have to build a complex layout as shown in the image below, this can be achieved  with ease by using RelativeLayout.

RelativeLayout Example

Positioning Views in RelativeLayout

As discussed above, the RelativeLayout childs need to specify their position relative to the parent view or another siblings. If they don’t specify their position explicitly, by default they are positioned to the top-left corner of parent layout.

Some of the most useful RelativeLayout properties includes,

XML Attributes Description
layout_alignParentTop Accepts boolean value. If specified, the widget will be docked to the top of RelativeLayout.
layout_alignParentBottom Accepts boolean value. If specified, the widget will be docked to the bottom of RelativeLayout.
layout_alignParentLeft Accepts boolean value. If specified, the widget will be docked to the left edge of RelativeLayout.
layout_alignParentRight Accepts boolean value. If specified, the widget will be docked to the right edge of RelativeLayout.
layout_centerInParent Accepts boolean value. If specified, the widget will be aligned to center of RelativeLayout.
layout_centerHorizontal Accepts boolean value. If specified, the widget will be horizontally center aligned
layout_centerVertical Accepts boolean value. If specified, the widget will be vertically center aligned
layout_below Accepts sibling widget id. Places the widget below the view as specified widget id.
layout_above Accepts sibling widget id. Places the widget above the specified widget id.
layout_toRightOf Accepts sibling widget id. Places the widget to right of the view as specified widget id.
layout_toLeftOf Accepts sibling widget id. Places the widget to left of the view as specified widget id.
layout_toEndOf Accepts sibling widget id. Places the widget to end of the view as specified widget id.
layout_toStartOf Accepts sibling widget id. Places the widget to the beginning of the view as specified widget id.

RelativeLayout Example

Let us create an example of RelativeLayout as shown in the screenshot below. For the sake of simplicity, we have made the example relatively very simple, by adding some random Buttons to demonstrate different RelativeLayout attributes.

Android RelativeLayout Example

Source Code of the above example is below

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="Button2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="Button3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Button5" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button2"
        android:layout_centerHorizontal="true"
        android:text="Button4" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button4"
        android:layout_centerHorizontal="true"
        android:text="Button6" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button"
        android:layout_toEndOf="@+id/button"
        android:layout_toRightOf="@+id/button"
        android:text="Button7" />

</RelativeLayout>

Nilanchala

A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He is the author of Xamarin Mobile Application Development for Android Book (goo.gl/qUZ0XV3), DZone MVB and founder of stacktips.com.

Join The Discussion

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.