Relative Layout in Android

Relative Layout is a layout which arranges views/widgets/viewGroup according to the position of other views/widgets/viewGroups i.e the new views are placed relative to the already existing views.

For example in a class, if a Student A is sitting on a chair and the teacher of the class asks Student B to sit to the right of the Student A. Student B will know where he/she has to sit.

Similarly, the position of each view can be specified relative to its sibling elements (such as to the left-of or below another view) or in terms of position relative to the parent.

RelativeLayout is the most commonly used layout in GUI designing. To know how a RelativeLayout works, lets see and understand the most common attributes of RelativeLayout.

Common Attributes of RelativeLayout

Center relative to Parent View

When you want to place your Views in the center relative to the parent, you can use the following 3 attributes:

Before we learn about the different attributes, we want to specify that the parent in our example is also a Relative Layout with height and width set as match_parent, therefore it will cover the whole screen of mobile. So the complete screen is our parent view.

1. android:layout_centerHorizontal="true"

   This places the view horizontally in the center of the parent. As our parent view covers the whole screen of mobile therefore the view gets placed in the middle of the mobile screen horizontally. (See the yellow view in the above figure)

2. android:layout_centerVertical="true"

   This places the view vertically in the center of the parent. Since the parent view covers the whole screen of mobile hence the view gets placed in the middle of the mobile screen vertically. (See the blue view in the above figure)

3. android:layout_centerInParent="true"

   This attribute will place the view in the center of the parent. Since the parent in our example covers the whole screen of mobile, so the view gets placed in the middle of the mobile screen, both horizontally and vertically. (See the cream color view in the above figure)

Align by the parent view

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

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

1. android:layout_alignParentTop="true"

   If you write this attribute for a View, then that view will stick to the top of its parent. Since the parent covers the whole screen of mobile therefore, the view will appear sticking to the top-left of the mobile screen.

2. android:layout_alignParentBottom="true"

   If you write this attribute for a View, then that view will stick to the bottom of its parent. Since the our parent covers the whole screen of mobile therefore, the view will appear sticking to the bottom of the mobile screen.

3. android:layout_alignParentLeft="true"

   If you write this attribute for a View, then that view will stick to the left of its parent. Since the parent in our example covers the whole screen of mobile therefore, the view will appear sticking to the left of the mobile screen.

4. android:layout_alignParentRight="true"

   If you write this attribute for a View, then that view will stick to the right of its parent.

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

Place new View relative to existing sibling View

In a RelativeLayout you can keep(position) the new views relative to other existing views. Following attributes can be used for doing so.

Suppose there is one view in the center and its id is given as android:id="@+id/main" Therefore, the other new views can be placed relative to this view as following:

1. android:layout_toLeftOf="@id/main"

   This tells the new view that you have to be on the left side of the view whose id is main.

2. android:layout_toRightOf="@id/main"

   This tells the new view that you have to be on the right side of the view whose id is main.

3. android:layout_above="@id/main"

   This tells the new view that you have to be above the view whose id is main.

4. android:layout_below="@id/main"

   This tells the new view that you have to be below the view whose id is main.

Note: When you assign an id to the View, you write android:id="@+id/main" i.e you write a + sign after the @ symbol, indicating you are assigning an id to that view. But when you use that id for other purpose, like above, you are adding a new view relative to an existing view having the specfied value of id, hence we do not have to mention the + sign. We simply refer it as android:layout_below="@id/main" i.e without the + sign.

Align new View relative to existing sibling View

If you want to align the new view relative to any existing view, then you can use the following attributes.

1. android:layout_alignTop="@id/a"

   This aligns the top margin of the new view with the top margin of the view having id as a.

2. android:layout_alignBottom="@id/a"

   This aligns the bottom margin of the new view with the bottom margin of the view having id as a.

3. android:layout_alignLeft="@id/a"

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

4. android:layout_alignRight="@id/a"

   This aligns the right margin of the new view with the right margin of the view having id as a.

5. android:layout_alignBaseLine="@id/a"

   This aligns the text1 of the new view with the text2 of the view having id as a.

Defining RelativeLayout in layout XML

Now lets 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"
    tools:context="com.example.android.studytonightandroid.MainActivity">

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

Output Screen:

In the above code:

1. We have placed one view with the id textView at the top of the screen using android:layout_alignParentTop="true" attribute.
2. The 2 buttons are placed below the TextView having id textView. This is done by using the android:layout_below="@+id/textView" attribute in both the Button tags.
3. We have aligned both the buttons from the top margin (of each other), using android:layout_alignTop="@id/button" attribute.
4. We also tried to align the two TextViews based on their text i.e aligning the texts of both the views.
5. Last but not the least, we have used the sticky attributes, android:layout_alignParentBottom="true", android:layout_alignParentRight="true" and android:layout_alignParentLeft="true" to stick the textView4 at the bottom of the screen. Just like chewing gum being stretchable, the TextView in this example also stretches so that its boundary gets stretched and sticks to the left, right and the bottom the screen.