RelativeLayout in Android Illustrated with Attributes

RelativeLayout in Android is a view group with job to display different child views in relative positions to other different views.

RelativeLayout in Android
RelativeLayout in Android

In an android activity we have different widgets (like TextView, Button, etc) the user interacts with. These widgets are useful for user intereaction with your app. However arrangement of these widgets is determined by Layouts in android.

One such layout we’re discussing in this blog is RelativeLayout in Android.

We’ll explain this and its different attributes in example below:

Alignment of Child view with Parent View

Parent view is the view which has one or more views in it. Just like the main activity screen in android which has one or more views.

In following example you’ll learn about attributes of aligning child view with parent view.

layout_alignParentTop

RelativeLayout in Android

Aligns the child to the top of parent.

Attribute used: android:layout_alignParentTop =”true”

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AndroidDvlpr.com"
        android:layout_alignParentTop="true"/>

</RelativeLayout>

layout_alignParentBottom

RelativeLayout in Android

Aligns the child to the bottom of parent.

Attribute used: android:layout_alignParentBottom=”true”

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AndroidDvlpr.com"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

layout_alignParentLeft

RelativeLayout in Android

Aligns the child to the left of parent.

Attribute used: android:layout_alignParentLeft =”true”

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AndroidDvlpr.com"
        android:layout_alignParentLeft="true"/>

</RelativeLayout>

layout_alignParentRight

RelativeLayout in Android

Aligns the child to the right of parent.

Attribute used: android:layout_alignParentRight=”true”

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AndroidDvlpr.com"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

layout_centerInParent

RelativeLayout in Android

Aligns the child to the center of parent.

Attribute used: android:layout_centerInParent =”true”

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AndroidDvlpr.com"
        android:layout_centerInParent="true"/>

</RelativeLayout>

layout_centerVertical

RelativeLayout in Android

Aligns the child center vertically.

Attribute used: android:layout_centerVertical =”true”

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AndroidDvlpr.com"
        android:layout_centerVertical="true"/>

</RelativeLayout>

layout_centerHorizantal

RelativeLayout in Android

Aligns the child center horizontally

Attribute used: android:layout_centerHorizontal=”true”

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AndroidDvlpr.com"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

Alignment of Child view with other Child View

In the following example we’ve demonstrated the alignment of two child views both being layout_centerInParent, but how child2 will align with respect to child1

RelativeLayout in Android
<?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">

    <TextView
        android:id="@+id/child1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child1"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/child2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child2"
        android:layout_centerInParent="true"/>

</RelativeLayout>

layout_above = @+id/child1

RelativeLayout in Android

Aligns Child 2 above Child1

Attribute used: android:layout_above=”@+id/child1″

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

    <TextView
        android:id="@+id/child1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child1"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/child2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child2"
        android:layout_centerInParent="true"
        android:layout_above="@+id/child1"/>

</RelativeLayout>

layout_below = @+id/child1

RelativeLayout in Android

Aligns Child 2 below Child1

Attribute used: android:layout_below=”@+id/child1″

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

    <TextView
        android:id="@+id/child1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child1"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/child2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child2"
        android:layout_centerInParent="true"
        android:layout_below="@+id/child1"/>

</RelativeLayout>

layout_toLeftOf = @+id/child1

RelativeLayout in Android

Aligns Child 2 to the left of Child1

Attribute used: android:layout_toLeftOf=”@+id/child1″

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

    <TextView
        android:id="@+id/child1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child1"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/child2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child2"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/child1"/>

</RelativeLayout>

layout_toRightOf = @+id/child1

RelativeLayout in Android
RelativeLayout in Android

Aligns Child 2 to the right of Child1

Attribute used: android:layout_toRightOf=”@+id/child1″

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

    <TextView
        android:id="@+id/child1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child1"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/child2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child2"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@+id/child1"/>

</RelativeLayout>

To learn how to get custom gradient background in Android Studio, click here!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.