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
Attribute | Decription |
android:layout_alignParentBottom | Alignment relative to the bottom edge of the parent |
android:layout_alignParentLeft | Alignment with the left edge of the parent |
android:layout_alignParentRight | Alignment relative to the right edge of the parent |
android:layout_alignParentTop | Alignment relative to the top edge of the parent |
android:layout_centerInParent | The view will be aligned to the center of parent |
android:layout_centerHorizontal | The view will be horizontally centre aligned within its parent |
android:layout_centerVertical | The 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.
Attribute | Description |
android:layout_above | The view will be placed above the specified component |
android:layout_below | The view will be placed under the specified component |
android:layout_alignLeft | Align the view to the left of the specified view id |
android:layout_alignRight | Align the view to the right of the specified view id. |
android:layout_alignTop | Align the view to top of the specified view id. |
android:layout_alignBottom | Align the view to bottom of specified view id. |
android:layout_toLeftOf | The right edge of the component is located to the left of the specified component |
android:layout_toRightOf | The 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 🙂