Relative Layout

Relative Layout is a view layout which arranges views/widgets according to the position of other views/widgets which can be the new views placed relative to the already existing views.
Relative Layout is also the very most commonly used layout in Graphical User Interface (GUI) designing and to know how a Relative Layout works, let’s see and understand the most common attributes of Relative Layout.

Common Attributes of RelativeLayout

Center relative to Parent View

When you want to place your Views in the center relative to the parent, we can use the following 3 attributes:
Relative Layout with height and width set as match_parent and therefore it will cover the whole screen of mobile that’s why the complete screen is our parent view.

android:layout_centerHorizontal=”true”
This places the view horizontally in the center of the parent and as our parent view covers the whole screen of mobile so the view gets placed in the middle of the mobile screen horizontally.
android:layout_centerVertical=”true”
This places the view vertically in the center of the parent and the parent view covers the whole screen and The mobile view gets placed in the middle of the mobile screen vertically.
android:layout_centerInParent=”true”
This attribute will place the view in the center of the parent and the parent in our example covers the whole screen of mobile so the view gets placed in the middle of the mobile screen and both horizontally and vertically.

Align by the parent view

These types of attributes can be the view act like a chewing gum as it can be fixed to any side of the parent view using these attributes.

Again, for example as we can be considering our parent view to be a RelativeLayout with height and width set as match_parent so therefore it will cover the whole screen of mobile and the complete screen is our parent view.

android:layout_alignParentTop=”true”
If you write this attribute for a View and then that view will stick to the top of its parent also the parent covers the whole screen of mobile therefore then the view will appear sticking to the top-left of the mobile screen.
android:layout_alignParentBottom=”true”
If you write this attribute for a View and then that view will stick to the bottom of its parent also our parent covers the whole screen of mobile which can be the view will appear sticking to the bottom of the mobile screen.
android:layout_alignParentLeft=”true”
If we write this attribute for a View so that view will stick to the left of its parent and the parent in our example covers the whole screen of mobile then the view will appear sticking to the left of the mobile screen.
android:layout_alignParentRight=”true”
If we are writing this attribute for a View and that view will stick to the right of its parent.

Note: we can always use more than one attributes and you use android:layout_alignParentLeft=”true” and android:layout_alignParentBottom=”true”, then the view will stick to the bottom-left corner of the screen and as it shows in the pink color view in the above figure.

Place a new View relative to existing sibling View.

In a RelativeLayout we can keep the new views relative to other existing views. Following attributes can be used to do so.

Let’s see there is only one view in the center and its id is given as android:id=”@+id/main” then the other new views can be placed relative to this view as following:

android:layout_toLeftOf=”@id/main”
It tells the new view that we have to be on the left side of the view whose id is main.
android:layout_toRightOf=”@id/main”
It tells the new view that we have to be on the right side of the view whose id is main.
android:layout_above=”@id/main”
It tells the new view that we have to be above the view whose id is main.

android:layout_below=”@id/main”

It tells the new view that we have to be below the view whose id is main.

Align a new View relative to existing sibling View

If we change align the new view relative to any existing view and them we can use the following attributes.

android:layout_alignTop=”@id/a”
It aligns the top margin of the view with the top margin of the view having id as a.
android:layout_alignBottom=”@id/a”
It aligns the bottom margin of the new view with the bottom margin of the view having id as a.
android:layout_alignLeft=”@id/a”

It aligns the left margin of the view with the left margin of the view having id as a.

android:layout_alignRight=”@id/a”
It aligns the right margin of the view with the right margin of the view having id as a.
android:layout_alignBaseLine=”@id/a”
It aligns the text1 of the view with the text2 of the view having id as a.

Defining RelativeLayout in layout XML

Now let’s understand the following code:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFEB3B">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textStyle="bold"
        android:textAllCaps="true"
        android:textSize="17sp"
        android:text="Two Button will use me as a reference" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Aligned to the\nsecond button"
        android:layout_below="@+id/textView"
        android:layout_alignLeft="@+id/textView"
        android:layout_margin="5dp"
        android:layout_alignStart="@+id/textView" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Aligned to the\nfirst button"
        android:layout_toRightOf="@id/button"
        android:layout_alignTop="@id/button"
        android:layout_below="@+id/textView"
        android:layout_marginRight="21dp"
        android:layout_marginEnd="21dp" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"
        android:layout_below="@+id/button"
        android:layout_marginTop="70dp"
        android:textStyle="bold|italic"
        android:textSize="20sp"
        android:textColor="#25c"
        android:text="I want to align by base\nline with you" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView5"
        android:layout_alignTop="@+id/textView5"
        android:layout_margin="10dp"
        android:textSize="20sp"
        android:textStyle="bold|italic"
        android:textColor="#25c"
        android:layout_marginTop="70dp"
        android:layout_alignBaseline="@id/textView5"
        android:text="Okay,let me use the attribute" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentLeft="true"
        android:textAllCaps="true"
        android:textStyle="bold"
        android:textSize="20sp"
        android:textColor="#D50000"
        android:text="I have used 3 chewing gum like attributes and now I am stuck at the bottom"/>
</RelativeLayout>

Learn Android

Relative Layout