RelativeLayout in Android – Overview and Implementation

RelativeLayout in Android – Overview and Implementation

RelativeLayout is a frequently used layout in Android. Just like LinearLayout, we will be able to align the child elements but this time, it can be relative to each other. The Views & ViewGroups here talks about how the Viewgroup is responsible for holding the views.

Elements arrangement in Relative Layout:

"<yoastmark

We will see about how to implement the Relative Layout in Android.

RelativeLayout – Overview

"<yoastmark

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</RelativeLayout>

By default, the two properties that has to be set are android:layout_height & android:layout_width.

These properties are default for any view or viewgroup.

RelativeLayout -Frequently used Properties

Relative layout is primarily used when you need to structure elements without any regard to horizontal or vertical stacking (One below the other). You can position the child views with respect to the parent or with respect to each other (Using ID’s).

General Properties include:

android:gravity – To set the gravity of the elements inside the RelativeLayout

android:ignoreGravity – Tells that the elements under RelativeLayout will not be affected by gravity.

android:id – General property to set Id for the RelativeLayout

android:margin/android:padding – You can move the entire layout but not the elements inside with this property.

The properties used by the elements under RelativeLayout are:

android:layout_alignParentTop – Boolean Value, when set to “True”

android:layout_centerVertical – This is also a boolean property, when set will center align the child views vertically with its parents.

android:layout_below – This will set the view with respect to another View (Takes the ID of another view as its value). Sets the view below another view.

android:layout_toRightOf – This will set the view to the RightOf another View (Takes the ID as its value)

RelativeLayout – Implementation

The relative layout is a bit tricky to implement because, you will have to carefully align the elements relative to each other. See this implementation below

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="First View"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Second View"/>
</RelativeLayout>

This will result in an overlap of textviews.

"<yoastmark

The reason is, we have not positioned the child views relatively.We will set the properties and see the result.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">


<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="First View"
    android:layout_centerVertical="true"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Second View"
    />
</RelativeLayout>

Notice, that i have set the First Textview to center_vertical. The result is

Textview center vertically aligned
Textview center vertically aligned

Notice how FirstView is Center – Vertically aligned and Second TextView is still aligned at the top.

You can align the elements based on the respective id’s like below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">


<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="First View"
    android:id="@+id/first"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Second View"
    android:layout_below="@id/first"
    />
</RelativeLayout>

See how the elements are stacked now.

Relative layout arrangement - One below the other
Relative layout arrangement – One below the other

Similarly, we can play around with the other properties to sucessfully create a relative representation of views.

Drop in any comments regarding Relative Layout, and check my view & viewgroups to know more about the layouts available in android.

“Learn and Be Curious”

Leave a Comment