Android RelativeLayout Example

RelativeLayout is different from LinearLayout in layout rules. RelativeLayout is more flexible and allows the controls to 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.

  1. Android RelativeLayout has a lot of properties such as layout_alignParentLeft, layout_alignParentTop, layout_centerInParent etc.
  2. 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 effects from the 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>
  3. Below is the relative layout align to the parent ( container view ) example screen image.
    android-relativelayout-example

2. RelativeLayout Align To Nearby Control Example.

  1. RelativeLayout also provides some other properties which are used to align controls to it’s nearby components. Such as layout_abovelayout_toLeftOflayout_toRightOflayout_below. 
  2. The value of the above property should be an existing component’s id.
  3. Please note, the existing 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.
  4. Below is the relative layout align to the nearby control example XML configuration data.
    <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>
  5. Below is the relative layout align to the nearby control example screen image.
    android-relativelayout-align-to-nearby-component-example

3. RelativeLayout Login Example.

  1. RelativeLayout provides some other align properties such as layout_alignToplayout_alignBottomlayout_alignLeftlayout_alignRigt.
  2. These properties are all used to align different components in different borders. The value of the above property is another component id included in the same RelativeLayout.
  3. The below example uses all the introduced RelativeLayout align properties in this article to create a login form in the 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>
  4. Below is the login example screen image.
    android-relativelayout-login-form-demo
0 0 votes
Article Rating
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x