Learn Android Development For Beginners

Relative Layout

The relative layout is most flexible layout available in Android application. As the name suggests, it positions the control relative to container (parent view) or other control in the container.

Relative layout provides different layout attribute to specify the position of the control. Some attributes are used for positioning child control with parent container and other for position relatively to the other child controls. Following attributes are available to specify position of child control relative to parent.

Attribute NameDescription
android:layout_alignParentTop It takes Boolean value true/false. If value is true, it makes the top edge of this view match the top edge of the parent.
android:layout_alignParentBottom It takes Boolean value true/false. If value is true, it makes the bottom edge of this view match the bottom edge of the parent.
android:layout_alignParentLeft It takes Boolean value true/false. If value is true, it makes the left edge of this view match the left edge of the parent.
android:layout_alignParentRight It takes Boolean value true/false. If value is true, it makes the right edge of this view match the right edge of the parent.
android:layout_alignParentStart It takes Boolean value true/false. If value is true, it makes the start edge of this view match the start edge of the parent.
android:layout_alignParentEnd It takes Boolean value true/false. If value is true, it makes the end edge of this view match the end edge of the parent.

For understanding of the relative layout and its attributes, create a new activity and add RelativeLayout in it. Add button in the layout and set the attributes available in the above table one by one. In the below xml layout file the button has android:layout_alignparenttop="true". You can apply other attributes too to check the behavior.

 <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">
    
     <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 1"
                android:layout_alignParentTop="true" />
 </RelativeLayout>

layout_alignParentTop="true" layout_alignParentBottom="true" layout_alignParentRight="true"

As you can see in above image the position of the child control adjusts as per attribute setting. You can apply more than once attributes together to design UI, e.g. if we apply android:layout_alignParentTop and android:layout_alignParentBottom together, the child control consumes all the vertical space of the parent container. See the example below.

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

     <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 1"
                android:layout_alignParentTop="true"
                android:layout_alignParentBottom="true" />

 </RelativeLayout>

RelativeLayout postions each child view as per its attribute setting. If more than one child control has same attributes settings, only top most control visibles on layout, other control hide behind the top most control. See the layout xml below that contains two buttons having different attributes.

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

        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 1"
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentLeft="true" />

        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 2"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentLeft="true" />

 </RelativeLayout>

The first button has android:layout_alignParentTop, android:layout_alignParentLeft and android:layout_alignParentRight attribute value is true. The layout_alignParentTop attribute anchors it on the top position of the parent, the layout_alignParentLeft attribute anchors it on the left position of the parent and layout_alignParentRight attribute anchors it on the right position of the parent.

That’s why the button is consuming all the horizontal space of the parent container from Left to Right. The second button has layout_alignParentBottom="true" and consuming all the bottom horizontal space of the parent container from Left to Right.

There are also some attributes available to align child control center of the parent Horizonally, vertically and both. See the attributes list below.

Attribute NameDescription
android:layout_centerHorizontal It takes Boolean value true/false. . If value is true, it centers this child horizontally within its parent.
android:layout_centerVertical It takes Boolean value true/false. . If value is true, it centers this child vertically within its parent.
android:layout_centerInParent It takes Boolean value true/false. . If value is true, it centers this child horizontally and vertically within its parent.

Add button in the relative layout and set above attribute one by one to see how it works.

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

        <Button android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:text="Button 1"
                android:layout_centerHorizontal="true" />

 </RelativeLayout>

layout_centerHorizontal="true" layout_centerVertical="true" layout_centerInParent="true"

As you can see in above image layout_centerHorizontal centers the child horizontally, layout_centerVertical centers child vertically and layout_centerInParent centers the child horizontally and vertically.

For more understanding add the multiple controls in relative layout and set different attributes of controls to understanding how it works. See the layout xml below.

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

    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1"
            android:layout_centerHorizontal="true" />

    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2"
            android:layout_centerVertical="true" />

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

    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 4"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true" />

    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 5"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true" />

</RelativeLayout>

As you can see “Button 4” has attributes android:layout_alignparentright="true" and android:layout_centervertical="true". That’s why he is vertically centered at right side of the layout.

There are some other attributes available to position child control relative above or below to the other control.

Attribute NameDescription
android:layout_above It takes view ID as value. It positions the bottom edge of this view above the given anchor view ID.
android:layout_below It takes view ID as value. It Positions the top edge of this view below the given anchor view ID.

Add three button in the relative layout and set android:layout_centerInParent="true" for first button. Set layout_above and layout_below for other two buttons. Se the layout xml below.

 <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="com.example.shakeeliqbal.myrelativelayout.Relative4">

        <Button android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 1"
                android:layout_centerInParent="true" />

        <Button android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 2"
                android:layout_above="@+id/button1"
                android:layout_centerInParent="true" />

        <Button android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 3"
                android:layout_below="@+id/button1"
                android:layout_centerInParent="true" />

 </RelativeLayout>

Relative layout also provide number of attributes to position child control relative to other child control. See the some attributes in below table.



Attribute NameDescription
android:layout_alignTop It takes view ID as value. It makes the top edge of this view match the top edge of the given anchor view ID.
android:layout_alignBottom It takes view ID as value. It makes the bottom edge of this view match the bottom edge of the given anchor view ID.
android:layout_alignLeft It takes view ID as value. It makes the left edge of this view match the left edge of the given anchor view ID.
android:layout_alignRight It takes view ID as value. It makes the right edge of this view match the right edge of the given anchor view ID.
android:layout_alignStart It takes view ID as value. It makes the start edge of this view match the start edge of the given anchor view ID.
android:layout_alignEnd It takes view ID as value. It makes the end edge of this view match the end edge of the given anchor view ID.
android:layout_alignBaseline It takes view ID as value. It positions the baseline of this view on the baseline of the given anchor view ID.
android:layout_alignWithParentIfMissing It takes Boolean value true/false. . If value is true, the parent will be used as the anchor when the anchor cannot be be found for layout_toLeftOf, layout_toRightOf, etc.

For getting familiar with the above attributes. Add Button in the relative layout and set its width and height to 200dp and make it center align using attribute layout_centerInParent="true". Add few other buttons in the layout and set their positions relatively to the “Button 1” using attributes in above table.

 <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="com.example.shakeeliqbal.myrelativelayout.Relative4">

        <Button android:id="@+id/button1"
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:text="Button 1"
                android:layout_centerInParent="true" />

        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 2"
                android:layout_alignTop="@+id/button1" />

        <Button android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 3"
                android:layout_alignBottom="@+id/button1"
                android:layout_alignParentRight="true" />

        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 4"
                android:layout_alignLeft="@+id/button1" />

        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 5"
                android:layout_alignright="@+id/button1"
                android:layout_alignParentBottom="true" />

        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 6"
                android:layout_alignBaseLine="@+id/button1" />

</RelativeLayout>

You can notice in the above diagram, “Button 2” is top align with “Button 1” because of android:layout_alignTop="@+id/button1" attribute and “Button 3” is bottom align because of android:layout_alignBottom="@+id/button1" attribute. The other button’s alignment is as per their attribute values.

There are also attributes available to position control left or right relative to other control. See the attributes below in table.



Attribute NameDescription
android:layout_toEndOf It takes view ID as value. It positions the start edge of this view to the end of the given anchor view ID.
android:layout_toLeftOf It takes view ID as value. It positions the right edge of this view to the left of the given anchor view ID.
android:layout_toRightOf It takes view ID as value. It positions the left edge of this view to the right of the given anchor view ID.
android:layout_toStartOf It takes view ID as value. It positions the end edge of this view to the start of the given anchor view ID.

For understanding add the Buttons in relative layout and set the attributes available in above table.

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

        <Button android:id="@+id/button1"
                android:layout_width="250dp"
                android:layout_height="wrap_content"
                android:text="Button 1" />

        <Button android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 2"
                android:layout_below="@id/button1"
                android:layout_toEndOf="@id/button1"
                android:layout_toRightOf="@id/button1" />

        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 3"
                android:layout_below="@id/button2"
                android:layout_toStartOf="@id/button2"
                android:layout_toLeftOf="@id/button2" />

 </RelativeLayout>

The “Button 2” is positioned right side of the “Button 1”, while “Button 3” is positioned left side of the “Button 2”.



Desing Detail Form

The relative layout is most powerful layout for designing the UI. In the next example we will learn to design a form using relative layout. Suppose the form in the image below is have to design in the relative layout. Let’s start designing the layout.

There are many ways to design above form. But in this example we start designing from TOP to Bottom.

Add TextView control in the relative layout. Set its id as “@+id/tvName” and text as “Your Name”. By default this textView is align top left in the RelativeLayout. Add EditText on the right of the TextView using property android:layout_toRightOf="@id/tvName" and set its width is “fill_parent” for consuming all available space and set its id as txtName.

    <TextView
        android:id="@+id/tvName"
        android:text="Your Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"/>

    <EditText
        android:id="@+id/txtName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/tvName"
        android:layout_toRightOf="@id/tvName"/>

After completing design of the top portion of layout. Add another TextView below the “tvName” using attribute android:layout_below="@id/tvName" and set its id as "@+id/tvEmail". Add another EditText below the “txtName” using attributes android:layout_below="@id/txtName" and also make it left align to the “txtName” using attribute android:layout_alignLeft="@id/txtName".

    <TextView
        android:id="@+id/tvName"
        android:text="Your Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp" />

    <EditText
        android:id="@+id/txtName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/tvName"
        android:layout_toRightOf="@id/tvName" />

    <TextView
        android:id="@+id/tvEmail"
        android:text="Your Email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tvName"
        android:padding="10dp" />

    <EditText
        android:id="@+id/txtEmail"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/txtName" />

Now for designing complete layout, just think and try to apply available layout attributes in RelativeLayout. The full layout XML for above design is below.

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

    <TextView
        android:id="@+id/tvName"
        android:text="Your Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"/>

    <EditText
        android:id="@+id/txtName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/tvName"
        android:layout_toRightOf="@id/tvName"/>

    <TextView
        android:id="@+id/tvEmail"
        android:text="Your Email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tvName"
        android:padding="10dp"/>

    <EditText
        android:id="@+id/txtEmail"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/txtName"
        android:layout_below="@id/txtName" />

    <TextView
        android:id="@+id/tvDetail"
        android:text="Your Detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tvEmail"
        android:padding="10dp"/>

    <EditText
        android:id="@+id/txtDetail"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#fffef4d2"
        android:gravity="top"
        android:layout_alignLeft="@id/txtEmail"
        android:layout_below="@id/txtEmail"
        android:layout_above="@+id/btnSend1" />

    <Button
        android:id="@+id/btnSend1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Send"
        android:layout_alignParentBottom="true" />

</RelativeLayout>

Download Source Code

You can get the source code. Download Source Code

;