DAY 6: Relative Layout In Android & My Own Examples

Hello guys! How are you doing? 🙂




In my yesterday’s post we delved deeper into the Linear Layout in Android and I showed you my own very simple code.  Today I will still continue the topic of ViewGroups but here we will focus on a more popular and practical type of View Groups, that is, RelativeLayout which lets you position children relative to the parent view or other children views. Let’s begin!

What Is A RelativeLayout In Android?

RelativeLayout, as the name suggests, is a type of a View Group that lets you position children contained within it in the following two ways (this is their simplified graphical representation):

  • Relative to the Parent’s left, top, right or bottom edges. In this case we simply have to specify the attribute for alignment and the view will be positioned in the desired place.
    Relative Layout in Android
    To position a child view relative to the parent you have to use one of the following attributes with the value of “true” (depending on which edge you want to align to):
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"

Remember that by default views are placed in the top left corner.

  • Relative to other Views, i.e. anchor views in relation to which all other views are positioned.  In this case we have to assign an ID name  to an anchor view and specify attributes positioning the other child view, for example, to the left or to the right.
    Relative Layout in Android

To assign an IT name to the view, you simply put the following line as the first line of code of the view you are styling:

android:id="@+id/name_of_view"

To position a child view relative to other views, you can use one of the following attributes (depending to which side of the other view you want to position the view at hand):

android:layout_toLeftOf="@id/name_of_view"
android:layout_toRightOf="@id/name_of_view"
android:layout_above="@id/name_of_view"
android:layout_below="@id/name_of_view"

As you can see, these two types of ViewGroups are quite simple and easy to understand (if we draw them in Photoshop). Let’s now try to “draw” something similar with the actual code and see what we get.

Coding Relative Layout In Android

Below you can see how I coded the example RelativeLayout. This time the code is a bit longer and there are several new attributes in it. Don’t worry. We will go through all them so that everything is as crystal clear to you as to me.

<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="8dp">

 <ImageView
 
 android:id="@+id/image_view"
 android:layout_width="86dp"
 android:layout_height="86dp"
 android:scaleType="centerCrop"
 android:src="@drawable/android"/>

 <TextView
 android:id="@+id/Olga"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@id/image_view"
 android:text="Olga"
 android:layout_margin="8dp"
 android:background="#F50057"
 android:textAppearance="?android:textAppearanceMedium"
 />

 <TextView
 android:id="@+id/Junior"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="8dp"
 android:layout_marginTop="10dp"
 android:paddingTop="8dp"
 android:paddingBottom="8dp"
 android:layout_toRightOf="@id/image_view"
 android:layout_below="@id/Olga"
 android:text="Junior Android Developer"
 android:background="#D500F9"
 android:textAppearance="?android:textAppearanceSmall" />

 <TextView
 android:id="@+id/GURU"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="12dp"
 android:layout_marginLeft="8dp"
 android:layout_below="@id/Junior"
 android:layout_toRightOf="@id/image_view"
 android:text="at MobileGuru.LOL"
 android:background="#2196F3"
 android:textAppearance="?android:textAppearanceSmall" />

</RelativeLayout>

As you can see it is a lot of code and its outcome (in comparison to what we coded in previous posts) is tiny. Just take a look:

Relative Layout in Android (my code)

This is how the above code would run on an Android device.

I have specified background colors again so that it’s easy to see where the borders of specific views are.

A Relative Layout Made Of Four Views

You probably know from what you learned in previous posts about Views and Linear Layout that in the example code below there are four different views (one ImageView and three TextViews). Even if you haven’t read it from the code, you can guess it from the above screenshot from Android Visualizer.

Several different attributes were specified to style these views so that they look how they and are positioned where they are.  What are these attributes?

Padding & Margin

If you know a bit of HTML and CSS, these two should be and probably are your bread and butter. To put it simply padding and margin are usually used to add some free (usually) white space around view elements so that they are not crowded against one another or against the edge of the device.

Padding changes the size of the child element by “stretching” it across the parent view while Margin will push the child view into the defined position without influencing its size.  8dp of padding will look

When defining the attributes for RelativeLayout at the beginning of the above code I set padding to be of 8dp (density independent pixels) so that the whole view will be stretched in such a way that there is 8dp of space from each side.

android:padding="8dp"

Defining padding the way I did it in my code set padding to be 8dp for top, bottom, left and right. If I wanted to adjust just one side, I would have to use one of the following:

android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"

In the case of the second element (TextView called “Olga”), I set margin to be 8dp, which means that this element will be positioned 8dp away from every edge of the screen except for the left edge because here I said that this TextView should be placed to the right of the ImageView. These are the two lines of code I am taking about now:

android:layout_margin="8dp"
android:layout_toRightOf="@id/image_view"

In most cases you won’t have background color specified so it won’t make much of a difference if you use padding or margin to style and position your views. By default the value of padding and margin is set to 0. 

In the case of the second TextView element called “Junior Android Developer” I set padding to be 8dp both at the bottom and top (so that there is more free space at the bottom and top) and specified left margin to 8dp (so that it doesn’t touch the image on the left)  and top to 10dp (so that it doesn’t cover the Olga view). I achieved all of this with these four lines of code:

 android:layout_marginLeft="8dp"
 android:layout_marginTop="10dp"
 android:paddingTop="8dp"
 android:paddingBottom="8dp"

As I specified the background color, you can easily see the difference in comparison to the third TextView called “at MobileGuru.LOL” where no padding was specified but only margins to set the position of this view relative to other views.

I think I could produce thousands of different case scenarios with padding and margin but I just took at look at the clock and noticed that it’s almost midnight and I should call it a day. Tomorrow I will begin more serious stuff  like installing Java, Android Studio and preparing the whole app development environment. Keep your fingers crossed!

Summary Of Day 6

Day 6 of my Android development journey has come to an end  (and it’s almost 00:00). I feel happy because I managed to create the post just like I planned. Even though it’s been only a week, I feel I am making enormous progress.

What I want to say: I am sure that I will dream of an Android robot today.
Level of motivation: Extremely high
Level of fatigue: Low (even though it’s almost midnight and I am not a night person)
Level of experience: 0.0030%
What I have learned: I know what RelativeLayout is and I can position views relative to parent views or other views. I also brushed my knowledge about padding and margin.  

Share Your Thoughts

Are you an Android developer? Did you notice any errors in this post? Do you have any questions or comments?

I am only beginning my journey of becoming an Android developer and I would really like to hear from you (and learn form you). Feel free to either contact me directly or leave me your comments in the comment box below.

Add Comment