Relative Layout in Android

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, 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 layout. 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

To execute the below code we need to install Android studio. After installing follow the below steps.

1. Create a new project
2. Select the language as java
3. select the API level of 26(android OREO 8.0)
4. Click on the ok button. Wait until UI displays.
5. Then clean the project. Because gradle may not build.
6. After that, we can see two code files. One is activity_main.xml and MainActivity.java.
7. Go to the activity_main.xml file.
8. In that, we can see two modes. One is design mode and another one is code mode. Then go to code mode.
9. And Use the below code.
10. We do not need to change the default java code. Because we are not performing any onClick activities.

Let us see an XML code that shows the usage of the above-mentioned properties.

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 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 4: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. There is nothing to write inside the MainActivity.java 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);
    }
}

Output:

Code Explanation

• 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.