Overview

RelativeLayout in Android – it enhances us to build a responsive UI design. In another word, it lets child views specify their position relative to the parent view or to each other (specified by ID). It gives us much more flexibility in term of UI designing. And that’s why this layout is the most used layout after the LinearLayout in Android.

Relative Layout in Android


Attributes of Relative Layout in Android

RelativeLayout gives us many attributes. Using which we can create a much better responsive design. They are shown below through the table,

Attribute NameValueDescription
android:layout_centerHorizontaltrue/falseIf set to true. It centres the child horizontally within its parent.
android:layout_centerVerticaltrue/falseIf true. It centres the child vertically within its parent.
android:layout_centerInParenttrue/false Used to aligns to the centre of the parent layout (RelativeLayout). If set to true.
android:layout_alignParentLeft
android:layout_alignParentStart
true/false Aligns the child to the left side of the parent layout. If set to true.
android:layout_alignParentRight
android:layout_alignParentEnd
true/false Aligns the child to the right side of the parent layout. If set to true.
android:layout_alignParentToptrue/false In order to stick to the top of the parent. If set to true.
android:layout_alignParentBottomtrue/false Align to the bottom of the parent layout. If set to true.
android:layout_alignWithParentIfMissingtrue/falseThe parent will be used as the anchor when the anchor cannot be found for layout_toLeftOf, layout_toRightOf, layout_toEndOf, etc. If set to true.
android:layout_alignStart
android:layout_alignLeft
@+id/view_idMakes the left/start edge of this view match the left/start edge of the given anchor view ID.
android:layout_alignEnd
android:layout_alignRight
@+id/view_idMakes the right/end edge of this view match the right/end edge of the given anchor view ID.
android:layout_above@+id/view_idMakes the bottom edge of this view match the top edge of the given anchor view ID.
android:layout_below@+id/view_idMakes the top edge of this view match the bottom edge of the given anchor view ID.
android:layout_alignTop@+id/view_idMakes the top edge of this view match the top edge of the given anchor view ID.
android:layout_alignBottom@+id/view_idMakes the bottom edge of this view match the bottom edge of the given anchor view ID.
RelativeLayout’s Attributes Table

Syntex:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    //Add any views. Such as Button, ImaageView, TextView, etc.

</RelativeLayout>

Let’s play with some attributes of the Relative Layout

Now we will combine some attributes and use them in the child elements from the above table.

Example 01:

In this example, we have an ImageView inside a RelativeLayout (parent layout). You can see a Red Box (ImageView) has been positioned to the centre of its parent. Where the parent layout’s width and height are match_parent and the child view’s width and height both are 80dp. Now in RelativeLayout to make something to the centre, we can use two attributes android:layout_centerHorizontal and android:layout_centerVertical with true value.

Relative Layout in Android
The white area is the RelativeLayout and Red area is an ImageView
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/red_img"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/bg_red_image"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>

</RelativeLayout>

Unlike android:layout_centerHorizontal and android:layout_centerVertical, android:layout_centerInParent will produce the same result. If it is true. So just give it a try.


Example 02:

Now we will see how to align the child view to the bottom-right corner. That’s the reason, we are using two attributes android:layout_alignParentBottom and android:layout_alignParentRight or android:layout_alignParentEnd. Let’s have a look.

Relative Layout in Android
Align the child view to the bottom-right corner
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/red_img"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/bg_red_image"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

Example 03:

Now let’s align a child element to the vertical centre with an anchor of the parent’s right edge. Fo that, just use android:layout_centerVertical and android:layout_alignParentRight with true value.

Relative Layout in Android
Align a child element to the vertical centre with an anchor of the parent’s right edge
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/red_img"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/bg_red_image"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

Example 04:

In this example, you can see the yellow box is aligned relatively by mentioning the red box ID. And these boxes are the simple ImageView. We have used android:layout_alignBottom, android:layout_alignTop and android:layout_alignRight. Also, we passed the id of the red box.

Relative Layout in Android
Section A:
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/red_img"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:src="@drawable/bg_red_image"
        android:layout_centerInParent="true"/>

    <ImageView
        android:id="@+id/yellow_img"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/bg_yellow_image"
        android:layout_alignBottom="@+id/red_img"/>
    
</RelativeLayout>

Section B:
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/red_img"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:src="@drawable/bg_red_image"
        android:layout_centerInParent="true"/>

    <ImageView
        android:id="@+id/yellow_img"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/bg_yellow_image"
        android:layout_alignTop="@+id/red_img"/>
    
</RelativeLayout>

Section C:
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/red_img"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:src="@drawable/bg_red_image"
        android:layout_centerInParent="true"/>

    <ImageView
        android:id="@+id/yellow_img"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/bg_yellow_image"
        android:layout_alignRight="@+id/red_img"/>
    
</RelativeLayout>

Drawbacks:

* As I told you that the RelativeLayout is the second most popular layout in term of its flexibility which is a great thing. But the way it works is “it measures each child twice“. It means while processing the UI during runtime which would take more time to visible on the screen. If you have a complex view hierarchy this would take up a lot of time just measuring. As far as I can tell Yes! this is a great drawback of the RelativeLayout. And of course, try not to use nested RelativeLayout!


Anyway if you liked this article then please Subscribe to our Youtube channel for keeping this talk continue. You can also find us on Facebook and Instagram. Thanks for your support.

Translate »