Introduction of RelativeLayout

Android RelativeLayout enables you to specify how child views are positioned relative to each other or to the parent.

Each layout has a set of attributes which define the visual properties of that layout. Among them some Common Attributes used in RelativeLayout via .xml file.

Attributes Name Use
android:id ID which uniquely identifies the viewIt would be any name.

Ex. android:id=”+@id/id_name”
android:layout_width Width if the layoutYou can given width as like below,

– fill_parent : Covers all the areas of parent view width wise.

– wrap_content : Covers width based on your content’s size.

– match_parent : Contains as much width as its parent has.

Ex. android:layout_width=”fill_parent”

Or you can specify int value as well, which is counted as dip value. (Dimensions In Pixels)

Ex. android:layout_width=”200dip”
android:layout_height Height of the layoutYou can given width as like below,

– fill_parent : Covers all the areas of parent view width wise.

– wrap_content : Covers width based on your content’s size.

– match_parent : Contains as much width as its parent has.

Ex. android:layout_height=”wrap_content”

Or you can specify int value as well, which is counted as dip value. (Dimensions In Pixels)

Ex. android:layout_width=”200dip”
android:layout_above Positions the bottom edge of this view above the given anchor view ID and must be a reference to another child resource.You can provide the value as a reference ID

Ex. android:layout_above = “@id/reference_view_ID”
android:layout_below Positions the above edge of this view below the given anchor view ID and must be a reference to another child resource.You can provide the value as a reference ID

Ex. android:layout_below = “@id/reference_view_ID”
Android:layout_toLeftOf Positions the right edge of this view to the left of the given anchor view ID and must be a reference to another child resourceYou can provide the value as a reference ID

Ex. android:layout_toLeftOf = “@id/reference_view_ID”
Android:layout_toRightOf Positions the left edge of this view to the right of the given anchor view ID and must be a reference to another child resourceYou can provide the value as a reference ID

Ex. android:layout_toRightOf = “@id/reference_view_ID”
Android:layout_toStartOf Positions the end edge of this view to the start of the given anchor view ID and must be a reference to another child resourceYou can provide the value as a reference ID

Ex. android:layout_toStartOf = “@id/reference_view_ID”
Android:layout_toEndOf Positions the start edge of this view to the end of the given anchor view ID and must be a reference to another child resourceYou can provide the value as a reference ID

Ex. android:layout_toEndOf = “@id/reference_view_ID”
Android:layout_alignBaseline Alignment of this view’s baseline with the another child’s baseline.You can provide the value as a reference ID

Ex. android:layout_alignBaseline = “@id/reference_view_ID”
Android:layout_alignLeft Makes the left edge of this view match the left edge of the given anchor view ID and must be a reference to another child resourceYou can provide the value as a reference ID

Ex. android:layout_alignLeft = “@id/reference_view_ID”
Android:layout_alignRight Makes the right edge of this view match the right edge of the given anchor view ID and must be a reference to another child resourceYou can provide the value as a reference ID

Ex. android:layout_alignRight = “@id/reference_view_ID”
Android:layout_alignTop Makes the top edge of this view match the top edge of the given anchor view ID and must be a reference to another child resource.You can provide the value as a reference ID

Ex. android:alignTop = “@id/reference_view_ID”
Android:layout_alignBottom Makes the top edge of this view match the top edge of the given anchor view ID and must be a reference to another child resource,You can provide the value as a reference ID

Ex. android:layout_alignBottom= “@id/reference_view_ID”
Android:layout_alignParentTop If true, makes the top edge of this view match the top edge of the parent.You can specify the Boolean value like,

– True

– False

Ex. android:layout_alignParentTop = “true”
Android:layout_alignParentBottom If true, makes the bottom edge of this view match the bottom edge of the parent.You can specify the Boolean value like,

– True

– False

Ex. android:layout_alignParentBottom = “true”
Android:layout_alignParentLeft If true, makes the left edge of this view match the left edge of the parent.You can specify the Boolean value like,

– True

– False

Ex. android:layout_alignParentLeft = “true”
Android:layout_alignParentRight If true, makes the right edge of this view match the right edge of the parent.You can specify the Boolean value like,

– True

– False

Ex. android:layout_alignParentRight = “true”
Android:centerInParent If true, centers this child horizontally and vertically within its parent.You can specify the Boolean value like,

– True

– False

Ex. android: centerInParent= “true”
Android:centerHorizontal If true, centers this child horizontally within its parent.You can specify the Boolean value like,

– True

– False

Ex. android: centerHorizontal = “true”
Android:centerVerticle If true, centers this child vertically within its parent.
You can specify the Boolean value like,- True

– False

Ex. android: centerVerticle= “true”
Android:alignWithParentIfMissing This indicates what view should not be affected by gravity.You can provide the value as a reference ID

Ex. android: alignWithParentIfMissing= “@id/reference_view_ID”
Android:alignStart Makes the start edge of this view match the start edge of the given anchor view ID and must be a reference to another child resource.You can provide the value as a reference ID

Ex. android: alignStart= “@id/reference_view_ID”
Android:alignEnd Makes the end edge of this view match the end  edge of the given anchor view ID and must be a reference to another child resource.You can provide the value as a reference ID

Ex. android: alignEnd = “@id/reference_view_ID”
Android:alignParentStart If true, makes the start edge of this view match the start edge of the parent.You can specify the Boolean value like,

– True

– False

Ex. android:alignParentStart= “true”
Android:alignParentEnd If true, makes the end edge of this view match the end edge of the parent.You can specify the Boolean value like,

– True

– False

Ex. android:alignParentEnd= “true”
android:gravity Specifies how the child views will be positioned.There are multiple options available, basic and general used options are,

– top : Top side of the layout.

– bottom : Bottom side of the layout.

– left : Left side of the layout.

– right : Right side of the layout.

– center : Center of the layout from horizontally as well vertically.

– center_verticle : Centered vertically of the layout.

– center_horizontal : Centered horizontally of the layout.

Ex. android:gravity = “top”
android:ignoreGravity This indicates what view should not be affected by gravity.You can provide the value as a reference ID

Ex. android: ignoreGravity = “@id/reference_view_ID”
android:layout_marginTop Keeping extra space to the Top side of the layout.You can give any int value to this field. It will be considered as dip value.

Ex. android:layout_marginTop = “10dip”
android:layout_marginBottom Keeping extra space to the Bottom side of the layout.You can give any int value to this field. It will be considered as dip value.

Ex. android:layout_marginBottom = “10dip”
android:layout_marginRight Keeping extra space to the Right side of the layout.You can give any int value to this field. It will be considered as dip value.

Ex. android:layout_marginRight = “10dip”
android:layout_marginLeft Keeping extra space to the Left side of the layout.You can give any int value to this field. It will be considered as dip value.

Ex. android:layout_marginLeft = “10dip”
Android:layout_marginStart Specifies extra space on the start side of the view.You can give any int value to this field. It will be considered as dip value.

Ex. android:layout_marginStart = “10dip”
Android:layout_margingEnd Specifies extra space on the end side of the view.You can give any int value to this field. It will be considered as dip value.

Ex. android:layout_marginEnd = “10dip”
android:padding Padding filled to each side of the Layout.You can give any int value to this field. It will be considered as dip value.

Ex. android:padding = “10dip”
android:paddingTop Padding Top filled to each side of the Layout.You can give any int value to this field. It will be considered as dip value.

Ex. android:paddingTop = “10dip”
android:paddingBottom Padding Bottom filled to each side of the Layout.You can give any int value to this field. It will be considered as dip value.

Ex. android:paddingBottom = “10dip”
android:paddingRight Padding Right filled to each side of the Layout.You can give any int value to this field. It will be considered as dip value.

Ex. android:paddingRight = “10dip”
android:paddingLeft Padding Left filled to each side of the Layout.You can give any int value to this field. It will be considered as dip value.

Ex. android:paddingLeft = “10dip”
Android:paddingStart Padding to the start edge of the view
You can give any int value to this field. It will be considered as dip value.Ex. android:paddingStart = “10dip”
Android:paddingEnd Padding to the end edge of the view
You can give any int value to this field. It will be considered as dip value.Ex. android:paddingEnd = “10dip”
android:background Specifying background image or the color to the layout.You can specify here a drawable image or can provide color too.

Ex. android:background = “@drawable/img.jpg” or

android:background = “@color/red” or

android:background = “#FF00FF”
android:visibility Defined the visibility of the layout as well its contained children.It contains the value such that whether you want to show the layout and its children or need to invisible it.The values are,

– visible : Visible to the end user

– invisible : Invisible to the end user

– gone : Remove from the screen.

Ex. android:visibility = “gone”

How to use ?

You can set these attributes in the xml like,

<RelativeLayout

    android:layout_width=<i>"fill_parent"</i>

    android:layout_height=<i>"fill_parent"</i>

    android:gravity=<i>"center"</i>

    android:padding=<i>"10dip"</i>&gt;

    &lt;Button

      android:id=<i>"@+id/btn_no"</i>

      android:layout_width=<i>"100dip"</i>

      android:layout_height=<i>"wrap_content"</i>

      android:layout_alignParentRight=<i>"true"</i>

      android:layout_alignRight=<i>"@+id/btn_yes"</i>

      android:layout_below=<i>"@+id/txt"</i>

      android:layout_marginTop=<i>"20dip"</i>

      android:gravity=<i>"center"</i>

      android:text=<i>"No"</i>/&gt;

     &lt;TextView

        android:id=<i>"@id/txt"</i>

        android:layout_width=<i>"fill_parent"</i>

        android:layout_height=<i>"wrap_content"</i>

        android:gravity=<i>"center"</i>

        android:text=<i>"Do you want to continue?"</i>

        android:textSize=<i>"20sp"</i>/&gt;

        &lt;Button

          android:id=<i>"@id/btn_yes"</i>

          android:layout_width=<i>"100dip"</i>

          android:layout_height=<i>"wrap_content"</i>

          android:layout_below=<i>"@id/txt"</i>

          android:layout_marginTop=<i>"20dip"</i>

          android:gravity=<i>"center"</i>

          android:text=<i>"Yes"</i>/&gt;

&lt;/RelativeLayout&gt;

And you will get output like,

SCREEN_XML

For getting the clear idea you can find the source code of RelativeLayout here.

For any query, feel free to comment..!!

You may also like :