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 AttributesDescription
layout_alignParentTopAccepts boolean value. If specified, the widget will be docked to the top of RelativeLayout.
layout_alignParentBottomAccepts boolean value. If specified, the widget will be docked to the bottom of RelativeLayout.
layout_alignParentLeftAccepts boolean value. If specified, the widget will be docked to the left edge of RelativeLayout.
layout_alignParentRightAccepts boolean value. If specified, the widget will be docked to the right edge of RelativeLayout.
layout_centerInParentAccepts boolean value. If specified, the widget will be aligned to center of RelativeLayout.
layout_centerHorizontalAccepts boolean value. If specified, the widget will be horizontally center aligned
layout_centerVerticalAccepts boolean value. If specified, the widget will be vertically center aligned
layout_belowAccepts sibling widget id. Places the widget below the view as specified widget id.
layout_aboveAccepts sibling widget id. Places the widget above the specified widget id.
layout_toRightOfAccepts sibling widget id. Places the widget to right of the view as specified widget id.
layout_toLeftOfAccepts sibling widget id. Places the widget to left of the view as specified widget id.
layout_toEndOfAccepts sibling widget id. Places the widget to end of the view as specified widget id.
layout_toStartOfAccepts 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.

Related Articles

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.