In this tutorial I will give you an examples of how relative layout works. Android RelativeLayout arrange the elements based on their relationships with one another, and with the parent container.

Relative Layout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left, right, above or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the top, bottom, left, right or center).

Relative Layout arranges the components on your screen in positions relative to each other. Relative layout is most flexible and powerful layout for designing a user interface because it can eliminate nested view groups and keep our layout hierarchy flat, which improves the performance of application. In case if we didn’t specify the position of child views, by default all child views are positioned to top-left of the layout.

Attributes associated with the parent

Alignment With Other Elements

A view can be placed not only relative to the parent, but also relative to other view components.

Relative Layout Example

1. Create a new project

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from templates to implement Relative Layout in android using android studio and name it Relative Layout.

2. Designing Layout

Now open res -> layout -> activity_main.xml  file and just implement the following xml code .

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:layout_marginVertical="10dp"
        android:layout_marginHorizontal="10dp"
        android:textStyle="bold"
        android:textColor="@android:color/holo_orange_dark"
        android:text="Button 1"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="220dp"
        android:layout_margin="10dp"
        android:text="Button 2"
        android:textStyle="bold"
        android:textColor="@android:color/holo_green_dark"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/btn3"
        android:layout_below="@id/btn1" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="190dp"
        android:layout_height="220dp"
        android:text="Button 3"
        android:layout_margin="10dp"
        android:textStyle="bold"
        android:textColor="@android:color/holo_purple"
        android:layout_alignParentEnd="true"
        android:layout_below="@id/btn1"/>


    <Button
        android:id="@+id/submit"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:textStyle="bold"
        android:textColor="@android:color/holo_red_dark"
        android:layout_alignParentBottom="true"
        android:layout_marginHorizontal="10dp"
        android:layout_marginVertical="10dp"
        android:text="Submit" />


</RelativeLayout>

3. MainActivity.java

package net.technxt.relativelayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

4. AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.technxt.relativelayout">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Now run the project/app to test the Relative Layout in android app through android device or any Emulator .

Thank you 🙂