Relative Layout in Android

Android RelativeLayout in Kotlin

The Relative Layout is used to arrange the Child Views in a proper order which means arranging the child objects relative to each other. Generally, if we create an application using a linear layout that consists of 5 buttons. Even if we specify weight and gravity properties they will not be relatively arranged. To arrange them in a proper order we need to use the relative layout. To arrange them we need some advanced properties. Basically, we use layout_width, layout_height, and layout_text properties while creating an application using the linear layout. But we need some more advanced properties which are supported by relative layout.

There are so many properties that are supported by relative layouts. some of the most used properties are listed below

layout_alignParentTop
layout_alignParentBottom
layout_alignParentRight
layout_alignParentLeft
layout_centerHorozontal
layout_centerVertical
layout_above
layout_below

Step-by-Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java/Kotlin as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Top Left Button"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Top Right Button"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"/>
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom Left Button"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"/>
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom Right Button"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"/>
    <Button
        android:id="@+id/button5"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Middle Button"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

Step 3: Working with the MainActivity.java file

Go to the MainActivity.java/ MainActivity.kt file and refer to the following code. Below is the code for the MainActivity file. There is nothing to write inside the MainActivity file.

Java

package com.example.example1;

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);
    }
}

Kotlin

package com.example.android_relative_layout_kotlin

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Output:

Explanation of the above Program:

First, we have written xml open tag which contains xml version and encoding type.
In the next line, we have written an open tag for relative layout.
Inside the relative layout, we have specified layout width, height, and orientation.
Then we have created 5 buttons which are arranged at topRight, topLeft, bottonRight, bottomLeft, bottomRight, and center respectively.
Finally, we have closed the relative layout tag.
In the java code, there are just import statements.
And in the main class, there is an onCreate() method. Which is used to create the activity.
Activity is just a user interface.

Click Here to Learn More about Android Development App

Tags:

#Android-View #Java-Android #Kotlin Android #Android