RelativeLayout In Android-Tutorial And Example With Basic Concepts

We will talk about Relativelayout in android tutorial today.

RelativeLayout in Android is used to create Layout Design of Android Application. Basically there are two types of Layout :

1.) LinearLayout and
2.) RelativeLayout

LinearLayout is used to design various elements like Button, EditText, TextView etc. in relative to position of each other.

Relativelayout has various attributes which can set elements with proper position and distance to each other.

Relative Layout is flexible layout in android designing for custom layout designing.

With the help of Relativelayout, you can put two elements such that one element covers other or partially covers or as per your layout requirements.

In RelativeLayout, you can use “abovebelowleft and right” to arrange the element position, for example, display a “button1” below “button2”, or display “button3” on left of the “button1”.

You can set all layouts like Linearlayout, Relativelayout, Framelayout, TableLayout, GridLayout etc. as child of each other.

Let us learn some technical matters now.

1.) layout_width and layout_height

It will control the width and height of the relativelayout.

If you want to give full width and height then set layout_width and layout_height as  match_parent.

Set layout_width and layout_height as wrap_content if you want to have width of relativelayout as per requirements of children.

You can set layout_width in units also. For example 50dp, 40dp etc. The higher the dp number the more width is there.

2.) RelativeLayout’s layout_toRightOf and layout_toLeftOf attributes

Consider below source code

Output is below

relativelayout btn left
In above source code, we have taken a RelativeLayout, which contains two buttons (1 & 2).

Now, as per below code, an attribute named layout_toRightOf is used in Button2’s code to put Button2 at the right side of Button1.

Similarly, you can use layout_toLeftOf attribute to put any element at the left side other element.

3.) RelativeLayout’s layout_below and layout_above attributes

Look at following code

Output is like

relativelayout above

In above source code, we have taken a RelativeLayout, which contains two buttons (1 & 2).

Now, as per below code, an attribute named layout_below is used in Button2’s code to put Button2 below the Button1.

Similarly, you can use layout_above attribute to put any element above other element.

4.) Other Useful attributes

RelativeLayout has several other attributes, which can power android layout seamlessly.

4.1) layout_centerInParent

What if you want put an element in the exact middle of the Whole RelativeLayout?

Solution is in below source code

Output of above code is below

relative center
Here, we have put Button1 in the center of it’s parent, which is RelativeLayout.

Following line in Button1 does the trick

4.2) layout_centerHorizontal

This attribute set element at a horizontally center.

But element will not be center at vertical position as per below image.

relative hori cen
Source code for above image is as below

Look at this line

This line is written in Button’s code and parent of button is Relativelayout.

So button is set as horizontally center in it’s parent.

4.3) layout_centerVerticle

This attribute set element at a vertically center.

But element will not be center at horizontal position as per below image.

relativelayout vet cent
Source code for above image is as below

Look at this line

This line is written in Button’s code and parent of button is Relativelayout.

So button is set as vertically center in it’s parent.

4.5) Elements covering each other

One of the most efficient use of RelativeLayout is that you can set elements such that they can cover each other as per your android app’s requirement.

This covering facility can not be served by  Linearlayout.

Look below image

relativelayout cover
Here, Blue button is covering pink button. The covered part can be seen as rectangle with thin white border.

Source code for above image

4.6) clickable

By default, RelativeLayout is clickable in Android app.

You can programmatically set click effect in Java Code.

If you do not want to keep RelativeLayout clickable, then you can do it by this way

You can give value as true to clickable attribute to again make element clickable.

If you want to master in other Android basic concepts, then visit following tutorials

Android Basic Concepts to master Android App Development

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

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