RelativeLayout in Android | Relative Layout Tutorial | Android Breakdown

Hey there, we are back to upgrade your beginner level. Yes, Today we are going to talk about relative layout in android. So lets move ahead and have clear understanding about it.

What is Relative Layout ?

A view group that displays child view in relative positions.

The answer you read above is so common. But have you ever get it ? what does it means actually ? Yes, you still have some confusion about relativity. So let's understand it in a layman way.

For example this is a relative layout as parent view.

Android Breadown
Relative Layout as Parent View

Now, we will create a child view inside this parent view.
Android Breakdown
Child View in Parent View

As you can see that there is a child view on which we are going to change it's attribute.
Have a look on some attributes and there characteristics that what they does.


Attributes What it does ?
android:layout_centerHorizontal This attribute will take our child view in center, horizontally.
android:layout_centerVertical This attribute will take our child view in center, vertically.
android:layout_centerInParent This attribute will take our child view in center, horizontally and vertically both.
So let's get started with the attribute one.
1. android:layout_centerHorizontal
See the result of this attribute. We applied it on our child view.

Android Breakdown
android:layout_centerHorizontal

As you can see that if we do android:layout_centerHorizontal = true, child view is now horizontally centered.

2. android:layout_centerVertical
This attribute hangs child view in center, vertically. See the result of this attribute. We applied it on our child view.

Android Breakdown
android:layout_centerVertical


3. android:layout_centerInParent
You have already seen previous attributes and knows that how they can be used. Same as we will use android:layout_centerInParent. after appling this, the result will be like this.

Android Breakdown
android:layout_centerInParent

As you can see that by using android:layout_centerInParent we can take our child view in center, horizontally and vertically both.



Let's move ahead and take a look on some more attributes.
Before moving further let's make another child view in that same parent view.

Android Breakdown
Another Child View in Parent View

Give them ids, id:A and id:B.

Android Breakdown
Assigned ids to both child views

After giving them ids we are going to apply some more attributes.

Attributes What it does ?
android:layout_above This attribute will take child view(id:B) above another child view(id:A).
android:layout_below This attribute will take child view(id:B) below another child view(id:A).
android:layout_toLeftOf This attribute will take child view(id:B) to the left side of another child view(id:A).
android:layout_toRightOf This attribute will take child view(id:B) to the right side of another child view(id:A).

1. android:layout_above
See the result of this attribute. We applied it on our child view(id:B).

Android Breakdown
android:layout_above

You can see that child view containing id:B is above another child view id:A.

2. android:layout_below
By applying android:layout_below on child view (id:B), we can set this, below another child view (id:A). See the result of this attribute. We applied it on our child view(id:B).

Android Breakdown
android:layout_below




3. android:layout_toLeftOf
By applying android:layout_toLeftOf on child view (id:B), we can set this to the left side of another child view (id:A). See the result of this attribute. We applied it on our child view(id:B).

Android Breakdown
android:layout_toLeftOf

4. android:layout_toRightOf
By applying android:layout_toRightOf on child view (id:B), we can set this to the right side of another child view (id:A). See the result of this attribute. We applied it on our child view(id:B).

Android Breakdown
android:layout_toRightOf

Sounds Great !!! You learnt almost 80% of this tutorial. Before moving forward, Have you subscribed our YouTube Channel ? It helps us to make more informative blogs and videos for you. Please click on subscribe button.

And also don't forget to bookmark us (Ctrl + D).



Okay, so there are some more interesting attributes.

Attributes What it does ?
android:layout_alignParentTop This attribute takes child view at the top position of parent view.
android:layout_alignParentBottom This attribute takes child view at the bottom position of parent view.
android:layout_alignParentLeft This attribute takes child view at the left side of parent view.
android:layout_alignParentRight This attribute takes child view at the right side of parent view.

1. android:layout_alignParentTop
android:layout_alignParentTop takes child view at the top position of parent view. We are also using android:layout_centerInParent for better understanding.

Android Breakdown
android:layout_alignParentTop

2. android:layout_alignParentBottom
android:layout_alignParentBottom takes child view at the bottom position of parent view.

Android Breakdown
android:layout_alignParentBottom



3. android:layout_alignParentLeft
android:layout_alignParentLeft takes child view at the left side of parent view.

Android Breakdown
android:layout_alignParentLeft

4. android:layout_alignParentRight
android:layout_alignParentRight takes child view at the right side of parent view.

Android Breakdown
android:layout_alignParentRight
That's it for today. Do practice as described in video at the top of this blog. And if you face any issues then clear them by commenting below.

Comments

Post a Comment