Android RelativeLayout Example

RelativeLayout is different from LinearLayout in layout rules. RelativeLayout is more flexible and allows the controls appear in any location of the layout by a relative position. This article will introduce RelativeLayout and it’s properties with examples.

1. RelativeLayout Align To Parent Control Example.

Android RelativeLayout has a lot of properties such as layout_alignParentLeft, layout_alignParentTop, layout_centerInParent etc.

But all those properties is easy to understand because the properties name is so clearly, they are all used to align controls relative to it’s parent layout. You can see some properties and it’s effect from below example.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Left Top"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Right Top"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="Left Bottom"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="Right Bottom"/>

</RelativeLayout>

android relativelayout example

2. RelativeLayout Align To Nearby Control Example.

RelativeLayout also provide some other properties which are used to align controls to it’s nearby components.

Such as layout_abovelayout_toLeftOflayout_toRightOflayout_below. 

The value about above property should be an exist component’s id. Please Note, the exist component’s xml definition should be placed before other components which will be located relative to it in the layout xml file, otherwise the project will throw compile error.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/relativeLayoutButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button3 In Center"/>

    <Button
        android:id="@+id/relativeLayoutButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/relativeLayoutButton3"
        android:layout_toLeftOf="@id/relativeLayoutButton3"
        android:text="Above Left To Button3"/>

    <Button
        android:id="@+id/relativeLayoutButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/relativeLayoutButton3"
        android:layout_toRightOf="@id/relativeLayoutButton3"
        android:text="Above Right To Button3"/>


    <Button
        android:id="@+id/relativeLayoutButton4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/relativeLayoutButton3"
        android:layout_toLeftOf="@id/relativeLayoutButton3"
        android:text="Below Left To Button3"/>

    <Button
        android:id="@+id/relativeLayoutButton5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/relativeLayoutButton3"
        android:layout_toRightOf="@id/relativeLayoutButton3"
        android:text="Below Right To Botton3"/>

</RelativeLayout>

android relativelayout align to nearby component example

3. RelativeLayout Login Example.

RelativeLayout provides some other align properties such as layout_alignToplayout_alignBottomlayout_alignLeftlayout_alignRigt.

READ :   Android Add Fragment To Activity Dynamically Example

These properties are all used to align different components in different borders. The value of above property is another component id included in the same RelativeLayout.

Below example use all the introduced RelativeLayout align properties in this article to create a login form in android app.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/relativeLayoutUserNameTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="User Name : "
        android:textSize="20dp" />

    <EditText
        android:id="@+id/relativeLayoutUserNameEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/relativeLayoutUserNameTextView"
        android:hint="Input User Name."/>

    <TextView
        android:id="@+id/relativeLayoutPasswordTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/relativeLayoutUserNameEditText"
        android:layout_alignRight="@+id/relativeLayoutUserNameTextView"
        android:text="Password : "
        android:textSize="20dp"/>

    <EditText
        android:id="@+id/relativeLayoutPasswordEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/relativeLayoutPasswordTextView"
        android:layout_toRightOf="@id/relativeLayoutPasswordTextView"
        android:hint="Input Password."/>

    <Button
        android:id="@+id/relativeLayoutButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/relativeLayoutPasswordEditText"
        android:layout_alignRight="@+id/relativeLayoutPasswordEditText"
        android:text="Login"
        android:textAllCaps="false"/>


</RelativeLayout>

android relativelayout login form demo

Leave a Reply

Your email address will not be published. Required fields are marked *

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