Relative layout

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

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

AttributeDecription
android:layout_alignParentBottomAlignment relative to the bottom edge of the parent
android:layout_alignParentLeftAlignment with the left edge of the parent
android:layout_alignParentRightAlignment relative to the right edge of the parent
android:layout_alignParentTopAlignment relative to the top edge of the parent
android:layout_centerInParentThe view will be aligned to the center of parent
android:layout_centerHorizontalThe view will be horizontally centre aligned within its parent
android:layout_centerVerticalThe view will be vertically centre aligned within its parent

Alignment With Other Elements

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

AttributeDescription
android:layout_aboveThe view will be placed above the specified component
android:layout_belowThe view will be placed under the specified component
android:layout_alignLeftAlign the view to the left of the specified view id
android:layout_alignRightAlign the view to the right of the specified view id.
android:layout_alignTopAlign the view to top of the specified view id.
android:layout_alignBottomAlign the view to bottom of specified view id.
android:layout_toLeftOfThe right edge of the component is located to the left of the specified component
android:layout_toRightOfThe left edge of the component is located to the right of the specified component

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 🙂

%d bloggers like this: